The HTML Email editor provides a visual editor with greater control over the underlying HTML code than the ONTRAmail editor. In most cases the ONTRAmail editor will create standards-compliant email messages much faster and easier than the HTML Email editor. However, you may want to use the HTML Email editor for:
- HTML email templates you purchase or obtain separately
- Long email content that is mostly text with few images
- Table based layouts you are adapting from another system
HTML Email Editor Basics
Open the HTML Email editor by navigating to Contacts > Messages and clicking the New Message button. Select the HTML Email editor icon:
You can also select the HTML Email editor whenever composing a new message, for example in a workflow in a sequence Email Step or the Contacts Actions > Email function.
The HTML Editor includes the following fields at the top:
- Send From (the ONTRAPORT user name the email is sent from)
- Email From (the ONTRAPORT user's email address)
- Send Email To (the contact's email address by default)
- Subject Line (the subject line that appears in the recipient's inbox)
Next is the Edit HTML Header (Advanced) section. It expands to accommodate information to be added to the "HEAD" of the email (usually found in an HTML email template).
The editor buttons are next, presented in three rows. Hovering over the buttons reveals the intended use. Most are self-explanatory but these deserve special mention:
Source and Preview buttons (top row)
The Source button toggles between raw HTML code and the visual representation your contact will see in their inbox. When pasting in HTML source code remember to click the Source button first. All the other editing buttons will fade to light grey and become inactive. Paste the code and click the button again to toggle to the visual view. The Preview button next to it opens a new browser window with the email rendered in it. Note that this preview mode does not replace merge fields with data.
Clear Formatting Button (middle row)
The Clear Formatting button removes selected HTML code from the selected text. For example, it will remove the italics added to header text, but leave the text formatted as header text.
Insert Anchor Button (middle row)
Highlight the text you want to use as the destination of a link in the email, or position the cursor above the text if desired, and click the flag icon. Name the Anchor. You can now use this Anchor Name in a hyperlink elsewhere in the email. This is often used in long emails with a call to action near the bottom; set the Anchor at that call to action and link to it from another point - perhaps with wording like "Satisfied? Click HERE to see our special offer!" When creating the link choose "Link to anchor in text" in the Link Type dialog and select the Anchor Name:
Maximize Editor Button (bottom row)
Click this button to expand the editor window to fill the browser viewport. Click it again to revert to the normal view.
The Maximize button expands the editor window to fill the browser viewport.
Using Merge Fields
Merge fields can be inserted into your email messages to personalize them. Nearly every field in the Contact Record is available as a merge field, including the contact's name, address, the last invoice amount, etc. In addition, all of the ONTRApages and legacy Landing Pages are listed to be included as personalized URLS, or PURLS.
See our article Formatting Merge Fields for information on formatting options and the default value you can display if the Contact Record field is empty.
Merge Field Use Case: Creating a View on Web Link
Type the text you want to use for the link, such as "View this Email on the Web", and highlight it.
Click the link icon (1), select the < other > protocol (2), and type the merge field [Hosted_Email_Link] into the URL box (3). Click OK.
Inserting an HTML Email Template
HTML email templates are usually provided in one file containing the raw HTML. At the top of the file you may find "header" or <head> information. Copy and paste that information into the Edit HTML Header (Advanced) section.
Click the Source button in the main editor section and paste the rest of the HTML into the editor window. The HTML Email editor will strip out the unnecessary parts of the code that are redundant. The editor window will look something like this:
You can now finish editing the email in either HTML Source or, by clicking the Source button again, in visual mode.
Limitations of the HTML Email Editor
- Links render as blue underlined links in most cases.
- There is no error checking, allowing you to overwrite responsive design and otherwise bungle your way to a hot mess (which is why we created ONTRAmail!)
Creating a Plain Text Email Version
Create a plain-text version of your email by clicking the Copy From HTML button in the lower section titled Plain Text Email:
This format allows recipients who use older or simpler email clients to view your message. Including a text version is also important for the delivery of your message.
If the plain text version is not present or does not match the HTML version of your message, the email will likely be sent to spam or discarded. Because of this, it is a best practice to click the "Copy from HTML" button after you write or edit any email, then clean up the formatting so it looks nice.