​
Design Template

You can start designing beautiful HTML email with the drag & drop tool provided. You can add variables with Handlebarsjs language.

The email template has 3 parts -

  • Body (permanent background),
  • Blocks (each block contains different types of content),
  • Content (add Heading, Images, buttons, tables here).

The email designed is responsive, you can see how the template looks on desktop and mobile by clicking on preview bar in bottom left corner.

To add other details (subject, from name, from email, reply to and email markup) click on ‘Other Email Settings’.

​
Email fields description

FieldDescription
SubjectSmall text box. Use handlebarsjs to add variables
From NameDisplay name which tells recipient who sent the email
From EmailDomain name must be registered with the vendor
Reply ToDomain name must be registered with the vendor
ccOptional List of email ids. It is not a part of email design. To be sent with Events data or from Workflow Triggered by API
bccOptional List of email ids. It is not a part of email design. To be sent with Events data or from Workflow Triggered by API
AttachmentOptional Not a part of email design. To be sent as a parameters when Workflow is triggered from Backend.
Email MarkupOptional Schema.org markup which allows to add actions in the email itself. Events, tickets, delivery, one click actions, highlights can be sent in email. Use handlebarsjs to add variables.

​
Adding dynamic content in email

There will always be the case where you would be required to add dynamic content to a template, so as to personalise it for your users. To achieve this, you can add variables in the template, which will be replaced with the dynamic content at the time of sending email. To send actual values to replace variables at the time of communication trigger, use one of our frontend or backend SDKs. Here is a step by step guide on how to add dynamic content in a template:

1

Declaring Variables in the global 'Variables' button:

If you are at this stage, it is assumed that you have declared the variables along with sample values in the global Mock data button. To see how to declare variables before using them in designing templates, refer to this section in the Templates documentation.

2

Using variables in the templates:

Once the variables are declared, you can use them while designing template for any channel. We support handlebarsjs to add variables in the template. As a general rule, all the variables have to be entered within double curly brackets: `{{variable_name}}

Below are some examples of how to enter variables in the template design. For illustration, we are using the same sample variable names that we declared in the ‘Templates’ section:

  1. To enter a nested variable, enter in the format {{var1.var2.var3}}. e.g. to refer to city in the example above, you need to enter {{event.location.city}}

  2. If you have any space in the variable name, enclose it in square bracket {{event.[first name]}}

  3. To add array names, you need to use an email functionality called Merge Tags . Scroll below to the Merge Tags section.

​
Auto-suggestions in email

If you have defined the variables before hand, they will come as auto-suggestions. This will remove the chances of error like variable mismatch at the time of template rendering. You can get auto-suggestions when you type a curly bracket {, or you can use a functionality called ‘Merge Tags’.

Variable Suggestions on typing '{'

​
Merge Tags

Merge tags allow end-users to dynamically add content to their email. Merge tags can be inserted into a block of text by clicking on the “Merge Tags” button in the text editor toolbar. The button is not shown if no variables are defined in the global Variables button. This is how ‘Merge Tags’ looks when you click on a Content block.

​
Adding array elements

In email, there is a difference on how to add array elements in the template, which can be used to send a list of items which could be dynamic in nature. If you have noticed, you do not get array elements in the drop-down suggestion when you type { In order to add array element, you will be required to necessarily use a functionality called Merge Tags. Follow these steps to add variable for array element in an email template:

1

Write an Array Object as per the sample below:

Declare an array object in the Variables button. Below is a sample of variables defined. Note that variable array has a list of product items, with product_name, product_image, and product_price as array properties. Save it.

2

Pick a Row of your choice:

Select a Row in which you want to add dynamic content of an array. You will see an additional button on the bottom left corner.

3

Select the arrays you want to add:

When you click on it, you will see the list of all arrays that you have declared in the global Variables button. Select the array whose variables you want to add in the row.

On associating an array element with the Row, you will see the color of selected row change to Green.

4

Select the variables of choice:

Once selected, you will start seeing the array elements variables in the auto-suggestions. (You can type { or click on ‘Merge Tags’ to get the suggestion values). Select the desired variable, and the row will be repeated for all the elements that come at the time of email trigger.

​
Display email blocks based on condition

There can be a case where you would want to show or hide some content in the template based on a condition.

To achieve this, you can add a display condition on a block and only show the content of that block to the users who satisfy the given condition. One such example could be to show branding watermarks in email templates to free users and not show them to paid users.

Here’s how you can add display condition to an email block:

1

Add a block and add the relevant content on which you would want to apply the condition.

Display condition can only be applied at a content block level. So, please ensure that you create a separate block for the content that you want to add display condition on

2

Select the block and click on the 'Display Conditions' checkbox from quick content settings or the right-hand side content settings

3

Add the condition in the editor and click on 'Create new condition'

  • Add a relevant name and description to the condition.

  • You can add condition in this format (condition <key> "==" <value>). You can use any of the supported conditional operators in the conditional statement

Once the display condition is created, you can use the same display condition across multiple content blocks.

​
Supported conditional operators

OperatorReturns truthy whenSample Statement
==LHS equals RHS1 == “1”
===LHS value as well as data type matches with RHS1 === 1
>LHS is greater than RHS2 > 1
\<LHS is less than RHS1 < 2
>=LHS is greater than equals to RHS2 >= 2 or 3 >= 2
\<=LHS is less than equals to RHS2 <= 2 or 1 <= 2
!=LHS is not equals RHS3 != 1
!==LHS value or data type does not equal RHS1 !== “1”

OR condition

For cases where your condition looks like users belonging to New York or Chicago, you can add or operator in your display condition. The block will be displayed if one of the conditions is true. Conditional statement for above example will look like this:

(or (condition city ”==” “New York”) (condition city ”==” “Chicago”))

You can add as many conditions in the or statement as you want.

AND condition

For cases where your condition looks like users with monthly billing >= 100$ and yearly billing >= 1000$, you can add and operator in your display condition. The block will be displayed if all the conditions in and statement are true. Conditional statement for above example will look like this:

(and (condition monthly_bill ”>=” 100) (condition annual_bill ”>=” 1000))

You can add as many conditions in the and statement as you want.

​
Email Preview

You will be able to see the sample values in the Preview section, as well as in the Live version when you publish a draft.

If you cannot see your variable being rendered with the sample value, check one of the following:

  1. Make sure you have entered the variable name and the sample value in theVariablesbutton.

  2. Make sure you have entered the correct variable name in the template, as per thehandlebarsjsguideline.

At the time of sending communication, if there is a variable present in the template whose value is not rendered due to mismatch or missing, SuprSend will simply discard the template and not send that particular notification to your user.

Please note that the rest of the templates will be sent.

e.g. If there is an error in rendering Android Push template, but email template is successfully rendered, Android Push notification will not be triggered, but email notification will be triggered by SuprSend.

​
Frequently Asked Questions