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

How to Upload an Email Template in SendGrid

In this tutorial, we’ll be creating a custom email design in SendGrid using the HTML code from a Postcards template.

Prerequisites

Steps

1. Create a Postcards template with SendGrid tags

The first thing we need is a Postcards template with SendGrid tags. We want to add tags in this step because otherwise, we would have to dig through the code to make changes. The easiest way to add tags is to add them through the Postcards template.

In the Postcards app, make a template. Mine is made up of a Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1.

How to Upload an Email Template in SendGrid

The tags we’ll be adding in this tutorial are the address, city, state, zip, and unsubscribe. We’ll be adding the tags to the footer.

They look like:

{{Sender_Address}}, {{Sender_City}}, {{Sender_State}}, {{Sender_Zip}}, {{{unsubscribe}}}

Click on the footer to open up the menu to change the content. Press “Column #2” and find the text box that prints out the address like this:

Open edit menu

Update the text to use the address tags:

Address tags

Next, scroll down to find where the email is set.

Update the text to “Unsubscribe” and in the URL set it to the unsubscribe tag:

Unsubscribe

Now press the “Done” button at the top of the menu and press the “Export” button in the top right corner.

Press “Download as zip” and make sure you have the “Host images online” option selected so you don’t have to download and deal with the images manually.

Download as zip

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

Extract your file

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

2. Create a custom HTML email in SendGrid

In your SendGrid dashboard, go to the “Design Library” page and select “Create Email Design.”

Create a custom HTML email in SendGrid

Then select “Code Editor.”

Code Editor

That will take you to a page that looks like this:

Visual Studio Code

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

SendGrid editor

Copy everything in this file and delete everything in the SendGrid editor then paste it into the SendGrid editor like this:

Copy everything

Now your template is ready to go!

3. Send yourself a test email

To send yourself a test email, click the settings button in the left side of the screen:

Send yourself a test email

This opens up the settings where you can fill out the settings, send yourself a test email, and see the available tags.

Available tags

Fill out the subject and in the from email, make sure you don’t use a gmail or similar type of email, the test email won’t send. You have to use a different domain like email.com.

After that send yourself a test email.

Mine looks like:

test email

You may have noticed that the tags aren’t changed to the proper values. This is because this is just a test email, to see the updated tag values you have to send yourself an actual email from SendGrid.

After you save your email in SendGrid, you’ll be able to use this template for future emails.

To send a single send email to see how the email looks like with the tags updated, visit this link.

What we covered

  1. How to create a Postcards template.
  2. How to add SendGrid tags to a Postcards template.
  3. How to add HTML code to a SendGrid custom HTML email.
  4. How to send yourself a test email using SendGrid.
Updated on March 23, 2020

Was this article helpful?

Related Articles