This article will walk you through using MJML to easily design responsive email. We’ll talk you through how an MJML email is structured and how you can easily add in your own design if needed.
MJML Structure
An MJML email has a particular structure and this structure is made up of MJML tags. These tags allow you to split the email into different parts and add content into each of these. Every MJML email starts with the opening tag <mjml> and then you have the main body tag <body>.
Once you have those first two tags, you can now split the email into sections and columns. You can split your section into columns with the <mj-column> tag and within the column tag you'll be able to add sub-tags such as text, images and buttons etc.
The below is a simple example of an MJML email:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text> This is some simple text</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
As you can see from the above, we have the 2 opening MJML tags, followed by the section and the column. We have also added a text tag within the column. You must also close each tag by adding a backslash / to each tag in the opposite order that they were added.
In the example above, the first 5 tags are all opening that function, once we have added in the text, you now have to close each of those 5 tags by adding in the backslash /.
Adding extra elements
Text
To add in text to any of your email, you can simply use the <mj-text> tag. You would need to add text into a column within your email so once you open your <mj-column> tag, you can now go ahead and add your text tag.
You can also add additional styling to the text by adding some styling within the first <mj-text> tag, something like the below:
<mj-text align="left" font-size="20px">Welcome to our Theatre</mj-text>
This bit of text within the email will now be justified to the left and will have a size of 20. There is much more styling you can add such as colour, font-family, line-height etc.. For a list of all the possible styling check out MJML’s own documentation.
If you add text within the text tags, that will appear in the email as a paragraph. If you would like to add line breaks or new paragraphs into the email, we suggest simply adding another text tag under what you have just created. And example of an email with multiple paragraphs can be seen below:
<mj-text align="left" font-size="20px">Welcome to Liverpool's Royal Court</mj-text>
<mj-text align="left">Dear {{ customer.first_name }}</mj-text>
<mj-text>Thank you for buying tickets for Show Name, we're looking forward to seeing you and hope you enjoy the show.</mj-text>
<mj-text>As a first-time booker, we want you to feel as welcome as possible here at The Court.</mj-text>
<mj-text>The first thing we want to do is offer you a 20% discount on your first round of drinks in The Courtyard Bar and Kitchen next door to the theatre.</mj-text>
As you can see from the above, we have simply added a new <mj-text> tag for each new paragraph. We open the tag, add in the text and close the tag, hit enter to create a new line and open the tag again.
Line Breaks
Use only <br and not </br>. So <strong>Important Information</strong><br>This is how you get here will give you:
Important Information
This is how you get here.
If any MJML code has "/br" in it then the code won't work.
Images
Like the text tags, images need to be inside of a <mj-column> tag. The image tag is simply <mj-image> followed by whatever styling you want to add to that image. The example below is an example from Liverpool’s Royal Court:
And below is the MJML code used:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="600px" src="https://dc40ra2rfm3rp.cloudfront.net/as-assets/nbah0t261l3h02pwujglhicnyq0w" />
</mj-column>
</mj-section>
</mj-body>
</mjml>
We have added the width to the image by adding width=”600px” which stands for 600 pixels wide as this is the width of the main email container. You can add smaller images by adjusting the pixel size for example, if you wanted to add a small icon, you could add the image tag followed by the size of around 150px and you can centralise that image.
We have then added the source of the image, this basically means the URL of where the image has been uploaded online (to get a URL you can upload the image to your Ticketsolve account, like you do with images for ticket templates). As with the text tag, you can also add additional styling to the image such as add alt text, add a border, add a link and much more. These additional styling elements can be found on the MJML documentation website.
Hyperlinks
It is important to add links to emails that link back to your website. By adding links in, you are trying to drive engagement from the customers. Adding links into the MJML email can be done by using the <a> tag:
<mj-text>Our aim is for theatre to be accessible for all, you can discover some of the access we offer including accessible seating, audio description and captioning on our <a href="https://liverpoolsroyalcourt.com/your-visit/access/?utm_source=first_time_email&utm_medium=email&utm_campaign=first_time_customer_automation">Access</a> page.</mj-text>
In the example above, we have added a text tag that contains text about how accessible the venue is. Within this text tag, we then added a link to the word Access. So to add a link you would add:
<a href="https://yourwebsite.com">Access</a>
In summary, you open the <a tag, add your website using the href= following by >, add the text that you want the link to be clickable on and than close the a tag </a>.
Ticketsolve Tip
We would highly recommend using Google URL Builder to add tracking UTM’s to the URL so that you can track engagement in GA4.
Buttons
Any good email that wants to drive engagement should include button CTA’s. Adding these buttons into your MJML emails is easy to do and as you guessed it, you just need to use the <mj-button> tag. See below an example of the button tag that you will need to add in:
<mj-button background-color="#f45e43" color="white" href="https://yourwebsite.com">
Click Me!
</mj-button>
As with the other tags we have spoken about previously, the button tag will sit within the column tag and you just add it as another line within your email. As you can see above, you open the <mj-button tag and add your button colour and the text colour and add the link in the href attribute. You then add your text that will appear in the button and finally close the tag using </mj-button>.
Extra code examples
IF statement for fulfilment options in Checkout Mailer
{% if show_print_order_link %}
{{checkin_qr_code_list_html}}
{{ print_order_link }}
{% endif %}
Address and contact details footer
<mj-section>
<mj-column>
<mj-text align="center" font-size="12px">
My venue address, town, postcode
</mj-text>
<mj-text align="center" font-size="12px">
Phone: 1234
</mj-text>
<mj-text align="center" font-size="12px">
Email: myvenue@myvenue.com
</mj-text>
</mj-column>
</mj-section>
Clickable button to go in "email_note" setting
<p style="text-align:center;">Centre aligned text above a button with white text and background colour: #ed1882.</p>
<p style="text-align:center;"><a style="background-color:#ed1882;border-collapse:separate !important;border-radius:6px;color:#FFFFFF;display:inline-block;line-height:0%;margin-bottom:0;margin-right:auto;margin-top:0;padding:20px;text-align:center;text-decoration:none;vertical-align:middle;" target="_blank" rel="noopener noreferrer" href="https://www.ticketsolve.com/">Button Text</a></p>
Comments
Please sign in to leave a comment.