How to design email template using either drag and drop editor or code editor.
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
handlebarsjs
language
Declaring Variables in the global 'Variables' button:
Using variables in the templates:
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:{{var1.var2.var3}}
. e.g. to refer to city in the example above, you need to enter {{event.location.city}}
{{event.[first name]}}
{
, or you can use a functionality called ‘Merge Tags’.
Variable Suggestions on typing '{'
{
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:
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 the arrays you want to add:
On associating an array element with the Row, you will see the color of selected row change to Green.
Select the variables of choice:
{
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.Add a block and add the relevant content on which you would want to apply the condition.
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'
(condition <key> "==" <value>)
. You can use any of the supported conditional operators in the conditional statement
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.
handlebarsjs
guideline.
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.