About custom HTML email upload

Overview

The custom HTML upload feature allows you to easily add email content in HTML format, whether you're uploading multiple emails or transferring content from another platform to Ortto.

This guide covers the requirements for HTML files and troubleshooting tips.

Uploading HTML

To upload your custom HTML file, go to the Template step in the email creation wizard.

You can upload a single HTML file or a ZIP file that includes one HTML file and up to 100 images. When you upload a ZIP file with images, they are automatically stored on Ortto’s content delivery network (CDN) and will be served to recipients when they open your email.

You can also create email messages for journeys and playbooks using an HTML or ZIP file.

Learn more about the Liquid syntax for special footer links (unsubscribe, preferences, view online, and forward).

HTML email upload prerequisites

To upload an HTML or ZIP file, make sure it meets these requirements:

• The HTML file must be 500KB or smaller.
• Images in a ZIP file must total no more than 6MB, with each image under 1MB.
• If using Liquid tags, the HTML file must include the {{ urls.unsubscribe }} tag for an unsubscribe link.
  • Learn more about using Liquid syntax.
• The HTML file must follow the MIME (multipurpose internet mail extension) standard, containing only plain text and/or HTML encoding.

How to make custom HTML email elements editable

You can add tags to elements in your custom HTML email file which enable you to edit those elements when creating an email message.

Specifying elements as editable allows you to make smaller changes to your file, such as if you use the same HTML email template regularly but just want to change the text in a heading or replace an image. 

The tag you add to make an element editable is: data-ortto-editable.

To make it clearer which elements can be or are being edited, you can give the tag a label by appending: ="<name>".

For example: data-ortto-editable="hero-image". So in your HTML file, an image element might look like this: <img data-ortto-editable="hero-image" src="image.url">.

The following types of HTML elements support the data-ortto-editable tag:

• a
• h1
• h2
• h3
• h4
• h5
• img
• p
• span
• td
• th
• tr

When you upload your HTML file containing the Ortto tags at the Content step when creating an email, you’ll see expandable sections where you can edit the elements.

Each time you make an edit, you need to click Apply changes to HTML. Note that this won’t change the content of your original HTML file, but it will ensure that the changes you make are applied to the current email message. 

Once you’ve made changes, you can proceed to the next step. At this stage, you might like to send a test to check your edits.

Adding reactions to the email

Reactions can also be supported in HTML emails by including the liquid merge tags for the reactions in the email's HTML.

The following are the merge tags that will generate the URLs for the corresponding reaction:

• Love: {{ urls.reactionlove }}
• Like: {{ urls.reactionlike }}
• OK: {{ urls.reactionok }}
• Dislike: {{ urls.reactiondislike }}
• Angry: {{ urls.reactionangry }}

Below is a sample HTML demonstrating how to format the reactions. The image sources use our native reaction images, but you can replace them with images of your choice.

 
<table align="center" cellpadding="0" cellspacing="0" style="margin: 0 auto; text-align: center;">
  <tr>
    <td style="padding-right: 10px;">
      <a href="{{ urls.reactionlove }}">
        <img src="https://ic.autopilotapp.com/r/1-000000-40-40.png" alt="Love" width="40" height="40" />
      </a>
    </td>
    <td style="padding-right: 10px;">
      <a href="{{ urls.reactionlike }}">
        <img src="https://ic.autopilotapp.com/r/2-000000-40-40.png" alt="Like" width="40" height="40" />
      </a>
    </td>
    <td style="padding-right: 10px;">
      <a href="{{ urls.reactionok }}">
        <img src="https://ic.autopilotapp.com/r/3-000000-40-40.png" alt="OK" width="40" height="40" />
      </a>
    </td>
    <td style="padding-right: 10px;">
      <a href="{{ urls.reactiondislike }}">
        <img src="https://ic.autopilotapp.com/r/4-000000-40-40.png" alt="Dislike" width="40" height="40" />
      </a>
    </td>
    <td>
      <a href="{{ urls.reactionangry }}">
        <img src="https://ic.autopilotapp.com/r/5-000000-40-40.png" alt="Angry" width="40" height="40" />
      </a>
    </td>
  </tr>
</table>

Sample HTML email templates

You can download our free sample templates below. They include Ortto's editable tags. Note that in some browsers you may need to right-click and choose Download Linked File or Save Link As (depending on your browser):

• Brand awareness template
• Short introduction template

HTML email upload troubleshooting

This table lists some common issues you may encounter when uploading an HTML file for your email message content, and tips for resolving the issues.