Import custom coded emails from your computer

Instead of starting with a saved template and adding content to it, you can import custom coded HTML emails, either by uploading the email files from your computer, or importing from the web.

Prepare the email files

If your custom coded HTML references external files such as images or CSS, the simplest file and folder structure to work with is:

• The HTML file.
• The CSS file/s.
• All your images in a single folder.

To upload your email from your computer, you will first need to compress the images and CSS files into a single ZIP file. To do so:

• On macOS, select the folder containing your images and CSS. Right-click, then select Compress.
  
• On Windows, right click the folder containing your images and CSS, and select Send to > Compressed (zipped) folder.
  
  

Import custom coded emails from your computer

The method for importing a custom coded HTML email from your computer is different depending on whether you are working on a campaign orjourney .

Importing campaign HTML

1. Create a new campaign, then click Design email.
2. Click Import HTML.
3. Create a new journey, then follow the on-screen instructions until you reach the "Choose a starting point" screen.
4. Click From my computer.
5. Below "HTML page", click Select file to select the HTML file from your computer.
   • Optional: if you have a ZIP file to import, click Select file next to "Zip file with all other images and/or CSS files" to select the ZIP file from your computer.
6. In most cases you'll want to select the option Move my CSS inline. This prevents styles being stripped out by some email clients.
7. Click Start import to upload the custom coded email.

Importing HTML for journey emails

1. Create a new journey , then follow the on-screen instructions until you reach the "Choose a starting point" screen.
2. Click Import HTML.
3. Select Import from my computer.
4. Below "HTML page", click Choose file to select the HTML file from your computer.
   • Optional: if you have a ZIP file to import, below "All other image and CSS files" click Choose file to select the ZIP file from your computer.
5. In most cases you'll want to select the option Move my CSS inline. This prevents styles being stripped out by some email clients.
6. Click Import to upload the custom coded email.

Preview and edit the imported email

The process for previewing and editing imported HTML also depends whether you are working on a campaign, or journey.

Previewing and editing campaigns

For campaigns, if the files upload successfully, you'll see a preview of your email alongside an editor window.

The Assistant will pop up if there are any potential problems in the code.

From here, use the computer and mobile icons to see how your email will look on different devices, and click Send a test email to make sure everything looks as expected.

The editor window on the right is where you can quickly make and review changes to your code. If you need to update and re-import the HTML, open up the three-dot menu at the top of the screen and click Import again.

You can discard any changes you aren't happy with by clicking Back to checklist or simply leaving the editor without saving.

Once you're done, click Save & next to save your changes and return to the checklist.

Previewing and editing journey emails

For journey emails, if no issues are found in the code after importing, you'll see a notification that the email has been successfully imported.

Use the Preview it and send a test email links, pictured above, to preview the email and send yourself a test to make sure everything looks as expected.

From here, if you aren't happy with the preview you can update the HTML file on your computer and Re-import the campaign. Alternatively, if you've imported HTML for a campaign, you can select edit the HTML and click Next to access our in-app HTML editor.

The next step is to format the plain text version of your imported email.

Plain text editing for campaigns

The text version is automatically generated whenever you save the imported HTML. Click Manage plain text version right under the image of your campaign to view or customise it.

The generated text does make some intelligent guesses about text layout, but it's wise to read it over and adjust where necessary. Use the icons at the bottom of the editor to add personalization or important links, such as unsubscribe links.

When you're done, click Save to return to the checklist.

Plain text editing for journey emails

When you are creating a journey email, the plain text version is immediately loaded after you confirm you are happy with the import preview. To edit the plain text version, click edit text version in the "Content" section to be taken to the plain text email editor.

When you see the plain text email editor, click import it from your HTML to bring in text from your HTML version.

Although this makes some intelligent guesses about how text should be laid out, you should still read it over and make any appropriate edits. Alternatively, you can enter your own plain text version directly into the text editor.