The WYSIWYG editor is one of 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 may want to use 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
- Turning the WYSIWYG editor on/off
- Using the WYSIWYG editor
-
Ensuring HTML compatibility in the WYSIWYG editor
- Checking for HTML changes
- Comparing HTML between two versions of a template
- Comparing HTML for saved template changes
- Using the Cleanup tool to format HTML
- Discarding and reverting changed HTML
- Testing changes to a template
- Examples of code changes
- Supported HTML tags and attributes
- HTML Resources
- Frequently asked questions
Choosing the WYSIWYG editor
To choose the WYSIWYG editor for a template:
Create a new email or in-app template.
-
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 your project's settings. See 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.
NOTE
This setting only applies to email templates.
To change the WYSIWYG editor setting:
Click the gear icon at the top of the page, and select Project Settings.
-
Scroll down to Use WYSIWYG Template Editor, and switch the toggle to the Yes or No position. When this option is enabled, all three template editors are available to choose from when you start designing a template. When this option is disabled, only the Drag and Drop and Side by Side editors are available to choose from when you start designing a template.
Then, scroll to the bottom of the page and click Save Project Settings.
NOTE
The WYSIWYG editor is the default editor for every new Iterable project. If you turn off the WYSIWYG editor in your project settings, the Side by Side Editor becomes the default editor for all of the project's users.
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. To learn more, see Checking for HTML 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.
NOTE
Once you create a template in the WYSIWYG editor, you can't open it in the Drag and Drop editor. The same is true for the Drag and Drop editor—once you've created a template in the Drag and Drop editor, you can't open it in the WYSIWYG 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 aborder-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:
- Click Source code in design mode.
- Find the
<img>
tag for your image, and update itssrc
attribute. - Click Save.
To learn more about adding images to templates, see Uploading Images to Iterable.
Ensuring HTML compatibility in the WYSIWYG editor
The WYSIWYG editor uses HTML5, and it doesn't allow invalid HTML elements. If the editor detects invalid HTML, it automatically closes open tags and removes unexpected tags. These changes occur any time you create or edit a template in the WYSIWYG editor.
To prevent formatting errors, be sure to do thorough, end-to-end testing before sending the messages you build with the WYSIWYG editor.
Checking for HTML changes
The WYSIWYG editor formats and standardizes any improperly formatted HTML in your templates.
To check a template for HTML 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.
If there are no changes between the last saved version and the current version, the Compare tool shows only the original and current HTML with no differences.
Comparing HTML for saved template changes
To compare the HTML in a template to the HTML found in the previous version of that template:
Open a web tool that lets you compare two HTML files (like Text Compare).
-
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.
Paste the original HTML into one side of the comparison tool.
On the same template, click Save, which applies the WYSIWYG editor changes.
Copy the saved HTML.
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.
NOTE
The Cleanup tool does not provide the ability to reject changes introduced by the WYSIWYG editor itself (changes applied when you initially opened up the template).
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.
TIP
To make sure your HTML is displaying as desired, preview your template and send some proofs.
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 to a previous version.
Testing changes to a template
After you save a template in the WYSIWYG editor, you should run thorough 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 WYSIWYG editor applies styling and best practices to 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;">
NOTE
If you have a use case that requires the WYSIWYG editor to support an older tag or attribute, talk to your customer success manager.
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
The WYSIWYG editor expects lowercase formatting for inline styling elements. The editor interprets other case styles, like camelcase, as invalid HTML and removes the casing. This breaks any dynamic content you've added to your template. Here's an example of a Handlebars expression for background color that would break:
<td style="background-color: {{backgroundColor}}">
To keep a template's inline style displaying as expected, here are some other things to keep in mind:
-
You can update any dynamic content you intend to use for inline styling to contain lowercase values.
For example, you might have created snippets with variables that define inline styles (such as
{{backgroundColor}}
) to change how a content block displays in multiple templates. You would need to make a change in both the snippet's variables configuration, and within any snippet or template code that references this variable. Changing this to lowercase could impact a number of templates. The See Where Snippets Are Usedfeature can help you find all the templates to edit. If you'd prefer to keep using camelcase variables, you can switch to the Side by Side template editor, which does not change the formatting of your HTML code.
You may want to consider defining your template's styles in a CSS sheet instead of inline, as CSS stylesheets allow for more flexible styling.
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.
WARNING
The WYSIWYG editor removes unsupported HTML tags and attributes from templates that include them.
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:
Tag | Attributes |
---|---|
a |
charsetcoords , download , href , media , name , ping , referrerpolicy , rel , rev , shape , targettype
|
abbr | |
acronym | |
address | |
area |
alt , coords , download , href , media , name , nohref , ping , referrerpolicy , rel , shape , targettype
|
article | |
aside | |
audio |
autoplay , bufferedcontrols , controlslist , crossorigin , disableremoteplaybackloop , mediagroup , muted , preloadsrc , volume
|
b | |
bdi | |
bdo | |
big | |
blockquote | cite |
body |
alinkbackground , bgcolor , bottommarginleftmargin , link , marginheight , rightmargin , text , topmargin , vlink
|
br | clear |
button |
autocomplete , disabled , form , formaction , formenctype , formmethod , formnovalidate , formtarget , name , type , value
|
caption | align |
center | |
cite | |
code | |
col |
alignbgcolor , char , charoff , spanvalign , width
|
colgroup |
alignbgcolor , char , charoff , spanvalign , width
|
data | value |
datalist | |
dd | nowrap |
del | citedatetime |
details | open |
dfn | |
dir | compact |
div | align |
dl | compact |
dt | |
em | |
embed | |
fieldset |
disabled , form , name
|
figcaption | |
figure | |
font |
color , face , size
|
footer | |
form |
accept , accept -charset , action , autocomplete , enctypemethod , name , novalidate , rel , target
|
h1 | align |
h2 | align |
h3 | align |
h4 | align |
h5 | align |
h6 | align |
head | profile |
header | |
hgroup | |
hr |
align , color , noshadesizewidth
|
html |
manifest , version , xmlns , xmlns :o
|
i | |
img |
align , altbordercrossorigin , decodingfetchpriority , height , hspace , ismap , loading , longdesc , name , referrerpolicy , sizes , src , srcset , usemap , vspace , width
|
input |
accept , align , alt , autocomplete , capture , checked , name , disabled , form , formaction , formenctype , formmethod , formnovalidate , formtarget , height , list , max , maxlength , min , minlength , multiple , name , pattern , placeholder , readonly , required , size , src , step , type , usemap , value , width
|
ins | citedatetime |
isindex | |
kbd | |
label |
for , form
|
legend | align |
li |
type , value
|
link |
as , crossorigin , disabled , fetchpriority , href , href , imagesizes , imagesrcset , integrity , media , prefetch , referrerpolicy , rel , sizestype
|
main | |
map | name |
mark | |
menu |
compact , labeltype
|
meta |
charset , content , http -equiv , name
|
meter |
high , low , max , min , optimum , value
|
nav | |
object | |
ol |
compactreversedstart , type
|
optgroup |
disabled , label
|
option |
disabled , label , selectedvalue
|
p | align |
param | |
picture | |
pre |
colswidth , wrap , xml :space
|
progress |
max , value
|
q | cite |
rp | |
rt | |
ruby | |
s | |
samp | |
section | |
select |
autocomplete , disabled , form , multiple , name , required , size
|
small | |
source |
height , mediasizes , src , srcset , type , width
|
span | |
strike | |
strong | |
style |
media , noncescopedtype , xml :space
|
sub | |
summary | |
sup | |
svg |
clip -path , clip -rule , color , color -interpolation , color -rendering , cursor , display , fill , fill -opacity , fill -rule , filter , height , mask , opacity , pointer -events , preserveAspectRatio , shape -rendering , stroke , stroke -dasharray , stroke -dashoffset , stroke -linecap , stroke -linejoin , stroke -miterlimit , stroke -opacity , stroke -width , transform , vector -effect , viewBox , visibility , width , x , xmlns , xmlns :xlink , y
|
table |
alignbackground , bgcolor , border , cellpadding , cellspacing , frame , height , rulessummary , width
|
tbody |
alignbgcolor , char , charoff , valign
|
td |
abbr , alignaxis , background , bgcolor , char , charoff , colspan , headers , height , nowraprowspan , scopevalign , width
|
textarea |
autocomplete , autocorrectcolsname , disabled , form , maxlength , minlength , name , placeholder , readonly , required , rowswrap
|
tfoot |
alignbgcolor , char , charoff , valign
|
th |
abbr , alignaxis , background , bgcolor , bicolor , char , charoff , colspan , headers , height , nowraprowspan , scopevalign , width
|
thead |
alignbgcolor , char , charoff , valign
|
time | datetime |
title | |
tr |
alignbgcolor , char , charoff , heightvalign
|
track |
defaultkind , label , src , src
|
tt | |
u | |
ul |
align , compacttype
|
var | |
video |
autopictureinpicture , autoplay , bufferedcontrols , controlslist , crossorigin , disablepictureinpicture , disableremoteplayback , height , loop , mediagroup , muted , playsinline , poster , preloadsrc , width
|
wbr |
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:
Frequently asked questions
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 apply bold formatting to the text in the interface.
Rich text editors include options like different levels of headings, bold, italics, bullets, font types, text colors, and text sizes.
Why did the WYSIWYG editor change HTML in my template?
The WYSIWYG editor uses HTML5. If it finds code that doesn't adhere to standard HTML5 formatting practices, it considers this code invalid and alters or removes it from the template. This helps ensure consistent rich text editing experience in the WYSIWYG editor.
Why did 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 new, supported tags and update your 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 Iterable support and request an exception for one of your tags.
What are the HTML5 standard guidelines?
Here are a few resources that can help you learn more about HTML:
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 learn how to switch to the Side by Side editor, see Selecting an Editor and Switching Editors.