Email Template

In lots of cases Opinum will send emails to your users:

  • Invitations
  • Reports
  • Alerts
  • ...

The default Opinum email template looks like this:

Default Template

Different parts

There are 4 basic parts that in the template.

Subject

In the image above, this part is the one that read "Opinum Email Template".

It is used to repeat the Subject of the email, in this case, in the form of a general title. This part is optional and can be removed from the custom template.

Body

In the image above, this part is the one that read "This is the content of the email"

This part is the one used to pass the message of the email. It will contain details about the alert, the report, ...

Warning

This part is absolutely mandatory

Image placeholder

In the Opinum dashboard, there is a feature that allows you to send certain visuals by email.

We use this placeholder in order to know where to insert the image.

Call to action

In the image above, this is the green button and the blurred text under it.

We use this button to let user accept an invitation, download a report, ...

The text underneath is there to simply repeat the target url in case the email client of the user would prevent him from clicking the button and therefore the user would have to copy and paste the link in its browser.

Template source

You can download the default Opinum template here.

How it works

The template is a simple html file. We have built it using Foundation Emails and more specifically the Sass guide.

The template contains the placeholders necessary for the system to fill in the information. Those placeholders are always placed in between $.

The different placeholders used are:

  • $title$ for the subject
  • $text$ for the body
  • $button$ for the call to action
  • $callbackUrl$ for the url of the call to action

You will also find the following section:

$inlineImages:{imageKey| <img width="500" style="..." src="cid:$imageKey$" align="center" class="float-center"> }$

We have planned that in the future we will be able to send multiple images. so this syntax is simply a loop that goes through all images and prints a simple img for all of them.

The call to action is surrounded by the following

$if(button)$
...
$endif$

So the entire call to action block is not printed in the end result when no button is needed.

Images management

Most emails are making uses of images. In the default template you can see the logo in on top and the social media icons down below in the footer.

In order to have images in your own template, we have built 2 options. When you send your template to the Opinum team, you will have to say which option you use and for which image.

Note

You can use a combination of the 2 options in your template based on the image.

The first method is to use a simple link. In this case, Opinum can host the image for you but you will need to do something like this in the html:

<img src="$imagePath$yourimagename.png" />
Warning

Please make sure that you do not include an extra forward slash between the placeholder and the filename.

Note

You can also host the image yourself and use the absolute URL to the image.

Pro:

  • Keeps the email very light.
  • Allows for changing the image after the email was sent.

Cons:

  • Some email clients will block those images and ask the user to allow the external content. This might have a negative impact on the look&feel of the resulting email.
  • Requires an extra download

CID Embedded Images (Inline Images)

This technique has been around in email management for a while. The key to this is very simple, all you need to do is to create the following element in your html:

<img src="cid:facebook" >

In this case, we are loading a facebook logo where facebook is actually the "key" of the image.

Upon submitting your template to the Opinum team, you will have to give the mapping containing all the keys and the actual image they refer to.

Pro:

  • No extra download
  • Supported in most major email clients

Cons:

  • The file is embedded into the email so the email is heavier. This means that you should be careful to keep this solution only to small images.