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

Passing Design Tags

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

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

Common Use Cases

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