Dynamic Data and Rendering

You can inject dynamic data into your email templates using variables. This allows you to create personalized emails that can be customized for each recipient.

Understanding Merge Tags and Data

There are two important concepts to understand:

1. Merge Tags (mergetags): These define the variables that users can select and insert into the template.
2. Merge Tags Data (mergetagsData): This contains the actual values that will replace the variables when the email is previewed or sent.

How to Use Dynamic Data

Step 1: Define Available Merge Tags

First, define the merge tags that will be available for users to insert into the template:

const mergetags: Array<MergetagItem> = [
  {
    label: "Order",
    value: "",
    children: [
      {
        label: "Order number",
        value: "order.number",
        type: "text",
      },
      {
        label: "Order total",
        value: "order.total",
        type: "text",
      },
    ],
  },
  {
    label: "Common",
    value: "",
    children: [
      {
        label: "Unsubscribe link",
        value: "common.unsubscribe",
        type: "link",
      },
      {
        label: "Company logo",
        value: "common.logo",
        type: "image",
      },
      {
        label: "Website",
        value: "common.website",
        type: "image",
      },
    ],
  },
];

Each merge tag has:

• label: The display name shown to users
• value: The variable name used in the template
• type: Determines where this merge tag can be used (text, image, or link)

Step 2: Provide Data for the Merge Tags

Next, provide the actual data that will replace the merge tags:

const mergetagsData = {
  order: {
    number: "Shopify#1001",
    total: "$100.00",
  },
  customer: {
    name: "Ryan",
    email: "easy-email-pro@example.com",
  },
  common: {
    unsubscribe: "http://www.easyemail.pro",
    website: "http://www.easyemail.pro",
    logo: "http://res.cloudinary.com/djnkpbshx/image/upload/v1704018909/easy-email-pro-test/n3lcl4bo8lkezrtsgxz6.png?w=575",
  },
};

Notice how

Previewing with Dynamic Data

When previewing your email template, you can see how it will look with actual data:

1. Open your email template in preview mode
2. Click on "Edit Variables" to view and modify the dynamic data
3. As you make changes to the variables, the template will update in real-time to show how it will appear with the new data

Example

There are two important props:

1. mergetags, representing the variables users can choose. Each child node has a type and will be automatically filtered in different scenarios. For example, in the Image component, only options with type "image" will appear.

const mergetags: Array<MergetagItem> = [
  {
    label: "Order",
    value: "",
    children: [
      {
        label: "Order number",
        value: "order.number",
        type: "text",
      },
      {
        label: "Order total",
        value: "order.total",
        type: "text",
      },
    ],
  },
  {
    label: "Common",
    value: "",
    children: [
      {
        label: "Unsubscribe link",
        value: "common.unsubscribe",
        type: "link",
      },
      {
        label: "Company logo",
        value: "common.logo",
        type: "image",
      },
      {
        label: "Website",
        value: "common.website",
        type: "image",
      },
    ],
  },
];

Merge tag types and their appearance

This filtering ensures that users only see relevant merge tags for the component they're editing. For example, when editing an image component, only merge tags with type "image" will be shown in the dropdown. Different merge tag types will appear in different component contexts:

• text type: Available in text components

• image type: Available in image components

  • 

• link type: Available in link components

  • 

2. Passing dynamic data mergetagsData. When users preview, the variables used in the template will automatically combine with mergetagsData to generate dynamic data.

const mergetagsData = {
  order: {
    number: "Shopify#1001",
    total: "$100.00",
  },
  customer: {
    name: "Ryan",
    email: "easy-email-pro@example.com",
  },
  products: [
    {
      title: "#product 1",
      image:
        "https://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815715/nqqreectuzi3lxv7dxsp.png",
    },
    {
      title: "#product 2",
      image:
        "https://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815875/mevpkdxft8z6cyjicnd6.png",
    },
  ],
  colors: {
    red: "#ff0000",
    yellow: "#ffff00",
    blue: "#0000ff",
  },
  common: {
    unsubscribe: "http://www.easyemail.pro",
    website: "http://www.easyemail.pro",
    logo: "http://res.cloudinary.com/djnkpbshx/image/upload/v1704018909/easy-email-pro-test/n3lcl4bo8lkezrtsgxz6.png?w=575",
  },
};