Skip to content

Merge tags

Merge tags, special links or placeholders provide an easy way to insert dynamic snippets into your template. Make your email dynamic and personalized.

Default merge tags structure is in following syntax:

*|MERGE_TAG|*

You will find it in the toolbar of the text feature:

Merge tags, special links...

Smart Merge Tags

Using smart tags will allow see a merge tag in a recognizable box:

You can enable the smart merge tags by:

ts
smartMergeTags: {
    enabled: true,
}

Merge tag box


Merge tag box

Text autocomplete


Merge tag autocomplete

Text field autocomplete


Merge tag autocomplete

Custom merge tag syntax

You can opt for custom merge tag syntax.

ts
smartMergeTags: {
    enabled: true,
    syntax: {
      start: "{{",
      end: "}}"
    }
}

Nested Merge Tags

Code example:

ts
mergeTags: [
  {
    name: "Merge tags", // Group name
    items: [
      {
        value: "*|FIRST_NAME|*", // Text to be inserted
        text: "First name", // Shown text in the menu
        label: "Customer's first name", // Shown description title in the menu
      },
      {
        value: "*|LAST_NAME|*",
        text: "Last name",
        label: "Customer's last name",
      },
      {
        name: "Merge tags nested",
        items: [
          {
            value: "*|FIRST_NAME_NESTED|*", // Text to be inserted
            text: "First name 2", // Shown text in the menu
            label: "Customer's first name 2", // Shown description title in the menu
          },
          {
            value: "*|LAST_NAME_NESTED|*",
            text: "Last name 2",
            label: "Customer's last name 2",
          },
        ],
      },
    ],
  },
  {
    name: "Special links", // Group name
    items: [
      {
        value: '<a href="*|UNSUBSCRIBE_LINK|*">Unsubscribe</a>',
        text: "Unsubscribe",
        label: "Unsubscribe link",
      },
      {
        value: '<a href="*|WEB_VERSION_LINK|*">Web version</a>',
        text: "Web version",
        label: "Web version link",
      },
    ],
  },
  {
    name: "Special content", // Group name
    items: [
      {
        value:
          'For more details, please visit our <a href="https://www.shop.shop">e-shop</a>!',
        text: "Visit our site",
        label: "Call to Action",
      },
    ],
  },
];