Email Template

This section is a step-by-step guide to designing and publishing an email template.

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) and 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

Email Markup

What is Email Markup?

Google has introduced schema.org markup which lets your Gmail recipients take actions on email itself. You can check here the list of actions and the sample schema.org that Google allows.

Eligibility for sending Email Markups

Before you start sending email markups, you must [register with Google.] https://docs.google.com/forms/d/e/1FAIpQLSfT5F1VJXtBjGw2mLxY2aX557ctPTsCrJpURiKJjYeVrugHBQ/viewform?pli=1
Make sure to go through the Google Registration Guidelines to make sure your application is successful.
Google however allows you to test Markups when you send from and receive email on the same account (eg. from [email protected] to [email protected])

Using Markup on SuprSend

1. To use Email Markup on SuprSend, you can add your schema in 'Other Email Settings'.
2. You can take sample schema for your usecase from Google reference guide
3. You can add variables in the schema with **handlebarsjs** language
4. When you are in testing phase and your markup request is not approved by Google, make sure your Sender Email id is the same as Recipient Email id.
   
   
   

📘

Vendor Integration Required

Please note that to send an email, you will need to integrate an Email vendor with SuprSend.
Please visit the 'Vendor Integration Guideline' section to see vendors list and how to integrate them.

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:

Step 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 refer to this section in the Templates documentation.

Step 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}}. Eg. 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:

1. 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'

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. 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. 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.

2. 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.

3. 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 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:

Step 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

Step 2: Select the block and click on the "Display Conditions" checkbox from quick content settings or the right-hand side content settings

Step 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:

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 the Variables button.
2. Make sure you have entered the correct variable name in the template, as per the handlebarsjs guideline.
   
   

🚧

What happens if there is variable mismatch at the time of sending?

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. Eg. 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.