How to design email template using either drag and drop editor or code editor.
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 -
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
’.
Field | Description |
---|---|
Subject | Small text box. Use handlebarsjs to add variables |
From Name | Display name which tells recipient who sent the email |
From Email | Domain name must be registered with the vendor |
Reply To | Domain name must be registered with the vendor |
cc | Optional List of email ids. It is not a part of email design. To be sent with Events data or from Workflow Triggered by API |
bcc | Optional List of email ids. It is not a part of email design. To be sent with Events data or from Workflow Triggered by API |
Attachment | Optional Not a part of email design. To be sent as a parameters when Workflow is triggered from Backend. |
Email Markup | Optional 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. |
How to add email markup in email template
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.
Before you start sending email markups, you must [Register with Google]
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 (e.g. from support@suprsend.com to support@suprsend.com
To use Email Markup on SuprSend, you can add your schema in ‘Other Email Settings’.
You can take sample schema for your use case from Google reference guide
You can add variables in the schema withhandlebarsjs
language
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.
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.
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:
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.
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:
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}}
If you have any space in the variable name, enclose it in square bracket {{event.[first name]}}
To add array names, you need to use an email functionality called Merge Tags . Scroll below to the Merge Tags section.
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 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.
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:
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.
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.
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.
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.
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:
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
Select the block and click on the 'Display Conditions' checkbox from quick content settings or the right-hand side content settings
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.
Operator | Returns truthy when | Sample Statement |
---|---|---|
== | LHS equals RHS | 1 == “1” |
=== | LHS value as well as data type matches with RHS | 1 === 1 |
> | LHS is greater than RHS | 2 > 1 |
\< | LHS is less than RHS | 1 < 2 |
>= | LHS is greater than equals to RHS | 2 >= 2 or 3 >= 2 |
\<= | LHS is less than equals to RHS | 2 <= 2 or 1 <= 2 |
!= | LHS is not equals RHS | 3 != 1 |
!== | LHS value or data type does not equal RHS | 1 !== “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.
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:
Make sure you have entered the variable name and the sample value in theVariablesbutton.
Make sure you have entered the correct variable name in the template, as per thehandlebarsjs
guideline.
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.
I have added some HTML content in my template and the rendered email on my email client (gmail, outlook) is different from the preview shown in the editor.
Email clients strip some HTML tags related to styling to script while rendering the email as it may pose security risks. You can use alternative tags to achieve similar output. You can check the supported tags in each email client here.