About custom HTML email upload

Overview

The custom HTML upload feature is designed to make it easy for you to upload email message content if you have a lot of emails prepared in HTML format or you are transferring your email content from another platform to Ortto.

This page provides information on the requirements for custom HTML files and how to troubleshoot issues that may arise.

You upload your custom HTML file at the Template step of the email creation wizard. For more information on uploading a custom HTML file, including requirements for A/B testing, read the Template section of Creating an email campaign.

You can upload a single HTML file, or a ZIP file containing 1 HTML file and up to 100 images. When you upload a ZIP file containing images, the images are uploaded to Ortto’s content delivery network (CDN) to serve those images to recipients when they view your email message.

Email messages added to journeys and playbooks can also be created using an HTML or ZIP file.

The Liquid syntax for the special footer links (unsubscribe, preferences, view online, and forward) can be found under Liquid special links in the Liquid guide.


HTML email upload prerequisites

HTML email files and ZIP files must meet the following prerequisites:

  • An HTML email file cannot be bigger than 500KB.
  • Uncompressed image files contained within a ZIP file cannot be collectively larger than 6MB, with each uncompressed image no larger than 1MB.
  • If the HTML file contains Liquid tags it must contain a {{ urls.unsubscribe }} tag to include an unsubscribe link. Learn more about using Liquid syntax in your campaign content under Personalizing campaign content with Liquid.
  • The HTML file you upload must meet the multipurpose internet mail extension (MIME) 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

Example Content step showing the expandable sections for editing HTML 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.

NOTE: If you are A/B testing this email, you will need to upload 2 HTML files (1 for each Content A and Content B), and edit each accordingly.


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):


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.

Issue

Resolution

Uploaded file is too large

Each HTML email file must not exceed 500KB.

Uncompressed image files contained within a ZIP file cannot be collectively larger than 6MB, with each uncompressed image no larger than 1MB.

Uploaded file is NOT of a valid MIME type

The HTML email file you upload must meet the multipurpose internet mail extension (MIME) standard, containing only plain text and/or HTML encoding.

Invalid Liquid tag/tags

Should your HTML email file contain invalid Liquid syntax, an error message will display the invalid entries. Learn more about using Liquid syntax in your campaign content under Personalizing campaign content with Liquid.

No multimedia file upload for HTML content

At present, Ortto does not offer multimedia file upload for content such as images contained in your HTML email file. You need to upload a ZIP file containing images, or host the images/video, etc. external to Ortto and link to it within your HTML file.

Images referenced in the HTML file (ZIP upload) cannot be found

Firstly, ensure that you have the correct number of images included in your ZIP file as required in your HTML file. For example, if you reference 3 images in your HTML file but only 2 can be found within the ZIP file, you will receive an error.

You may need to check that you have referenced the images correctly in the HTML file according to their location in the ZIP file. For example, the path for the image will ideally be rooted in the top level of the directory (ZIP file), where you have:

  • email.html — your HTML email message file
  • images folder — the folder containing your email message images

The images would be referenced in your HTML file something like: <img src="images/your-image.png" />

You may also need to check the spelling of your file names, including differences in capitalization, to ensure the reference matches the image file name.