How To Code A Welcome Email With MJML

You already know we’re working on a series of tutorials to show you how to create and send awesome transactional emails step by step, using MJML, our open-source email framework, and Mailjet’s templating language. Each tutorial covers a very common use-case, providing a large set of examples, code snippets, and nice visuals.

Today, we’re going to see how to implement an efficient welcome email. Here’s what you’ll find in this post.

 

A templating language for your transactional emails

You already know that 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.

Even if you could potentially write your own, to be able to implement a tokenizer and a grammar, you’d need to have a good knowledge in the field and might end up 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.

Mailjet’s Templating Language

At Mailjet, we know the value of a fully integrated templating language, which is why 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. That’s why we’ve decided to show you how to create and send awesome transactional emails, step by step.

 

The “How to code” tutorial: what you need to know

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 welcome email: Quick Introduction

We know you are an email veteran, and the double opt-in has no more secrets for you. So, during the signup process, you asked your user to confirm their email address. This verification step is now over. You can open yet another bottle of champagne, you have one true new user interested in your product. Congratulations.

But then you start to wonder. It could be that users browse your website right now, or come back later. And you know people. Chances are, they’ll have other things to do, they’ll forget and never come back. So you need to grab their attention again. Why not use the valid email address they offered you willingly?

Welcome emails are indeed a powerful way to communicate because users are expecting them. When you enter a store as a consumer, you expect friendly greetings, useful information or good advice. While this behavior is common for most customers, that doesn’t imply they’re all the same. It is important to take your user’s tastes or habits into account, in order to create relevant messages. We can see you starting to panic: how many templates would you have to write?

Don’t freak out! Leveraging the power of our templating language, we will show you how to create a customized welcome series, using only a single template. In this tutorial, we will show you how to:

  1. Create blocks that display different elements according to your user data (location, gender… think segmentation!).
  2. Set a templating language variable and leverage it to display personalized data.
  3. Use templating language functions to transform text.

Example: welcome email

 

How to code a welcome email template: Over to Github!

Looking for some extra help in coding your welcome emails? You’re in the right place. We’ll tackle all the points above, and more, in our dedicated Github tutorial for coding welcome email templates with MJML.

Our Github tutorial includes:

  • Clear explanations.
  • Code samples you can use while working on your welcome emails.
  • Examples of a welcome emails and its different parts.

Ready to start writing an awesome welcome email template?

Time to jump over to Github.

Jump over to our Github tutorial for welcome emails!


We’ve also created an easy-to-execute tool written with NodeJS to test emails under real 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 to join the MJML API beta and creating a Mailjet account are totally free.

Want to say “hi” to the team? Come and chat with us on Twitter.

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.

 

A templating language for your transactional emails

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.

Mailjet’s Templating Language

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.

 

The “How to code” tutorial: what you need to know

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: Quick Introduction

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.

Preview of the receipt email template

 

How to code a receipt email template: Over to Github!

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.

Github tutorial: How to code a receipt email

 

Send API 3.1 Reaches General Availability

We gave you a sneak peek a couple of months ago, but now we’re finally here. The time has come to say goodbye to our beloved Send API version 3, and unveil our most improved version,  v3.1!

Over the past three years, our Send API has been doing a great job at routing all your transactional emails, and thanks to your valuable feedback, we’re now ready to introduce its latest version, which is here to make your sending experience even better.

Ladies and gentlemen, after months of hard work and many valuable lessons learned from our developers community during its beta, Send API 3.1 is ready to become our official and stable version. Cue applause.

Don’t worry, we’ll continue to support Send API 3.0, but we’re sure you’re going to love v3.1!

 

So, why did we decide it was time for a new version?

Let’s be honest, no matter how much we enjoy finding hacks and workarounds, there’s not a developer out there that wouldn’t prefer a pain-free experience while at work. And yes, we know how painful API calls can get, especially when you combine little to no documentation with erratic behaviors, obscure input, response payloads…

So, to make your life easier and your work more manageable, we decided to focus on providing our users with a seamless Send API onboarding journey. We provide you with a complete documentation made by developers for developers, and meaningful payloads to offer a smooth experience.

And to make this new version even more advanced, with a real focus on performance and scalability, we decided to rebuild it entirely from scratch, moving away from our previous code in Free Pascal and opting for a new tech stack based on Golang, Cassandra and Kafka, to name a few. Sounds good, right?

 

Awesome! Show me the code, please?

The first thing you’ll notice is how much the onboarding user experience has improved in this new version. Want to see it in action? Check them out here:

Sending messages

Whether you’re sending one or more messages, it will be as simple as making a single HTTP call on the /v3.1/send endpoint. Send API will accept a JSON payload with a single Messages array property containing up to 100 messages. Clear and easy, isn’t it?

New detailed error and success payloads

Thanks to the feedback we received from our community, we decided it was time for a drastic improvement on our response payloads. We now perform strict checks on all your input payload, which means you’ll receive synchronous feedback about what went wrong, in order to cut down your debugging time. On our side, this also means a reduced number of malformed emails entering our system. Check out this example of an error payload.

Something worth noting is that these errors are generated for each message independently, and only the sending process of the failing messages will be blocked.

Our success reporting is also more detailed than it used to be. Success payloads provide, for instance, a MessageHref property, a URL that points to the API endpoint on which to retrieve the message metadata. Tracking your emails straight from the sending has never been easier.

Both success and error payloads are now sent together, in the same order followed by the input payload messages, to make checking the fail or pass status of your messages much easier.

URL Tagging

Sending emails fast, at scale is one side of the business, but being able to monitor how much they perform is critical. Our mission is to offer you all the tools you need to be able to achieve this. Thanks to Send API v3.1, you can now provide us with the proper tracking markers and we’ll make sure all the links your emails contain are properly tagged and report back to you.

 

Sandbox mode

Sending emails for development purposes comes with a cost (yeah, they still count towards your plan’s email quota), and you’re never fully protected from delivering undesired emails to your customers. Whether you’re experimenting with the API for the first time or just checking your code, there might be times when you’d like to test an email payload without having to send a real email. To make your life easier as a developer, we’ve incorporated a brand new sandbox mode. In your input payload, set SandboxMode to true. This will tell the Send API to process your messages as if you wanted to send them, without actually sending them, so you can properly test and troubleshoot your message easily!

Introducing New Mailjet API Guides

If you’ve recently visited our Developers Hub, you may have noticed that the API guides section looks different!

We’ve recently revamped our guides to help you, the developer community, deliver email quicker than ever. It’s been a very intense project for us, putting together the most important information about our API and writing/testing all the code samples, but we’re excited to see it make your email experience smoother.

In a nutshell, this documentation now features ready-to-use API sample codes in various languages (curl, PHP, NodeJS, Ruby, Python and Go. – Java and C# to come soon!). This new 3 column-layout helps you easily navigate through the content, the powerful search engine also helps you find what you are looking for in seconds.

We decided to build it using Slate, a powerful documentation generator, initially developed by TripIt, now open source on Github and inspired from the best API documentation, like the ones of Stripe or Braintree. Since Slate is entirely based on Markdown documents, it enables us to also open our API guides on Github so that you can easily share feedback with us and directly contribute to it, the same way you would with other open source projects.

 

ow3HpY-wjkBYBhGCMVkoH6bnG6BcwOemDfxYmB0psXs
 

We’re very proud of releasing this new documentation and hope you’ll love it as much as we do here at Mailjet!

In the coming weeks, we’ll be writing more about the behind-the-scenes process on how we’ve built the documentation and what we have learned in that process. If you’re in Paris this Thursday, join us for the next Paris API meetup where Arnaud Breton, our Head of Developers Relations will share the story behind the documentation.

Give the new documentation a read and let us know what you think, or any questions you have, in the comments below!

Pssst: We’ve also launched a new Twitter account just for devs. Join us there to follow along at hackathons, for Mailjet API updates and other developers stories!