How to Create a Dynamic Email Template With Unlayer?

How to Create a Dynamic Email Template With Unlayer?

June 12, 2024   —  Comments

Samavia Malik

Samavia Malik

Dynamic email content adapts based on your target audience’s interests, site activity, location, age, gender, etc., ensuring that each of your recipients receives relevant information. 

This level of personalization not only increases email engagement but also improves conversion rates. 

In this article, we will explore how to create dynamic email templates using Unlayer, a powerful email design tool. 

Before we dive into the specifics, let's understand the importance of dynamic email content and how it can benefit your email marketing strategy.

3 Key Benefits of Dynamic Email Content

As mentioned above, dynamic email content tailors messages for each contact, improving customer experience by customizing emails based on location, purchase history, and interests. 

This approach saves time by eliminating the need for separate email campaigns and boosts engagement by delivering relevant content, leading to higher click-through rates and customer retention.

8 Easy Steps to Create a Dynamic Email Template With Unlayer

Step 1 - Login to Unlayer

Log in to your Unlayer account or sign up if you're a new user.

Step 2 - Start a new email

Once logged in, click on the "New Email" button to start creating a new email template.

Step 3 - Choose a template

Select an email template from the available options that best suits your email campaign needs. If you prefer to start from scratch, you can choose a blank template.

Step 4 - Customize your template

Use Unlayer's drag-and-drop editor to customize your template. Add text, images, Call-to-Action (CTA) buttons, and other elements by dragging them from the sidebar to your email canvas.

Step 5 - Add dynamic content

To add dynamic content, such as personalized greetings or product recommendations, use Unlayer's dynamic content feature. This allows you to insert placeholders that will be automatically filled with the relevant information when the email is sent.

Keep in mind that dynamic content is only for Unlayer Embed; while for Unlayer Studio you can only use merge tags. You can initialize them yourself by going to the Dashboard > Settings.

👉🏽 Add merge tags

Merge tags let you add dynamic content to your emails. You can insert these in your template simply by clicking the "Merge Tags" button in the text editor. Merge tags work with any templating engine.

This is how it looks like:

Merge tags.

There are three different types of merge tags.

Basic merge tags

There are two ways to add merge tags in Unlayer:

1. During initialization:
Code for initializing merge tags within Unlayer’s editor.
2. After initialization:
Code after the initialization of merge tags within Unlayer’s editor.

Grouped merge tags

You can also group merge tags within a sub-menu to add a shipping address.

Code for Unlayer’s grouped merge tags.

Smart merge tags

With its human-friendly nature, you’ll be able to 

  • Easily identify merge tags within the highlighted field

  • See human-friendly names like "Customer Name" instead of code

Unlayer’s editor showing where to enter “Customer Name”.
  • Select, replace, and style merge tags with one click

This feature is on by default but can be turned off like this:

Code for turning off Unlayer’s smart merge tags.

👉🏽 Use design tags

Design tags are customizable display variables in a template that change based on who's using the editor. Customize them to reflect the dynamic content you want to display.

Let’s explain this with an example

In an email template, "Welcome to [[business_name]]" can dynamically display "Welcome to Tesla Inc." if Elon Musk is using the editor. 

In your template, you’ll see something like this:

Example of Unlayer’s design tags.

However, when the Unlayer editor opens and the template loads, you will see this:

Example of Unlayer’s design tags.
How to initialize?

This is how to pass the design tags when you initialize the Unlayer editor:

Code for initializing Unlayer’s design tags.
Images or links

When using design tags to pass URLs for images or links, ensure they are HTML-safe by adding an extra curly bracket. For instance:

Visual representation of how to add curly brackets for HTML-safe images.

👉🏽 Set display conditions

"Display Conditions" lets you add parameters that change the content based on the audience. You can customize the conditions to specify when and how the content should change.

How to get started?

You can start off by initializing the email editor like this:

Code for initializing Unlayer’s display conditions.

Then, you can enable this feature by just passing the conditions in the following snippet:

Code for passing Unlayer’s display conditions feature. 

This process involves adding the conditions to your HTML template, which will then be processed through your templating engine to implement those conditions within your final version of the HTML template.

Let’s explain this with an example

Suppose you're using a template to advertise a sale for an e-commerce business. There are individual rows for men, women, and kids categories. To target your audience specifically, you can render content based on the email recipients using display conditions.

Visual rendering of Unlayer’s drag and drop editor

Here's how you can set display conditions for your template using the editor. Click on the row you want to apply the display condition to, and you'll see the following options on the side panel.

Image of Unlayer’s editor to set display conditions.

After clicking on “Add Display Condition,” you’ll be able to see the following:

Image of Unlayer’s editor when you have to select a display condition.

You can set the display conditions here. Once done, you can preview your email template to see how it works.

👉🏽 Add dynamic images

Dynamic images personalize each recipient's experience using subscriber data from your email service provider

These images vary based on merge tags passed to the delivery system. Examples include personalized cards, countdown timers, live ads, flight trackers, live charts, and product recommendations.

Let’s explain this with an example

For instance, you can send personalized birthday cards to thousands of subscribers, each with the recipient's first name.

It’s simple to do with dynamic images. All you have to do is use any service or API like Nifty Images and insert the text of your choice via merge tags.

You don't need anything to initialize the dynamic images; you can just type a merge tag inside an image URL like this:

www.google.com/name={{first\_name}}

Inserting merge tag into images via dynamic images.

Step 6 - Preview your email

Before finalizing your dynamic email template, preview it to see how it will appear to your recipients. Make any necessary adjustments to ensure it looks perfect.

Step 7 - Save your template

Once you're satisfied with your template, save it so you can use it for future email campaigns.

Step 8 - Export or send your email

Once your template is saved, you can export it to your email service provider or send it directly from Unlayer, as it seamlessly integrates with several ESPs.

To Wrap It All Up

Mastering how to create a dynamic email template with Unlayer can significantly enhance your email marketing strategy.

By utilizing its intuitive drag-and-drop editor, advanced design tags, and dynamic content capabilities, you can tailor your emails to resonate with your audience on a personal level.

This not only improves engagement but also drives better results for your email marketing efforts.

More from the Blog