Design Tags

Design Tags are customizable placeholders that allow you to personalize email or page templates dynamically during the editing process. Unlike Merge Tags, which replace content when an email is sent, design tags only appear within the builder when the template is being edited by users.

For example, you can use design tags to display a personalized message like “Welcome to My Business,” where My Business dynamically changes based on the business name of the user editing the template.

📘

Exported Design

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

Key Features

• Customization in the Builder: Design tags allow for personalized content in the template when it’s being edited in the builder.
• HTML-Safe Tags: Use HTML-safe tags to prevent breaking the layout or introducing errors in the template.
• Flexible Delimiters: You can customize the tag delimiters to suit your specific syntax requirements.

How Design Tags Work

Design tags are defined using double square brackets [[ var ]]. These tags are replaced with dynamic content while the template is being edited in the builder. For example, the tag [[ business_name ]] could be replaced with the value “Tesla Inc” while editing.

To ensure tags are HTML-safe (i.e., to escape special characters or preserve formatting), you can use an additional curly bracket: [[{ var }]]. This is especially important when passing URLs for images or links, ensuring they are safely inserted into the HTML.

Initializing the Builder with Design Tags

You can pass design tags as part of the unlayer.init() function when initializing the builder. Design tags are defined as key-value pairs, where the key represents the variable in the template, and the value is the dynamic content that will be displayed in place of the tag.

Example: Passing Design Tags During Initialization

unlayer.init({
  designTags: {
    business_name: "Tesla Inc",
    current_user_name: "Elon Musk",
    business_logo_url: "https://example.com/logo.png",
    unsubscribe_link: "https://example.com/unsubscribe"
  }
});

In this example:

• The design tag [[ business_name ]] will be replaced with “Tesla Inc.”
• The design tag [[ current_user_name ]] will be replaced with “Elon Musk.”
• The design tag [[{ business_logo_url }]] will be replaced with the URL for the business logo.
• The design tag [[{ unsubscribe_link }]] will be replaced with the unsubscribe link URL.

Updating Design Tags Dynamically

You can also update design tags dynamically at any point after the builder has been initialized by using the unlayer.setDesignTags() method. This is useful when you want to update tags based on user actions or changes in real-time.

Example: Updating Design Tags Dynamically

unlayer.setDesignTags({
  business_name: "SpaceX",
  current_user_name: "John Doe"
});

In this example:

• The design tag [[ business_name ]] is updated to “SpaceX.”
• The design tag [[ current_user_name ]] is updated to “John Doe.”

If your template contains the following:

Welcome to [[business_name]].

Yours Truly,
[[current_user_name]]

When editing the template in the builder, it will display:

Welcome to Tesla inc.

Yours Truly,
Elon Musk

HTML-Safe Design Tags

To make the content HTML-safe and avoid issues with rendering dynamic content in the editor, you can use triple curly brackets in the tag: [[{ var }]]. You must do this if you are passing URLs for images or links.

Example: HTML-Safe Design Tags

[[{ business_logo }]]

In this case, the value for [[{ business_name }]] will be displayed as “Tesla Inc,” and any special characters in the value will be safely rendered in the HTML.

Customizing Delimiters

If the default delimiter [[ ]] conflicts with your template or is not suitable for your syntax, you can customize the delimiters used for design tags.

unlayer.init({
  designTagsConfig: {
    delimiter: ['((', '))']  // Change delimiters to (( ))
  },
  designTags: {
    business_name: "Tesla Inc",
    current_user_name: "Elon Musk"
  }
});

In this example:

• The delimiter has been changed from [[ ]] to (( )).
• Now, the design tag << business_name >> will be replaced with “Tesla Inc.”

This is useful when [[ ]] conflicts with other syntax or templates being used in your application.

Key Differences Between Design Tags and Merge Tags

It’s important to note the difference between design tags and merge tags:

• Design Tags: These are placeholders that dynamically change during the editing process in the builder. They are visible only to the person editing the template in the builder.
• Merge Tags: These are placeholders that are replaced with actual content (e.g., user-specific data) when an email is sent to a recipient.

While design tags help personalize the template for the editor, merge tags allow for dynamic content when sending emails to end recipients.

Common Use Cases for Design Tags

Some typical use cases for design tags in templates include:

• Personalized Business Name: Show the business name of the user editing the template (e.g., [[ business_name ]]).
• Personalized Business Logo: Display a dynamic URL for the business logo using an HTML-safe tag (e.g., [[{ business_logo_url }]]).
• Custom Footer Text: Display a footer text specific to the user or business editing the template.
• Custom Unsubscribe Link: Use an HTML-safe tag to generate personalized unsubscribe links for the email template (e.g., [[{ unsubscribe_link }]]).

These use cases help personalize the editing experience and ensure that the correct dynamic content is visible while users edit their templates in the builder.