Merge Tags

Smart Merge Tags offer a user-friendly way to add dynamic content to your designs. This feature highlights merge tags with easily recognizable names, making them simple to identify and use without needing to read code.

Basic Use #

You can pass the appearance object during initialization like this:

mailui.init({
  mergeTags: {
    first_name: {
      label: "First Name",
      value: "{{first_name}}",
    },
    last_name: {
      label: "Last Name",
      value: "{{last_name}}",
    }
  }
});

Set Programmatically #

You can change appearance after initialization like this:

mailui.setMergeTags({
  first_name: {
    label: "First Name",
    value: "{{first_name}}",
  },
  last_name: {
    label: "Last Name",
    value: "{{last_name}}",
  }
});

Merge Tags Group #

You can group a set of merge tags into a sub-menu by nesting a mergeTags object within another.

mailui.init({
  mergeTags: {
    user: {
      label: "User Info.",
      mergeTags: {
        first_name: {
          label: "First Name",
          value: "{{user.first_name}}"
        },
        last_name: {
          label: "Last Name",
          value: "{{user.last_name}}"
        },
      }
    }
  }
});

Looping with Merge Tags #

Merge tags can be used for dynamic, personalized content with looping and conditional logic, such as displaying lists of items (like products in an order) or showing specific content based on user data.

For instance, to build an order confirmation email showing all items in an order, you can pass a "Products" merge tag with looping rules. These rules allow you to insert "before" and "after" code to wrap the HTML block in a loop or if-else conditions.

The syntax depends on the templating engine used by your platform. This example uses the Mustache templating engine.

If you want to add conditions to display content to different segments of audience, check Display Conditions.

mailui.init({
  mergeTags: {
    products: {
      label: "Products",
      rules: {
        latestProducts: {
          label: "Latest Products",
          before: "{{#latest_products}}",
          after: "{{/latest_products}}",
        },
        bestSallersProducts: {
          label: "Best Sellers Products",
          before: "{{#best_sallers_products}}",
          after: "{{/best_sallers_products}}",
        },
      },
      mergeTags: {
        name: {
          label: "Product Name",
          value: "{{ name }}",
        },
        price: {
          label: "Product Price",
          value: "{{ price }}",
        },
      },
  }
});

Export HTML With Real Value #

When exporting your template content, all merge tags like {{ first_name }} or {{ other_marge_tag }} will be automatically replaced with real values in all export events. This includes:

HTML Export (mailui.exportHtml): Generates HTML with merge tags replaced.
ZIP Export (mailui.exportZip): Exports all template files in ZIP format with real values for merge tags.
Plain Text Export (mailui.exportPlainText): Produces plain text with replaced merge tags.
PDF Export (mailui.exportPdf): Exports the template to PDF format, ensuring all merge tags are displayed as actual values.
Image Export (mailui.exportImage): Renders an image preview where merge tags are shown with real values.

mailui.exportZip(function (data) {
    const json = data.json;
    
    console.log(json);
}, 
{
  mergeTags: {
      first_name: "John",
      last_name: "Author",
  }
});

Lood Data Render #

mailui.exportZip(function (data) {
    const json = data.json;
    
    console.log(json);
}, 
{
  mergeTags: {
      latest_products: [
          {name: "Product 1", price: "$24.99"},
          {name: "Product 2", price: "$24.99"},
      ],
      best_sallers_products: [
          {name: "Product 1", price: "$24.99"},
          {name: "Product 2", price: "$24.99"},
      ],
  }
});