HTMLEditor

Owned by Laura Hounshell (Unlicensed)
Last updated: Nov 18, 2019 by Alex Burns (Unlicensed)

HTMLEditor gives you the ability to create and maintain layouts for your emails without having prior knowledge of HTML. HTMLEditor is equipped with a design mode called WYSIWYG (What You See Is What You Get) - a visual tool, to create/edit HTML files. The editor uses standard HTML and CSS for formatting the HTML file source code. That means the files created in other HTML editors can be opened and edited by this HTML editor and vice versa.

Additionally, HTMLEditor provides you with features such as: easy insertion of images, unsubscribe links, along with setting up tracking/click through fields, social media widgets, and more to make your email campaigns even more powerful. 

Topics:

 

Getting Started With HTMLEditor

HTMLEditor default mode is the WYSIWYG Design Mode. WYSIWYG, which stands for "What You See Is What You Get", a visual tool that allows you to create and edit content without dealing with HTML tags. However, if you would like to access or edit the source code manually you can by selecting the Source tab.

While constructing your email layout, you can preview what it will look like by selecting the Preview () icon in the tool bar. Additionally, you can set up a text only version of your email by selecting the Plain Text tab.

Alternative Ways to View Emails

There are times when it may not be possible for a consumer to view the HTML email in their inbox. For instance, if there are conflicts with file size downloads or email clients having trouble with their display. HTMLEditor provides two ways to combat this: Plain Text Version and View in Browser.

View in Browser

There may also be times when a consumer's email client blocks images or conflicts with file size downloads making them unable to view your email as intended. Inserting a View in Browser Link provides the consumers with an alternative option so they are still able to view your emails in such situations.

To Insert a View in Browser Link

  1. Place your cursor where you would like the link to be inserted
  2. Select Insert -> View in Browser Link from the HTMLEditor tool bar.
    1. Alternatively, select the Add View in Browser Link () icon
  3. Enter the text you want to display in Inner Text.
  4. Click OK to insert the link.

Note

The View in Browser Link will not be active in test emails from the HTML Editor. The link will only be functional in emails sent through SendEx.

Plain Text Version

Some customers may have settings that allow them to only receive text only emails and may block HTML emails or HTML emails are not supported in the app they wish to view your email. HTMLEditor allows you to build a plain text version of your HTML email.

To Create/Update a Plain Text Version

  1. Select the Plain Text tab.
  2. Enter in your desired text or edit the current text version of your email
  3. Click OK

Tracking and Click Through

HTMLEditor allows you to track when a recipient clicks on a link in your email. To track these links, they need to be marked as a click through and a unique Tracking ID must be provided. When creating a Tracking ID for a link that is part of your email, you want the ID to correlate with the page in which the user is directed to. For example, you could have a Tracking ID for a link that directs the user to a sales page, another one for a link that leads the user to a support page, and another one for a link that takes the user to a product page. The ID can be any arbitrary combination of characters, but be sure to give each link a unique ID.

To Setup Tracking and Click Through

  1. Place your cursor where you would like the link to be inserted.
  2. Select the Add/Edit Link () icon in the tool bar.
  3. Enter a unique Tracking ID for each of your links.
  4. Click OK to save your changes.
  5. If the link is an Unsubscribe or Opt-Out link:
    1. Select the Link Tracking Tab.
    2. Check the Unsubscribe box in the far-right column.
  6. If you would like to edit the Tracking ID or stop tracking a link:
    1. Select the Link Tracking Tab.
    2. Edit the Tracking ID or check the Do Not Track box.

Note

Track ID's cannot have any white space in between characters.

Dynamic Fields

HTMLEditor allows you personalize your emails by inserting a value from a field in your database. To include dynamic content in your html type the field name you wish to insert in double curly brackets like so: {{YourFieldName}}.

When inserting a Dynamic Field into your email, you want the Dynamic Field to be a field on the table in your database that the HTML can reference. For example, you could have a Dynamic Field for Customer Name to display to make the email more personal, or for Price and/or date if there is a limited time offer. Be sure that the Dynamic Field is a field on the database that your HTML Template can reference.

To Setup a Dynamic Field

  1. Place your cursor where you would like the Dynamic Field to be inserted.
  2. Type the opening curly brackets: {{
  3. Type the field name you wish to have populated.
  4. Type the closing curly brackets: }}
    1. Result should be something like: {{YourFieldName}}
  5. If you wish to overwrite/hard-code the value of the Dynamic Field you just created, redirect to the Dynamic Fields Tab.

Note

Dynamic Fields cannot have any white space in between characters.

Note

The Dynamic Fields will not be active in test emails from the HTML Editor unless you overwrite/hard-code a value. The Dynamic Field will only be functional in emails sent through SendEx.

The HTMLEditor Menu and Toolbar

Icon

Description

Menu Equivalent

Creates a new HTML template.

–

Opens a saved HTML template.

–

Saves the current HTML template

–

Allows you to select how and where the template is saved.

–

Opens a template from your local machine.

–

Prints the email layout

–

Duplicates the HTML Template.–

Allows you to sequentially undo up to the last 20 actions.

Edit > Undo

Allows you to sequentially redo up to the last 20 actions.

Edit > Redo

–

Adds the content to the clipboard and removes it from the layout.

Edit > Cut

–

Copies the selected content.

Edit > Copy

–

Pastes the clipboard content.

Edit > Paste

–

Pastes the content in text format.

Edit > Paste as Text

--

Selects the entire layout.

Edit > Select All

–

Opens the Find and Replace window to look for matching text, remove and replace all instances with given text.

Edit > Find and replace

Opens the Insert/Edit Link window to configure hyperlinks.

Insert > Link

Opens the Insert/edit image window to configure images.

Insert > Image

–

Opens the Insert/edit video window to configure videos.

Insert > Media

Opens the Unsubscribe window, which allows you to insert a link for a user to unsubscribe from emails.

Insert > Unsubscribe Link

Opens the View in Browser window, which allows you to insert a link that enables the user to view your email in a web browser.

Insert > View in Browser Link

–

Opens the Symbols window and allows you to choose a listed symbol to insert into your email layout.

Insert > Special character

–

Inserts a horizontal line.

Insert > Horizontal Line

–

Inserts an anchor link in the HTMLEditor.

Insert > Anchor

–

Gives option for inserting various date/time formats within the HTMLEditor.

Insert > Date/time

–

Inserts a non-breaking space in the HTMLEditor.

Insert > Nonbreaking space

–

Allows hidden characters to be seen.

View > Show invisible characters

–

Allows HTML blocks to be seen.

View > Show blocks

–

Allows specific visual aids to be seen.

View > Visual aids

Directs you to Preview mode where you can see what the email will look like when opened by a recipient.

View > Preview / Send Test Email

Toggles bold text.

Format > Bold

Toggles italics text.

Format > Italic

Toggles underlining text.

Format > Underline

Inserts strike-through.

Format > Strike Through

Inserts superscript.

Format > Superscript

Inserts subscript.

Format > Subscript

Toggles to page where you can write HTML code for the template.

–

Gives you different size headers to choose from.

Format > Formats > Headings

Gives you different HTML blocks to choose from.

Format > Formats > Blocks

Gives you different options to align text.

Format > Formats > Alignment

–

Removes all formatting from the panel.

Format > Clear Formatting

–

Inserts a table into the HTMLEditor.

Table >Table

–

Opens Table Properties window to configure the selected table.

Table > Table properties

–

Removes the selected table.

Table > Delete table

–

Gives options to configure the cells in the selected table.

Table > Cell

–

Gives options to configure the rows in the selected table.

Table > Row

–

Gives options to configure the columns in the selected table.

Table > Column

–

Opens the HTML Source Code editor.

Source Tab

Allows a test email of the HTML template to be sent.

Tools > Preview / Send Test Email

–

Redirects to the Click Tracking tab.

Link Tracking Tab

–

Redirects to the Text Only Version tab.

Plain Text Tab

–Redirects to the Dynamic Field tab.Dynamic Fields Tab

–

Opens the HTMLEditor help files.

Help > HTMLEditor Help