Template Editors

Before editing the design of an email or in-app template, you'll choose an editor to use. There are three different editors you can use: the WYSIWYG (What You See Is What You Get) editor, the Side-by-Side editor, and the Drag-and-Drop editor. This article describes these editors.

Just getting started with templates? See Introduction to Templates.

# Table of contents

# Selecting an editor and switching editors

When you create an in-app or email template and begin editing the design, you'll be asked to choose a template editor. The editor options you have to choose from depend on the Use WYSIWYG template editor project setting (see Turning the WYSIWYG editor on and off).

This example is from a project with the WYSIWYG editor turned on:

After you select a template editor for in-app or email templates, you can switch between Side-by-Side or WYSIWYG in Design > Preferences.

# The WYSIWYG (What You See Is What You Get) editor

If you are proficient in HTML and CSS, or your team has templates saved as HTML files, you can start with the WYSIWYG editor.

This editor supports secure, standardized formatting for rich-text editing and follows HTML5 best practices and code structure.

With the WYSIWYG editor, you can:

• Write your template's copy and add images.
• Add tables, lists, and links.
• Change the color, style, and size of your fonts.
• Load and edit an existing HTML file.
• Use the source code button to edit the HTML.

# Using the WYSIWYG editor

You can start creating content directly in the rich-text editor when you open a template.

To edit the template's HTML code, click the Source button.

To upload an HTML template into the WYSIWYG editor, click Load HTML File… or copy and paste a template's HTML into the source.

After you click Save, the WYSIWYG editor updates any invalid HTML, formatting it for rich text editing. This process can automatically close any open tags and remove unsupported tags. For more information, read Checking the HTML for changes.

Don't want these changes? You can discard them and navigate to the advanced HTML editor instead. In design mode, go to Preferences and switch to the Side-by-Side editor.

# Adding images

You can add images to your templates in the WYSIWYG editor. Iterable supports JPG, JPEG, PNG, GIF, and WEBP image files in this editor.

To begin adding images and GIFs to your template, click the image icon.

# Replacing images

You can replace an image using the Image menu option, or change the image URL directly in the source code. Replacing the image URL in the source code is the best way to maintain any custom style and class tags you have on your image.

To update your image from the rich-text editor:

1. Open your template and click Design.
2. Right-click an image in your template and select Image.
3. Enter the URL for the new image.
4. Click Save.

You can also click the image, then click the Image icon and select a new image.

# Turning the WYSIWYG editor on/off

The WYSIWYG editor is turned on by default for all projects, but you can disable it in your project settings. The resulting behavior of this setting only applies to email templates.

To change the WYSIWYG editor setting in Iterable:

1. Click the gear icon at the top of the page, then select Project settings.

2. Scroll down the page to Use WYSIWYG template editor and switch the toggle to the Yes or No position:

   • Yes - All three template editors are available to choose from when you start designing a template.

   • No - The Drag-and-Drop and Side-by-Side editors are available to choose when you start designing a template.

   

3. Then, scroll to the bottom of the page and click Save Project Settings.

# Successfully transitioning existing content to the new WYSIWYG editor

To transition to the new WYSIWYG editor, consider reviewing your template's HTML for changes, especially templates that contain custom code. If you find changes, you can decide to keep or discard them.

# Checking the HTML for changes

The WYSIWYG editor formats and standardizes any improperly formatted HTML in your templates.

To check your template for changes, open it in design mode. If you notice the message There are unsaved changes, and you haven't edited the template, it's possible the WYSIWYG editor made changes to the HTML.

If you see changes that you don't expect, you can compare the changed HTML with the original HTML to see what the differences are. Here's how:

1. Open a web tool that lets you compare two HTML files (like Text Compare).

2. Copy the HTML of the original template. To find the original HTML of your template, you can:

   • Export the template's HTML from Iterable and open the file in a browser.
   • Open the template's source code in the WYSIWYG editor before you save it.
   • Open the source file of the template.

3. Paste the original HTML into one side of the comparison tool.

4. On the same template, click Save, then copy the saved HTML.

5. Paste the changed HTML into the other side of the HTML comparison tool.

In the comparison tool, the highlighted sections of HTML indicate differences between the two files.

# Discarding and reverting changed HTML

To discard unwanted changes and revert your HTML, you can switch to the Side-by-Side editor in Edit design > Preferences. The Side-by-Side editor does not alter your HTML, and switching discards any changes made to HTML since the last save.

If you accidentally save unexpected changes, you can revert back to a previous version.

# Checking how the template renders

After you save a template in the WYSIWYG editor, you should run complete end-to-end tests:

• To ensure a template is rendering correctly, use Preview. While in preview mode, you can load user data and data feeds to test that dynamic content is working as expected.

• To make sure your template renders correctly on different devices, click Preview on devices while in preview mode. This option is only available on email templates.

• Sending test messages to yourself or your teammates is also a great way to check your template's content.

# Examples of code changes

There are a few different types of code changes you may encounter in your template's HTML. Here are some examples:

Non-breaking HTML changes

The new editor applies styling and best practices to the HTML to properly format the code. These changes should not affect how your email renders.

This example HTML has an image that is not contained in another tag (like <div> or <table>):

<img class="fit-picture" src="/images/examples/sample-image.jpg" alt="Example image">

The WYSIWYG editor wraps it in a <div>:

<div>
<img class="fit-picture" src="/images/examples/sample-image.jpg" alt="Example image">
</div>

The WYSIWYG editor also reorders the attributes within an element to standardize the code. These two tables render the same:

Before

<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="left" width="100%" style="width: 100%;">

After

<table style="width: 100%;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">

In the WYSIWYG editor, the <font> tag is automatically replaced with <span style="your style">. This should not affect your template.

Before

<font color="#000000">

After

<span style="color: #000000;">

Unsupported HTML

The WYSIWYG editor doesn't support some HTML formats, like outdated elements and certain formats for attributes.

Non-relevant or outdated elements

The WYSIWYG editor removes non-relevant attributes like rel="noopener" and xt="SPCLICK".

Before

<a class="btn" href="https://www.placeholder.com" target="_blank" rel="noopener" xt="SPCLICK">My link</a>

After

<a class="btn" href="https://www.placeholder.com" target="_blank">My link</a>

Camelcase attributes for inline style

For example:

<style type="text/css">
  .myClassName {
    background-color: {{backgroundColor}};
  }
</style>

Anchor tags around other elements

The WYSIWYG editor automatically removes anchor tags (<a>) around headings (<h1>), leaving just the heading. To prevent this from happening, try placing your headings outside the anchor.

For example, try:

<h1><a href="link">Heading Text</a></h1>

Instead of:

<a href="link"><h1>Heading Text</h1></a>

# Supported HTML tags and attributes

The WYSIWYG editor supports the following HTML tags and attributes. For svg, there are additional supported tags beyond what's listed in this table.

Global attributes

The WYSIWYG editor supports the following attributes on all HTML tags:

• accesskey
• autocapitalize
• autofocus
• class
• contenteditable
• dir
• enterkeyhint
• hidden
• id
• inputmode
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• role
• spellcheck
• style
• tabindex
• title
• translate

Tags and their attributes

The WYSIWYG editor supports the following HTML tags and associated attributes:

# Allowed exceptions

The WYSIWYG editor supports some older HTML tags and attributes.

Deprecated attributes (like background)

Standard HTML has deprecated the background attribute for the td element (and related fields like bgcolor). While these attributes may still work in some browsers, they do not pass HTML validation. Browsers may drop support for these attributes at any time.

For example:

<td
  width="100%"
  background="https://www.myimage.png"
  valign="top"
  style="
    width: 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    background-size: cover;
  "
></td>

To apply a background image or style to a table's cells, use the CSS background property instead of these older attributes. We've configured the WYSIWYG editor to support the older tag attributes, but it's best to update your templates to adopt newer HTML standards.

# HTML Resources

Here are some web pages that describe deprecated HTML tags:

• Deprecated HTML tags
• Deprecated HTML attributes

# Frequently asked questions

Why did Iterable change the WYSIWYG editor?

We made the change to the new editor to make sure we could keep supporting rich-text editing for your emails and in-app messages, and to provide you with improved features, better security, and usability updates.

What is a rich-text editor?

A rich-text editor is a content interface that allows you to format and style text using buttons or UI elements, rather than having to use HTML or CSS. For instance, rather than surrounding bold text with <b></b>, you can click the B button to bold the text in the interface.

Rich-text editors include options like levels of headings, bold, italics, bullets, font types, text colors, and text sizes.

Why does the WYSIWYG editor change HTML in my template?

The new editor uses HTML5 as the default schema. If it finds code outside of standard HTML5 practices, it considers this code invalid and tries to clean it up or remove it. This standard schema is the key to unlocking secure, consistent, rich-text editing support. The editor has to know how to properly read the HTML in order to allow for rich-text editing functionalities.

Why does the WYSIWYG editor remove HTML from my template?

HTML5 includes updated tags, attributes and elements and has deprecated support to older versions of these tags and elements. This means that unsupported tags no longer work with HTML5.

Here are some options to pursue when HTML is removed from your template:

• Check out HTML5 resources online to find the new, supported tag and update the template's HTML.
• Work with Iterable customer support to properly format your HTML.
• If you have a strong use case, you can reach out to support and ask us to add an exception to your tag.

What are the HTML5 standard guidelines?

Here are a few resources that can help you learn more about HTML:

• Differences between HTML and HTML5
• List of supported and obsolete tags
• Alternate tags for HTML5

Can I edit HTML in dark mode?

We've received a lot of requests to add dark mode support in the WYSIWYG editor! We are currently looking into solutions to make this possible.

In the meantime, the Side-by-Side Editor has full HTML editing capabilities and you can choose the editor theme, including a few dark mode options.

To switch to the Side-by-Side editor, check out Selecting an editor and switching editors.

Can I double-click my images to replace them?

This is a highly-requested feature, and we are exploring options to make image uploading and reloading easier in the new WYSIWYG editor. The double-click and replace function is not a native part of the new editor.

# The Side-by-Side editor

For teams with advanced HTML and CSS skills, we recommend using the Side-by-Side editor.

To use the Side-by-Side editor, turn off the WYSIWYG editor in Project Settings.

Paste your HTML and CSS code into the left side of the Side-by-Side editor to see how your template renders.

Keep in mind that you can't upload images to the Side-by-Side editor. To add images to a template in the Side-by-Side editor, host your images somewhere and reference them in the HTML code of your template with a tag.

# The Drag-and-Drop editor

Not comfortable with HTML or CSS? No problem! You can use the Drag-and-Drop editor to build beautiful templates with just a few clicks.

When you create a new template, you can either select a pre-built layout that you can customize, or choose a blank layout if you'd prefer to build your template from scratch.

# Adding content blocks

There are 13 content tiles you can drag onto the canvas:

You can also add emojis to your templates! Add a text block to the template, then select the smiley-face icon in the text block settings menu.

# Adding photos and videos

You can upload images and videos to the Drag-and-Drop editor using the file manager. (The maximum file size is 12 MB.) To learn more about adding images to the Drag-and-Drop editor, see BEE's support documentation.

# Photo upload

# Image content properties

After you add an image to your template, customize its properties (found in the Content properties menu, in the content tab).

# Dynamic image

If you would like to send a birthday card or countdown timer in your email, but need to customize the text that appears on the image, enable dynamic image in the content properties.

To generate your content, use a dynamic image service such as Niftyimages or Fresh Relevance.

When you have the image URL you'd like to use, enter it in the dynamic image field in Iterable. It will be formatted something like this (note the Handlebars expression at the end):

https://example.com/images/?imageBanner={{firstName}}

The resulting image in your template uses the first name of each recipient, providing a customized experience.

# Video upload

This displays a preview of the video and link users to the video on YouTube or Vimeo. Another option is to embed the video into your email.

# Adding snippets

You can add snippets to the templates you build in the Drag-and-Drop editor. Add a Text, Paragraph, HTML, or Title tile to the template, and paste your snippet into it.

Keep in mind: the Drag-and-Drop editor contains default HTML styling that can affect how your snippets render in the final version of your message.

To learn how to make your snippets render correctly in the Drag-and-Drop editor, see Adding a Snippet to a Template.

# Mobile design mode

Mobile design mode lets you build mobile-first messages right within the Drag-and-Drop editor. This new design mode provides several features that make it easier to optimize messages for different devices:

• Hide on mobile/Hide on desktop: Lets you hide a content block when the message is displayed on a certain device.

• Do not stack on mobile: When this is turned on, columns are not stacked on mobile devices. The message looks the same as the desktop version.

• Reverse stacking on mobile: When this is turned on, columns stack in reverse order, from right to left.

Click the mobile device icon in the top left of the editor to see how your template looks on a mobile device.

When you do this, the size of the design preview shrinks down to 320px.

# Turning Visibility on/off

If you've set any content blocks to be hidden on mobile or desktop, you can show or hide these blocks in your design preview.

Click the eye icon in the top left of the editor to turn Visibility on or off.

When Visibility is on, hidden content blocks appear grayed-out to indicate that they would not be visible to recipients.

When Visibility is off, hidden content blocks do not appear in the message preview.

To learn more about mobile design mode, see BEE's support documentation.

# Custom fonts

You can add custom fonts to templates you create in the Drag-and-Drop editor, allowing you to send campaigns styled to match your brand.

Custom fonts are generally supported in iOS Mail, Apple Mail, Outlook 2000, Thunderbird, and the default Android mail client (not Gmail). Not all email clients support custom fonts, so make sure to specify fallback fonts.

When you add a custom font, it's available to all templates in the same Iterable project (as long as they use the Drag-and-Drop editor).

You can only add a single variation of a font family—you can't upload multiple fonts from the same font family. Similarly, when you configure a custom font with a tool (like Google Fonts), you should only include a single variation/style.

To learn more, read BEE's documentation about custom fonts.