How to code an email receipt template with MJML

We are developers, like you. And what we hate above all in coding is to repeat ourselves. So when it comes to writing email templates, we want to provide our users with the best tools to produce content in the most efficient way possible, whether you want to know how to code an e-receipt or just update your welcome emails.

To speed up the development of responsive emails, we’ve already told you about MJML, the open-source email framework we’ve created. If you’re not familiar with it, go check it out right away. You can thank us later.

But even if MJML can help you save quite a lot of time and ease the process, you’ll probably want more. We hear you.

Today, flexibility and personalization are a must-have in the email industry. Transactional emails imply more and more complex business logic, and one can often struggle to try to juggle a lot of different templates, when they could just have one personalized email that adapts to several use cases.

Having a separate template for men and another one for women, or creating specific campaigns to recommend different things based on your customer’s previous purchases is not viable. It is in this kind of situations that a templating language comes in handy.

OK, let’s be a bit naive and accept that you could write your own. But to be able to implement a tokenizer and a grammar, you need to have a good knowledge in the field and, at the end of the day, you might just be reinventing the wheel when you could have been focusing on your core business instead…

You could instead use nice libraries such as Handlebars, Jinja or Twig, but then you’ll still need to write or host a dedicated service to handle the templating processing.

We have the solution. Because at Mailjet we know the value of a fully integrated templating language, we created our own templating language with our Transactional Send API in mind. Our idea: one template to rule them all, just with a single API call.

So, let’s recap: MJML for producing responsive HTML emails without effort, plus a templating language to bring them to life with conditional blocks and variables.

This combo can change your life as a developer. But, enough words, you’ll definitely want some action. So we’ve decided to show you how to create and send awesome transactional emails, step by step.

We’re rolling out a series of tutorials, all of which will explore a very common use-case, providing numerous examples, code snippets and nice visuals. We’ve even created an easy-to-execute tool, written with NodeJS, to test emails under actual conditions. To use it, you’ll just need valid credentials for both MJML API and Mailjet Transactional Send API, but don’t worry if you’re a newcomer: applying for the MJML API beta and creating a Mailjet account are totally free.

Our “How To Code” series has four parts. Check them out now:

• How To Code A Receipt Email Template
• How To Code A Welcome Email
• How To Code An Abandoned Cart Email
• How To Code A Digest Email

From online shoe stores to indie music platforms, any company selling a product online will have to send a receipt. You may think this is a simple task but, actually, there are several elements you’ll need to consider.

Let’s review them briefly, before jumping over to our tutorial, from the more obvious ones to the less:

1. You will have to loop over the list of items (cart, abandoned cart, recommendations, etc.) and display them.
2. You need to display the price and may have to do some calculus directly in the email logic (Total, VAT and other taxes). Be careful, as you may use different currencies!
3. You need to include some basic billing information (billing address, order number, etc.), but you can also provide more personalized information (for instance, you could warn your users that their registered credit card is about to expire).
4. If there’s shipping, you should display the delivery address.
5. Your user may have to forward the e-receipt for accounting purposes, so you should ease this workflow.
6. You can insert marketing content to your receipt, such as a history of previous items or new promotions based on what your user just bought.
7. If your website supports multiple languages, your emails should too.

Sounds like something you’re already doing? Or are you not sure how to implement some of these elements?

Worry not, we’ll tackle all these needs, and more, in our dedicated Github tutorial for coding email receipt templates with MJML.

On our Github tutorial you’ll find:

• Detailed explanations.
• Code samples to implement and adapt.
• Examples of a receipt email and its different parts.

Ready to see it in action?

Time to jump over to Github.

Author: Emmanuel Boisgontier Emmanuel Boisgontier was a Customer Solutions Engineer at Sinch Mailjet. He worked with internal teams and customers to expand the Mailjet app and managed the development of our technical documentation. In the blog, Emmanuel writes about all things API.