Design Tags

Design tags are customizable display variables in a template that can change based on who's using the editor. For example, you have an email template that you want to personalize for each user who edits it and say "Welcome to My Business" where My Business will be the business name.

Design tags work with double square brackets [[ var ]] only. You can make it HTML safe by adding an additional curly bracket [[{ var }]].

📘

Exported Design

The final design that is exported does not have the variables but the replacement that the end-user sees.

Example Case

Let's say Tesla Inc is your customer and Elon Musk is using the editor in your application. In your template, you will have something like this:

Welcome to [[business_name]].

Yours Truly,
[[current_user_name]]

When the Unlayer editor opens and the template is loaded, he will see:

Welcome to Tesla inc.

Yours Truly,
Elon Musk

Images or Links

If you are using design tags to pass URLs for images or links, make sure to make it HTML safe by adding an additional curly bracket. For example:

[[{business_logo}]]

Passing Design Tags

You can pass design tags when you initialize the Unlayer editor.

unlayer.init({
  designTags: {
    business_name: "Tesla Inc",
    current_user_name: "Elon Musk"
  }
});

Changing Delimiter

You can change the delimiter for design tags if [[ ]] does not work for you.

unlayer.init({
  designTagsConfig: {
    delimiter: ['[[', ']]']
  }
});

Common Use Cases

• Personalized Business Name
• Personalized Business Logo
• Custom Footer Text
• Custom Unsubscribe Link