This page describes the logic of the Mailjet's template language and the syntax, variables, functions and statements available for the creation of a dynamic template.
The template language elements need to be wrapped between the following delimitators:
{{ ... }}for expressions that you would like to print in the template output{% ... %}for statements (conditions and loops)
+-*/: float divisiondiv: integer division , Format:( X div Y )mod:remainder of division, Format:( X mod Y )
>: strict superior<: strict inferior>=: superior<=: inferior=, ==, ===: equals!=, <>: not equals
andorxornot
Four sources of variables (or namespaces) are on offer in the template language. They can be used for simple insertion with {{ ... }} or with operators, functions and control structures.
- Vars
(var): non-persistent information, sent with the message - Contact properties - ContactData
(data): information related to the contact, already stored in Mailjet system - Predefined static variables
(mj): allowing you to easily access specific information related to the contact, sender, template and others - Segmentation `(segmentation) : leveraging the existing segmentation formulas you created for marketing purposes.
You can use the Mailjet Send API vars and custom vars (Vars property) to push contact specific information to be inserted in the template. This information will not be persistent in Mailjet system and will only be used for the current Send API call.
You can then use the syntax {{var:namevar:defaultvalue}} to print the value of the property in your template.
In order to have the template language interpreted, you must provide Mj-TemplateLanguage property in the payload to the Send API and set it to true.
Mailjet templating language support multidimensional json structure in the vars and custom vars:
{
...
"Vars":{
"x":{
"test": 2,
"test2": {
"test3": "Hello"
}
}
}
...
}{{ var:x.test }} {{ var:x.test2.test3 }}2 HelloIn your templates, you can use the contact properties. You can then use the syntax {{data:namedata:defaultvalue}} to print the value in your template.
These variables are useful to access information related to the sender, the recipient and the template. They also allow you to access URLs related to your message.
mj:contact represents the recipient of the current message (related to /contact resource of Mailjet API and recipient defined in the Send API call).
mj:contact.ID: Mailjet Contact IDmj:contact.email: Email address (local_part@domain)mj:contact.local_partmj:contact.domainmj:contact.name : Name of the contact
mj:sender represents the sender of the current message (related to /sender resource of Mailjet API and recipient defined in the Send API call).
mj:sender.ID: Mailjet Sender IDmj:sender.email: Email address (local_part@domain)mj:sender.local_partmj:sender.domainmj:sender.name: Name of the sender
mj:template represents the template used to generate this message (related to /template resource of Mailjet API).
mj:template.IDmj:template.namemj:template.copyright
mj:unsub_link: the unsubscription link in english (EN)mj:unsub_link_$lang: the unsubscription link in the specified language (ISO-639-1 formatted)mj:share_twitter: the Twitter link to share the online version of the newslettermj:share_google: the Google+ link to share the online version of the newslettermj:share_facebook: the Facebook link to share the online version of the newslettermj:share_linkedin: the LinkedIn link to share the online version of the newsletter
The segmentation formulas, that you create with /contactfilter, as described in the Segmentation section, can be used in the template. It helps to easily mutualise your Marketing Campaigns logic and transactional template logic.
- You can use either the Name or ID of the /contactfilter in the syntax
{{segment:nameORid}}to print the value in your template. - The segmentation variables are also available in condition statement but can't be used and combined with logical operators (AND, OR, NOT, etc).
<html>
<body>
{% if segment:nameSegment %}
<h1>Recipient {{mj:contact.email}} matches segment nameSegment</h1>
{% endif %}
</body>
</html>HasOpenedSince(number_of_days): return true if the contact has opened a message in the last number of days.HasClickedSince(number_of_days): return true if the contact has clicked on a link in a message in the last number of days.
Upper(string): Uppercase the stringLower(string): Lowercase the stringCapitalize(string): Capitalize the first letter of the string
Round(value, precision): round a value at precision decimalsInt(value): Return the integer part of a number
FormatNumberLocale(format, number, locale): allows you to specify the format of a floatFormat : a string parameter which accepts the following symbols: 0 (zero): represents a forced digit. This means that whether or not the digit is relevant to the value, it will be displayed # (hash) : represents an optional digit , (comma) : represents the thousands separator in the number being displayed . (dot) : represents the location of the decimal point in the number being displayedNumber: represents the numerical value you would like to format.- `Locale : a string parameter which defines the decimal point and the thousands separator.
Possible use cases: FormatNumber("#,###.00", 1000, "fr_FR"): 1 000,00
FormatNumber ("0.##", 0.666666, "en_GB"): 0.67FormatNumber(format,number) : replicates the behavior of FormatNumberLocale, but with default locale set to “en_US”, defining the decimal point as the . chararcter and the thousand separator as the , character.
Possible use cases: FormatNumber("#,###.00", 1000): 1,000.00 FormatNumber(".00",
0.99) => .99UrlEncode(string) : Encode a string for use in a URL Escape(html) : Encode html to be displayed as code in the message
if,else,elseif and endif allow you to insert conditional display of information in your template.
The if statements can be nested inside one another.
<html>
<body>
{% if data:age > 45 %}
<ul>
<li>{{data:age}}</li>
</ul>
{% endif %}
</body>
</html><html>
<body>
<ul>
<li>46</li>
</ul>
</body>
</html>
or
<html>
<body></body>
</html>{% if data:age >= 21 %} You can code, drink and vote! {% elseif data:age >= 18
%} You can't drink but hey, you still can code and vote! {% else %} A few more
years to wait !!! {% endif %}The conditional statement allows the usage of a default value for your variables. This can be helpful if you are not always passing all the variables in your Send API call.
You can specify a default value with the usual format var:name:default_value.
The behavior of the conditional statement will be as follow: (Table)
You can use the set function to assign value to a variable, directly in the template. You can then print the value or use it in conditional statements.
You can set values as string, integer, float, boolean, variable or contact data.
Printing value
Hello {% set yo-yo = "Benjamin" %} {{ yo-yo }} !Hello Benjamin!You can change the value of the variable anytime.
Hello {% set yo-yo = "Benjamin" %} {{ yo-yo }},
how is {% set yo-yo = "Jane" %} {{ yo-yo }} ?Hello Benjamin, how is Jane ?In conditional statement
Hello {% set yo-yo = 1 %}{% if yo-yo >= 1 %} Benjamin {% endif %} !Hello Benjamin!for in and endfor allows to insert an iteration on a JSON object or array in your template.
The syntax is:
{% for variable-name in name_space:json-source %}
html or/and nested statement
{% endfor %}On each iteration, the value of the current element from name_space:json-source is assigned to variable-name. variable-name can be used for display ( i.e. {{ variable-name }} ) or inside a nested statement.
JSON payload
{
"Vars":{"x":[1, true, "Pilot"]}
}or
{
"Vars":{"x":{"test1":1, "test2":true,"test3":"Pilot"}}
}Template The syntax is:
<html>
<body>
<ul>
{% for value in var:x %}
<li>{{value}}</li>
{% endfor %}
</ul>
</body>
</html>Template The syntax is:
<html>
<body>
<ul>
<li>1</li>
<li>true</li>
<li>Pilot</li>
</ul>
</body>
</html>The for statements can be nested inside one another. It allows to intersect multiple arrays or objects and manage multidimensional array.
{
"Vars":{ "rows" :[
{
"title":"title1",
"bodies":["1","2","3","4"]
},
{
"title":"title2",
"bodies":["5","6"]
}]
}
}Template The syntax is:
Hello {% for row in var:rows %} loop1:{{ row.title }} {% for body in row.bodies
%} loop2:{{ body }} {% endfor %} {% endfor %}The syntax is:
Hello
loop1:title1
loop2:1
loop2:2
loop2:3
loop2:4
loop1:title2
loop2:5
loop2:6{
"Vars":{
"array1":["1", "2"] ,
"array2":["3", "4"]
}
}Template The syntax is:
Hello {% for x3 in var:array1 %} loop1:{{ x3 }} {% for x4 in var:array2 %}
loop2:{{ x4 }} {% endfor %} {% endfor %}The syntax is:
Hello
loop1:1
loop2:3
loop2:4
loop1:2
loop2:3
loop2:4This section will show you how to leverage Mailjet's mark-up language MJML which helps you design responsive emails easily. You will be able to see how to leverage our Template language and create multifunctional template, similar to the one shown in Passport.
You can print the value for a variable by adding the template language syntax directly in the MJML part. For example:
The syntax is:
<mj-text
align="center"
color="#FFF"
font-size="13"
word-wrap="break-word"
font-family="Helvetica"
vertical-align="middle"
padding-left="25"
padding-right="25"
padding-bottom="10"
padding-top="10"
>
Dear {{data:firstName:""}},
</mj-text>When adding conditional statement or loop statement, you need to add the tags
The syntax is:
<mj-raw>{% if var:step == "confirmorder" %} </mj-raw>
<mj-section
background-color="#356cc7"
vertical-align="middle"
padding-bottom="5"
padding-top="0"
>
<mj-column vertical-align="middle" width="100%">
<mj-text
align="center"
color="#FFF"
font-size="13"
word-wrap="break-word"
font-family="Helvetica"
vertical-align="middle"
padding-left="25"
padding-right="25"
padding-bottom="10"
padding-top="10"
>
Thank you very much for your purchase.<br />
Please find the receipt below.
</mj-text>
</mj-column>
</mj-section>
<mj-raw> {% elseif var:step == "unavailable" %} </mj-raw>
<mj-section background-color="#356CC7" padding-bottom="0" padding-top="10">
<mj-text
align="center"
color="#FfF"
font-size="13"
word-wrap="break-word"
font-family="Helvetica"
vertical-align="middle"
padding-left="25"
padding-right="25"
padding-bottom="10"
padding-top="10"
>
We apologize, the product is out of stock.<br />
</mj-text>
</mj-section>
<mj-raw> {% endif %} </mj-raw>You can find the design of this template, along with many other ready-to-go template samples on the MJML website. You can use them as they are or take inspiration to create your own amazing template!