MJML Step by Step

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

Printing a variable

You can print the value for a variable by adding the template language syntax directly in the MJML part. For example:

1
2
3
4
5
6
7
<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 <mj-raw> </mj-raw> before opening bracket and after the closing bracket. For example:

For conditional statements:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>

For loop statements

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<mj-raw> {% for purchase in var:product %} </mj-raw>
   <mj-section background-color="#356CC7" padding-bottom="1"
     padding-top="1">
   <mj-divider border-color="#ffffff" border-width="2px"
     border-style="solid"
     vertical-align="bottom" padding-left="0" padding-right="0"
     padding-bottom="0" padding-top="0">
    </mj-divider>
    </mj-section>
   <mj-section background-color="#356CC7" padding-bottom="1"
     padding-top="1">
   <mj-column>
   <mj-text align="center" color="#FFF" font-size="15px"
     word-wrap="break-word"
     font-family="Ubuntu, Helvetica, Arial, sans-serif"
     padding-left="25" padding-right="25" 
     padding-bottom="0" padding-top="10">
     <strong>{{purchase.number}}</strong>
    </mj-text>
    </mj-column>
<mj-raw> {% endfor%} </mj-raw>

End result

Finally, our flexible template will look like this:

mjml_template.png

Additional sources

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!