How to Upload an Email Template in Customer.io

In this tutorial, we’ll be creating a custom message layout in customer.io using a template created in Postcards.

Prerequisites

• A Designmodo account
• A customer.io account
• Ability to open HTML files

Steps

1. Create a template in Postcards with the required customer.io tags

The first thing we need is a Postcards template with the required customer.io tags added to it.

We want to add the required tags in the Postcards interface because otherwise, we would have to edit the code.

The required tags from customer.io are:

{{content}}

{% unsubscribe_url %}

The content tag is meant to be replaced with the email’s content, and the unsubscribe URL is the link to unsubscribe.

In the Postcards app, I’ve selected the template.

Let’s add the content tag in the Header.

Click on the Header section to open the menu on the left side, then click the text section.

Replace the text in the editor with the content tag like this:

The changes will be automatically saved after a few seconds. Just look at the green dot next to the project name in the upper left corner — that’s the indicator that your changes have been saved.

Next, scroll down to the Footer and click it.

You will see the "Unsubscribe" link in the footer. After you click it, the pop-up option to enter a URL will appear.

Change it, and write the URL tag( {% unsubscribe_url %} ), then click the "check" icon and save it.

Note: Always wait a few seconds so the orange dot becomes green!

These are all the changes we need to make. Now press “Export” in the top right corner and then “Copy Email Code.”

Make sure you have the “Host images online” option selected so you don’t have to manually upload every image.

After you successfully copy the HTML, a pop-up with confirmation will appear.

In addition to this, there is another way how can you export the HTML, and that's the "Download as .zip" option.

As previously said, go to the "Export" button in the upper right corner, and select "Download as .zip".

Make sure you have the “Host images online” option selected as before.

After it's successfully downloaded, extract the files:

You will get the "index.html" file. Open it in a text editor of your choice (Sublime, Visual Studio Code, Notepad++, etc.). In this example, I’ll use the simple Notepad.

Your file should look like:

2. Create a new messaging layout in customer.io

In your customer.io dashboard, go to the Content page, then click “Email layouts” like this:

In the "Email Layouts" page, in the upper right corner, press the button "Create Layout."

In the new page, select “Start from scratch.”

Give your layout a name, then press "Create Layout".

That will take you to the editor page with a text editor to add code.

If you used the first option, "Copy Email Code", the HTML was copied to our clipboard; just press CTRL + V, then replace the content in the customer.io editor with it.

If you used the second option "Download as .zip", then go to your text editor, select all (CTRL + A), and then copy(CTRL + C), then replace the content in the customer.io editor with it.

Your screen should look like this:

Next, press “Save changes.”

Now you can use this layout in your campaigns or broadcasts!

The final preview looks like:

Worth mentioning:

When you create a campaign and select a layout (template), you'll see a split-screen view: the editor on the left and your template on the right. Anything you type in the editor will appear in the section of your template marked with the {{content}} tag.

Example:

What we covered

1. How to create a template in Postcards with customer.io tags.
2. How to export a Postcards template.
3. How to create a custom HTML layout in customer.io