Company Blog Support
Frank Hagan
posted

Contents

    Back to Top

    HTML Email

    About

    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:

    HTML Email 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:

    1. Send From (the ONTRAPORT user name the email is sent from)
    2. Email From (the ONTRAPORT user's email address)
    3. Send Email To (the contact's email address by default)
    4. 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).

    Top portion of the HTML Email editor

    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)

    Source and Preview buttons

    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)

    Clear Format button

    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)

    Insert Anchor button

    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:

    Link to Anchor Name

    Maximize Editor Button (bottom row)

    Maximize editor button

    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

    1. Type the text you want to use for the link, such as "View this Email on the Web", and highlight it.

      hilight-hyperlink.png
    2. 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.

      link-other.png

     

    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.

    Header information

    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:

    HTML Header and Body Code in Editor

    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

    Copy from HTML button

    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.

    Other Resources

    Articles in this section

    Have more questions? Submit a request

    Comments

    Powered by Zendesk