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:

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.

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

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.

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

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.

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

Your file should look something like:

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

In the modal that appears, select “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:

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

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:

After that press the “Create” button.

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:

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.