1. Home
  2. Postcards
  3. Integrations
  4. How to Upload an Email Template in Customer.io

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:

How to Upload an Email Template in Customer.io

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.

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

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

Replace the text in the editor

Then press “Done.”

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

Column #2

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

Email inputs

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.

Host images online

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

Create a new messaging layout in customer.io

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:

Start from scratch

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

Text editor

Give your layout a name then press create.

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

Visual Studio Code

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

Customer.io editor

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

Your screen should look like this:

Customer.io email editor

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.

Done editing

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

The final preview looks like:

final preview

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
Updated on April 9, 2020
Was this article helpful?

Related Articles