WYSIWYG Editor

The WYSIWYG editor is one of the three editors Iterable provides for creating email and in-app templates.

If you are proficient in HTML and CSS but would still like the option of a rich text editor, 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.

# In this article

# Choosing the WYSIWYG editor

To choose the WYSIWYG editor for a template:

1. Create a new email or in-app template.

2. With the template open, click Edit design and select WYSIWYG.

   

   NOTE

   The editor options that show here depend on the Use WYSIWYG template editor setting in project settings. Read Turning the WYSIWYG editor on/off for more details.

# 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 to only allow editing templates in the Side by Side editor. The Side by Side editor does not apply any formatting changes to your HTML, so this is useful if you have lots of custom HTML.

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.

# 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 automatically closes any open tags and removes 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.

# Visual guidelines

To show or hide visual guidelines on tables, click the Show/hide guidelines icon.

In general, the toggle works on tables where:

• There is no border attribute in the table.

   <table>
    <tbody>
      <tr>
        <th>My table content.</th>
        </tr>
        </tbody>
        </table>

• The border attribute exists and is set to "0".

   <table border="0">
    <tbody>
      <tr>
        <th>My table content.</th>
        </tr>
        </tbody>
        </table>    

• The style attribute has a border-width of 0 px.

  <table>
   <tbody>
    <tr>
      <th style="border-width: 0px;">My table content.</th>
      </tr>
      </tbody>
      </table>

The toggle may not work in all cases. For example, if you use Table properties within the WYSIWYG editor and set Border width to 0, the guidelines disappear. This is because Border width sets table border to "1":

<table border="1" style="border-collapse: collapse; border-width: 0px;">
<tbody>
<tr>
<th style="border-width: 0px;">This is a table.</th>

# 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 add an image to a template in the WYSIWYG editor, click the Images button and select an image.

To edit or replace an image, click the image then click the Images button. Hover over the image in the Edit Image panel and click Change Image.

You can also open the WYSIWYG source code and change the image URL there:

1. Click Source code in design mode.
2. Find the <img> tag for your image, and update its src attribute.
3. Click Save.

To learn more about adding images to templates, see Uploading Images to Iterable.

# Transitioning existing content to the new WYSIWYG editor

To transition to the new WYSIWYG editor, review 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.

# Comparing HTML between two versions of a template

When the WYSIWYG editor makes changes that you haven't saved yet, you can use the Compare tool to view the differences between the current unsaved HTML and the last saved HTML.

To view the changes since the last save, open the template in the WYSIWYG editor and click Compare.

For example, the current HTML could include unexpected formatting that the WYSIWYG editor applied automatically, and the original HTML is the template you or a team member edited.

# Comparing HTML for saved template changes

To compare the HTML in a template to the HTML found in the previous version of that template:

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 source file of the template.

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

4. On the same template, click Save, which applies the WYSIWYG editor changes.

5. Copy the saved HTML.

6. 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.

# Using the Cleanup tool to format HTML

If you're having trouble previewing or sending a template, the issue could be HTML-related. Try using the Cleanup tool to help properly format your HTML.

When you load and edit template content in the WYSIWYG editor, the editor makes required changes to improperly formatted code so it adheres to HTML5 standards. The Cleanup tool suggests further HTML fixes and improvements beyond the required editor changes (and allows you to approve them before they're applied).

For example, the Cleanup tool can add proper structure to your HTML. If your template has a </body> tag somewhere other than at the end of the HTML, the Cleanup tool moves it to the end of the document, where it belongs.

To start cleaning up your template HTML, click Cleanup in the WYSIWYG editor toolbar.

In the tool, the original HTML is on the left, and suggestions are on the right. Suggested code changes are highlighted.

Check out the suggestions by scrolling through the window. If they work for you, click Apply Changes.

# 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.

# Testing changes to a template

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

• To ensure a template is configured 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 displays 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 displays.

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 display the same way:

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 using HTML or CSS. For instance, instead of editing code to add bold (<b>Bold text</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.

You have some options 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.