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

How to Upload an Email Template in Mailgun

In this tutorial, we’ll be creating an email template in Postcards and using the code from that template to create a custom email template in Mailgun.

Prerequisites

  • A Designmodo
  • A Mailgun account.
  • A text editor that can open HTML files.

Video Version

Steps

1. Create a template with Mailgun template variables

The first thing we need is a Postcards template with Mailgun variables in it.

We want to add Mailgun template variables in this step because otherwise, we’ll have to dig through the code to make changes. We can instead use the Postcards interface to add our template variables to make it easier.

Mailgun template variables allow you to add dynamic content pieces to your emails to personalize it so each email you send has some unique elements to it.

The template variables we’ll be using in this example are the recipient’s first name and the unsubscribe URL. They look like:

%recipient_fname%

%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:

How to Upload an Email Template in Mailgun

Next, we’ll add the first name variable to the Header area.

Click the Header section and that’ll open the options to edit the Header. Click the Title submenu item.

Header

In the text editor for the title section, change the text to add the first name variable like:

Text editor

After that press the green “Done” button.

Next, scroll to the Footer and click it. Open the “Column #2” column to edit the email which we will turn into the unsubscribe link.

Footer

Change the text to “Unsubscribe” and add the unsubscribe URL variable to the URL input.

URL variable

Press “Done” and save your template if you wish.

Now we have to export this file.

Press the “Export” button in the top right and press “Download as zip.”

A modal will pop up and make sure you have the “Host images online” option selected so you don’t have to download and update each image manually.

Export

Download the zip folder and extract the file somewhere you can work with.

Your file should look something like:

Download the zip

Now we have everything we need to create a custom email template in Mailgun.

2. Create an email template in Mailgun

In your Mailgun dashboard, under the Sending menu, select “Templates.”

Then press “Create Message Template.”

Create an email template in Mailgun

In the modal that appears, select “Blank template.”

Blank template

That’ll open the Mailgun email editor page with name, description, and editor inputs. Enter your name and description and then add the Postcards code to the code editor section.

Open the index.html file you just downloaded from Postcards in a text editor. I’m using Visual Studio Code so my file looks like:

Visual Studio Code

Copy everything in this file and paste it into the Mailgun code editor. Your screen should look something like:

Mailgun code editor

If your create button is greyed out, check if your name has capital letters or invalid characters, those aren’t allowed.

You can press the “preview” tab to see a preview of your email:

Preview

After that press the “Create” button.

Create

At this point, your template is ready to go! You can send yourself a test email using the Mailgun API to see if it’s working as intended.

I sent myself a test email to my Gmail and this is what it looks like:

Mailgun API

You may notice that the recipient’s first name isn’t showing. This is because this is sent to a test sandbox and not to a mailing list so there is no first name value. But the unsubscribe URL variable works and takes the user to an actual unsubscribe page.

What we covered

  1. How to create a Postcards template.
  2. How to add Mailgun variables to a Postcards template.
  3. How to export a Postcards template.
  4. How to create a custom email template in Mailgun.
  5. How to add the Postcards template code in a Mailgun email template.
Updated on March 11, 2020
Was this article helpful?

Related Articles