Simplifying The Complex: The Basics Of Transactional Email Dynamic Content

Dyspatch is an email production platform that helps Enterprise organizations create and change transactional and triggered emails faster.

There’s no getting around the fact that transactional emails are complicated. Unlike a web page, where you can usually count the number of browsers you need to support on one hand, coding any kind of email can be a nightmare when you consider the vast array of email clients and devices that have to be taken into account. But add to that the complexity of coding dynamic content, specific to each customer and each transaction, and it becomes clear that transactional emails can be very, very hard. 

Simplifying that complexity can be easier than you think. Too often developers and designers believe any process that makes creating transactional emails quick and easy comes at the expense of the dynamic content essential to personalized email. It doesn’t have to be that way. Instead of coding HTML emails from scratch, a template-based process using a templating language that allows for powerful customization makes creating (or updating) transactional emails both fast and easy.

A good place to start is with an understanding of the basic coding elements that go into a typical transactional email. There are many different email templating languages to choose from, including Django (Python), Twig (PHP), and Nunjucks (JavaScript), among others. But we’ll use Jinja here, for illustration purposes, and a great email example from Sephora.

Variable Replacement

Variable replacement is used to insert user-specific content into an email. At the bare minimum, you should be addressing the customer by name, i.e.:

<p> Hi {{ first_name }} {{ last_name }},</p>

Including the customer’s name is just good manners. But it’s also a good way to avoid having your transactional messages end up in the Promotions folder of the customer’s Inbox. 

Variable replacement is also used to transmit more sensitive information to a user, things like password reset links and multi-factor authentication (MFA) tokens. 

The Sephora email receipt we’re using as an example starts out with variable replacements for the customer’s name and the purchase date:

<p>Hi {{ first_name }}, here’s the receipt from your visit on {{ purchase_date }}</p>

Loops

Loops, or iteration, are similarly used to display user-specific data points but typically more than one and in a ‘loop’, which essentially means on repeat, as many times as necessary, rather than one at a time the way a simple variable replacement does. A good example is an order confirmation/receipt, where the data points are the item details (product, price, quantity, etc.) and where the number of items can be virtually unlimited. 

Here’s a simple example using just item name and price.

{% for item in items %} <span>{{ item.name }} - ${{ item.price }}</span> {% endfor %}

And here’s a rendered example:

<span>Hair clips – $4.99</span> <span>Duotang – $2.99</span> <span>Shirt – $12.99</span>

The input string can also include additional details, such as {{ item.image }}, {{ item.quantity }}, or {{ item.description }}.

Iteration can also be used to send customers’ ‘saved searches’, such as a list of real estate listings or a list of favorited vacation packages from recent searches.

The ‘Transaction Details’ section of Sephora’s email is a combination of a loop (for the item list) and variable replacement (for subtotal, taxes, and total).

Here’s the loop to display the items purchased (note the HTML output is simplified here for illustration purposes):

Plus variable replacement for subtotal, taxes, and total:

Conditionals

Conditionals are used to display alternative or additional content to a customer based on a set of variables. A couple of simple examples might include:

• Showing a specific offer on a user’s birthday:

{% if is_birthday %} <p>Happy Birthday! Use the coupon code BIRTHDAY10 to receive 10% off your next order.</p> {% endif %}

• Showing a specific upsell offer b

• ased on a user’s original purchase:

{% if subscription_plan == “standard” %} <p>Upgrade to Unlimited today and receive 20% off your first month.</p> {% endif %}

Conditionals can be used in A/x testing to display different content to different audiences, to determine which offers perform better. 

In Sephora’s case, they use a conditional to display a dynamic offer that either promotes their loyalty program or their customer survey:

Here’s the conditional to display the birthday gift offer:

If loyalty member status is “true”, then the ‘else’ option is displayed:

This list is far from exhaustive, but it covers the most common elements of great transactional email. If you find a templating language that fits your requirements and master the basics of variable replacement, loops, and conditionals, you’ll be well on your way to simplifying the complexity of creating and updating these business-critical communications.

An email production platform like Dyspatch can help you create great emails, with smart, dynamic content, fast. Dyspatch combined with Mailgun’s powerful sending infrastructure will allow you to ensure every customer receives the right email at the right time.