Shooting mails through mailgun 🔫

Gone were the days we relied on snail mail to deliver our correspondence. In the fast-paced world of business and communication, efficiency is key. One area where efficiency can greatly enhance productivity is email communication. By using well designed and personalized email templates we can establish the business brand and rapport to the users. Combining these templates with email delivery service can streamline the email correspondence and create a dynamic message with ease. In this article we will explore creating email templates using handlebars in line with Mailgun as transactional email API.

Email templates are pre-designed email messages that can be customized, to create a reusable email for various purposes. They are an invaluable resource for businesses who frequently send similar emails, such as welcome messages, newsletters, and confirmations. Instead of creating email from scratch each time, we reuse email templates to save time and maintain a consistent brand image.

Handlebars, on the other hand, is a lightweight templating language that simplifies the process of generating dynamic HTML content which can be used for emails. Handlebars uses a simple syntax, denoted by double curly braces {{ }}, to inject a variable and conditionals in the template. This means we can set the value for these variables and generate a personalized email, without manually editing each email. Handlebars is designed to have little to no logic, which gives more freedom in designing and customizing each template without being affected by the business logic.

Handlebars (.hbs) files basically still looks like a simple HTML file with a couple of curly braces. These braces have different usage but mostly for injecting variables, helpers, creating conditionals, iterating/looping through an array.

Variables:

We can insert variables from your data into your template by enclosing the variable with double curly braces {{ }}.

Email template:

Pass the following data to the template:

Will generate an output as below:

We can also use nested objects as data into your template and look into the properties using dot-separated paths.

Email template:

Pass the following data to the template:

Will generate an output as below:

Conditionals:

Handlebars has built in `if`and `unless` helpers for evaluating conditionals.Helpers are predefined functions that can be called inside the handlebars template. Helpers are called with {{#helper}} and called in the end with {{/helper}}.

In this example first, the object (trafficLight) has it’s property (isGreen) evaluated if it holds a truthy value. If so, the helper will return `GO!`, if not it will check for the next condition which is the property (isYellow). If isYellow is truthy then it will return `Slow down…` but if it turns out to be false, it will fallback to the else condition which will return `STOP!`.

Using `unless` helper is similar to `if` but operates as the opposite and checks the value to be false.

Iteration:

Sometimes we will be dealing with an array in our data and we need to loop around it, here we can use `each` helper that will iterate through the array one by one. Note: when looping through an array you can call the properties directly while inside the `each` block, however when calling through the parent’s property we need to use `../` to escape out of the array’s context.

Email template:

Pass the following data to the template:

Will generate an output as below:

There are other handlebars features like custom helpers which help you create a more complex function to suit your needs if the built in ones isn’t enough. Another feature is partials which are handlebars templates that can be imported inside other handlebars templates, which is helpful for components which are present in different templates. However this article won’t dive into this as these features are not present in the Mailgun which causes some problems to arise which the article will discuss instead.

In our project we are working with a big ecommerce platform that caters to several countries by having slightly different content and translation for each country to suit the needs of their users. This requires us to create multiple versions of every template so we can separate the templates for each country. However mailgun has a hard limit for 100 email templates only so we have no choice but to come up with a single version of template using the conditionals.

Working through the merged version, we want to add a variable `country` which we can use to evaluate to conditionally show the contents. However since `if` and `unless` can only evaluate if the variable has truthy value but not string comparison, another solution is to create a custom helper for string comparison but custom helper is not possible in mailgun. So we initially decided to create the `country` as an object with properties named after the countries that have a truthful value for the current country.

This one is a working solution however upon reading through the Mailgun documentation, we found out there is an extra built-in helper they created for string comparison which is `equal`. So instead we updated the conditionals and used this existing `equal` helper. However we cannot use the `else` condition inside the `equal` helper so we have to add it in every country that the content should be present. Now we can make the country variable as string again.

Aside from this problem, developing with handlebar.js and email gun template seems to be simple and easy if you understand how to use the built-in helpers. Since it is built to be logicless, the development mostly was focused on styling and creating the content. It will be much easier if the Partial feature is included in the mailgun because changes in content that is used in multiple templates needs manual changes per template.

Overall the development using handlebars and mailgun is smooth, because mailgun has a preview for your template and you can mock the test data and send it to your email to check it is compatible with other email platforms and design. It also tracks the emails sent in the logs for easier debugging and testing.