Design Personalized Emails with the Reconnect HTML Editor (Native Solution)

The Reconnect native email HTML editor is where you design and personalize your campaign content. It gives you full control over your email layout, styling, and dynamic elements, enabling you to build fully personalized 1:1 email experiences without relying on an external ESP template or codebase. You can customize HTML and CSS, inject personalized data using variables, display dynamic lists such as cart items or product recommendations, preview the final design, and launch your campaign — all in one place.

Step 1: Open the HTML email editor

1. Create a new campaign in Reconnect › New Campaign › [trigger]. 
2. Click Add Email.
   The Dynamic Yield Email creator appears.
   
3. Add a subject line and ensure the sender details are correct. 
4. Click Create an email and select a template.
   The email editor appears.
   

The editor is divided into two main work areas:

• Variables tab: Manage personalized elements that can be inserted into your email

• HTML tab: Edit your email HTML and CSS, and insert variables into the layout

A live preview appears on the right, so you can validate your design as you work.

In addition, the editor includes the following capabilities:

• Live Preview: Displays a rendered version of the email using real or sample values

• Desktop / Mobile preview modes: Toggle to validate responsive behavior

• Preview Message: Send a test email to yourself

• Localization support: Customize content per locale

Step 2: Add personalization using variables

Variables allow you to inject dynamic, user-specific values into your HTML. For example:

“The price of sporty men's shoes just dropped!”

Create a variable

1. In the HTML tab, insert a variable using the format: ${VARIABLE_NAME}

2. Select a variable type

3. Configure its settings (if applicable)

The following table lists the available variable t

Step 4: Display dynamic lists with loops 

Loops are used when your email needs to display multiple repeating items, such as:

• Items in cart

• Recently viewed products

• Recommendation blocks

For example, a cart abandonment email might show 1, 2, or 5 items depending on what the user has in their cart. A loop ensures the HTML repeats correctly for each item.

Using a loop

1. In the HTML tab, insert a variable using the format: ${#LOOP_NAME}

2. Choose the loop type (based on the campaign type).

3. Insert the loop start and end tags in your HTML:

${#items_in_cart}
  ... loop content here ...
${/items_in_cart}

4. Insert Product Feed variables between the loop tags.

5. For recommendation loops: Select a strategy in the Variables tab.

(screenshot: loop setup)

Notes

• Product Feed variables can only be used inside a loop

• You can limit the number of displayed items using Max items

Step 5: Preview and test your email

Before launching your campaign, review the final output using the available preview tools:

For example, click Preview Message and send yourself a test email:

Step 6: Save, schedule, and launch

When your content is ready:

1. Save the email layout.

2. Configure the trigger, audience, and schedule (as with any Reconnect campaign).

3. Launch the campaign.

Your fully personalized HTML email will now be sent through Reconnect Native Email.

Tracking 

Tracking is enabled automatically for all native email campaigns.

No additional configuration is required.

Best practices

• Keep CSS inline for reliable email rendering

• Always send at least one Preview Message before launch

• Use fallback text for personalized elements

• Limit loops to avoid excessively long emails

Limitations and notes

• The HTML editor is available only for Reconnect native email

• Product Feed variables can only be used inside a loop

• Preview is available only for desktop and mobile views

• The JSON editor is not available for this channel