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 them.

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 created a template that consists of a Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1. It looks like this:

Let’s add the content tag in the Header.

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

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

Then press “Done.”

Next, scroll down to the Footer and click it, then open up “Column #2” to edit the footer link.

Scroll down until you find the email inputs and replace the text with “Unsubscribe,” and the URL with the unsubscribe tag like this:

These are all the changes we need to make. Now press “Done” and “Export” in the top right corner and then “Download as zip.”

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

Extract your file into a folder you can work with. It should look something like:

2. Create a new messaging layout in customer.io

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

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

Give your layout a name then press create.

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

Open your index.html file with a text editor. I’m using Visual Studio Code so my editor looks like:

Copy everything in this file then replace the content in the customer.io editor with it.

Your screen should look like this:

Next press “Save changes.”

You can also press the “Preview” tab to see a preview of your changes.

After you press save, a new button will appear called “Done editing” which will make this template finished.

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

The final preview looks like:

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