In this tutorial, we’ll be creating a custom HTML email in Intercom using a Postcards email builder template.
Prerequisites
- A Designmodo account
- An Intercom account
- A text editor that can open HTML files
Video Version
Steps
1. Create a Postcards template with the required Intercom tags
The first thing we need is a Postcards template with the required Intercom tags added to it. We want to add the tags in this step so we don’t have to edit the code later.
The required Intercom tags are content and unsubscribe URL. They look like:
{{ content }}
{{ unsubscribe_url }}
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:
We’ll be adding the content tag to the Header section.
Click the Header image and that’ll open up the side menu. Then select “Text.”
Replace the contents in the editor with the content tag.
Press “Done” at the top of the side menu.
Scroll down the template until you reach the footer and then click it and then click “Column #2.”
Scroll down until you find where the email is defined and then replace the values to the unsubscribe tag values.
Next press “Done” at the top of the side menu.
All the changes we need to make in this template are done.
Press the “Export” button in the top right corner of the app and then press “Download as zip.” Make sure you have the “Host images online” option selected so you don’t have to download and manually upload the images yourself. Your screen should look like this:
Download and extract the file into a folder you can work with. It should look something like this:
2. Create a new email template in Intercom
In the Intercom dashboard, select your profile icon on the bottom left side and select “Settings.”
In the settings page, click the “Outbound” menu option and then select “Email templates.”
In the email templates page, select “Create new template.”
That’ll open a new page with a text editor where you can add HTML code to create your template.
Open your index.html file from Postcards in a text editor. I’m using Visual Studio Code so my file looks like:
Copy everything in this file and paste it in the Intercom editor. Give your template a title and then press “Save.”
Now your template is ready to go!
I sent myself a test email and it looks like:
What we covered
- How to create and export a Postcards template with Intercom email tags.
- How to create a custom HTML email template in Intercom.