Creating Emails Using Yotpo Email's HTML Editor

Goals and Outcomes

With Yotpo Email's HTML editor, you can create emails in just a few clicks. Simply paste custom HTML code—perfect for migrating templates from other email service providers—to save time and effort. Alternatively, you can write the code directly in the editor and preview the results instantly as you type.

In this article, you’ll learn how to create emails using the HTML editor.

HTML Editor Overview

The HTML editor is divided into two sections: on the left, you can paste or type your HTML code, and on the right, you’ll see a real-time preview. If you want to use personalization tags, you can easily add them from the Personalization tags drop-down menu. If you paste HTML code from external sources that contains personalization tags, make sure to replace them with the corresponding tags from the drop-down menu. Otherwise, the HTML editor won’t recognize them. Once you’re ready with your message, you have the option to save it as a template and reuse it.

Important

If you've used the HTML editor to create a message, you won’t be able to switch to another editor to preview or edit its content.

Accessing the HTML Editor

The HTML editor can be easily accessed from the Email Templates page, as well as when creating campaigns and flows.

Email templates

1. In your Yotpo SMS & Email main menu, go to Campaigns > Email Templates.

2. Select a tab, Featured templates or My templates, and click Start from scratch.

3. Select HTML editor and click Next.

Email campaigns

1. On the Yotpo Email home page, click Create campaign in the header.

2. Select Email and click Create campaign.

3. In the Email preview header, click the 3-dot menu and select Start from scratch.

4. Select HTML editor and click Next.

5. Click Create new email.

The HTML editor opens and you can start creating your message.

If you have opened the drag-and-drop editor, you can easily switch to the HTML editor.

1. In the drag-and-drop editor, click Templates in the top-right corner and select Start from scratch.

2. Select HTML editor and click Next.

3. Click Create new email.

Important

Any content in the drag-and-drop editor will be lost if you switch to the HTML editor.

Tip

If you want to use the HTML editor in a multi-message campaign, just add an email step and follow the steps above.

Flows

1. In your Yotpo Email main menu, go to Flows > My Flows and click Create flow.

2. After you add an email to the flow’s structure, in the Email design section, click Edit design.

3. In the drag-and-drop editor, click Templates in the top-right corner and select Start from scratch.

4. Select HTML editor and click Next.

5. Click Create new email.

Creating Emails with the HTML Editor

After opening the HTML editor, paste your custom HTML code. To use personalization tags, simply add them from the Personalization tags drop-down menu. In the HTML editor, each tag is enclosed in double curly brackets, for example, {{profile.first_name}}.

Note

To be compliant with marketing regulations, make sure that the Unsubscribe and Store full address personalization tags are included in your email. You won’t be able to save your message until they are added.

Adding CSS

You can add CSS directly in the HTML editor, but keep in mind that not all inbox service providers (ISPs) support every CSS style in emails. They may limit certain styles for security reasons or compatibility. To ensure your email displays as intended, send test emails to different ISPs such as Google and Yahoo, check how they appear, and make adjustments if needed.

Important

If your HTML code includes CSS, do not modify the opening <style> tag, the closing </style> tag, or the content between them. Altering these tags or the CSS inside will cause the email to display incorrectly or not display at all.