Merge tags allows users to dynamically add content to their email. Merge tags can be inserted into a block of text by clicking on the "Merge Tags" button in the text editor toolbar. The button is not shown if no merge tags were passed when initializing Unlayer.
We support all types of merge tags. All templating engines are fully supported, whether it uses curly brackets {{ ... }} or square brackets [ ... ] or any other.
This is how it looks if you have merge tags.


Merge Tags
Basic Merge Tags
There are 2 ways host application can pass merge tags to Unlayer.
Option 1) You can pass merge tags during initialization like this:
unlayer.init({
mergeTags: {
first_name: {
name: "First Name",
value: "{{first_name}}",
sample: "John"
},
last_name: {
name: "Last Name",
value: "{{last_name}}",
sample: "Doe"
}
}
});
Option 2) You can pass merge tags after initialization like this:
unlayer.setMergeTags({
first_name: {
name: "First Name",
value: "{{first_name}}",
sample: "John"
},
last_name: {
name: "Last Name",
value: "{{last_name}}",
sample: "Doe"
}
});
Grouped Merge Tags
You can group a set of merge tags inside a sub-menu by passing another mergeTags
object inside one.
unlayer.init({
mergeTags: {
shipping_address: {
name: "Shipping Address",
mergeTags: {
street_1: {
name: "Street 1",
value: "{{shipping_address.address_1}}"
},
street_2: {
name: "Street 2",
value: "{{shipping_address.address_2}}"
},
city: {
name: "City",
value: "{{shipping_address.city}}"
},
state: {
name: "State",
value: "{{shipping_address.state}}"
},
zip: {
name: "Zip",
value: "{{shipping_address.zip}}"
}
}
}
}
});
Loops and Conditions
You can use the merge tags to add conditions and looping for dynamic content.
For example, if you want your users to create an order confirmation email template and show all products in that order, you would pass the "Products" merge tags along with some rules
. The before
and after
of the selected rule will be added before and after the block in the exported HTML.
This before
and after
can be used to create loops or if-then-else conditions. The syntax will depend on which templating engine the host application uses. In this example, we are using Mustache templating engine.
If you want to add conditions to display content to different segments of audience, check Display Conditions.
unlayer.init({
mergeTags: {
products: {
name: "Products",
rules: {
repeat: {
name: "Repeat for Each Product",
before: "{{#products}}",
after: "{{/products}}",
}
},
mergeTags: {
name: {
name: "Product Name",
value: "{{name}}"
},
image: {
name: "Product Image",
value: "{{image}}"
}
}
}
}
});
Specifying the rules
will add an additional icon to the blocks in the editor. This icon will be used to select the merge tag group and rules.


Once you click that icon, it will let users pick a merge tag group and a merge rule, and will show the available merge tags after selection. You can then use those tags any where inside that block.


Sample Preview
You can provide sample values for each merge tag so users can see what the actual email would look like when the values are filled. These sample values are only visible in preview mode.
Simply add a sample
attribute to the merge tag. In the example below, {{first_name}}
will be replaced with John
and {{last_name}}
will be replaced with Doe
in preview mode.
unlayer.init({
mergeTags: {
first_name: {
name: "First Name",
value: "{{first_name}}",
sample: "John"
},
last_name: {
name: "Last Name",
value: "{{last_name}}",
sample: "Doe"
}
}
});
Autocomplete Menu Trigger
By default, the merge tag autocomplete menu is triggered by the first character of your merge tags. For example, if your merge tags look like {{first_name}}, the trigger will automatically be {
.
If you want to change the trigger character, you can do that like this.
unlayer.init({
mergeTagsConfig: {
autocompleteTriggerChar: "@"
}
});
Updated 3 months ago
What's Next
Design Tags |
Display Conditions |