Design your email with HTML

You can use the HTML editor instead of the drag-and-drop email editor to design your email. Just like the drag-and-drop editor, the HTML editor allows you to include images, dynamic links, and dynamic variables.

Open the HTML editor for a campaign email message

Follow these steps to open the HTML editor for a new campaign email message:

1. From the Campaigns page, create a new campaign or edit an existing campaign.
2. (Optional) Click + Add message, then click Email to add a new email message to an existing campaign.
3. Click Use HTML editor.
   
4. Follow the steps in the Use the HTML editor section below.

Follow these steps to open the HTML editor for an existing campaign email message:

1. From the Campaigns page, edit an existing campaign.
2. Click on the message you want to edit.
3. Click Edit content.
4. Click the three dots in the upper right corner.
5. Click Switch to email editor.
6. In the popup window, click Continue.

Open the HTML editor for a journey email message

Follow these steps to open the HTML editor for a new journey email message:

1. From the Journeys page, create a new journey or edit an existing journey.
2. Add a Send email step to your journey.
3. Click the new Send email message step. A panel slides out on the right.
4. In the email preview, click Use HTML editor. 
   
   

Follow these steps to open the HTML editor for an existing journey email message:

1. From the Journeys page, create a new journey or edit an existing journey.
2. Click the Send email step you want to design.
3. Click Edit content.
4. Click the three dots in the upper right corner.
5. Click Switch to email editor.
6. In the popup window, click Continue.

Design your email message in the HTML editor

After you open the HTML editor for a campaign or journey email message, follow these steps:

1. Type or paste HTML in the editor. The HTML should contain the entire contents of your email.
2. (Optional) Add dynamic links and variables (e.g., {{subscriber.firstName}}) directly in your HTML to personalize the message. For example: 

   <p>Hey, {{subscriber.firstName}}! Take 10% off your next order with code {{offer.code}}!</p>

3. (Optional) To add an image, place your cursor where you'd like the image to appear and click the image icon above the HTML.
   
   The Add an image popup window appears. Select or upload an image, then click Insert image (or customize using Attentive AI). This inserts the image URL into your HTML code.
   
4. (Optional) To add a discount code, click Add offer in the top-right corner of the editor. Then, add the {{offer.code}} or {{offer.link}} variable to your HTML. See Add an offer for more information.
5. Click Preview in the upper right corner to preview and send a test email. 
6. Click Save.