1. Home
  2. Postcards
  3. Integrations
  4. Export the Postcards Email Template to SendGrid

Export the Postcards Email Template to SendGrid

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

We have released new email templates for SendGrid.


Video Tutorial


Steps to Follow

Step 1: Selecting the Template

Welcome to the Postcards app tutorial! Let’s kick things off by opening up the newsletter you’d like to work on. It’s as simple as giving it a double click.

Export the Postcards Email Template to SendGrid

Once your newsletter is open and ready to go, you can start making it your own. Tailor it to your liking and make all the customizations you wish to make it align with your requirements.

Step 2: Navigating to the Export Option

Navigating to the Export Option

Now that your newsletter is all spruced up, let’s move towards getting it over to your SendGrid account. Find your way to the top right corner of the Postcards app and hover over the export option. Give it a click and then you’ll see an option for integrations, click on that as well. A pop-up window will show up on your screen presenting you with a variety of one-click integration options.

Step 3: Choosing SendGrid Integration

Choosing SendGrid Integration

This step is where SendGrid enters the scene. From the pop-up window, go ahead and select the SendGrid option. Once you do this, another pop-up window will appear asking you to insert your API key.

SendGrid API

Don’t worry if you don’t have an API key yet, the term “API key” is actually a clickable hyperlink that will whisk you away to the API section within your SendGrid account to help you create one.

Step 4: Generating Your API Key

Generating Your API Key

In the API section of your SendGrid account, there’s a ‘Create API Key’ button waiting for you. Click on it and then give a name to your API key. For this tutorial, let’s name it ‘Postcards API’.

API key

Now, set the permissions as required and proceed by clicking on ‘Create & View’. And just like that, you’ve got yourself an API key. Copy this key as you’ll need it in the next step.

Step 5: Connecting SendGrid to Postcards

Connecting SendGrid to Postcards

With the API key copied, head back over to the Postcards app. Paste the API key into the designated section that awaited you. Although there’s an option to name this integration, we’ll skip that for now. Click on ‘Connect’ and your Postcards app and SendGrid account will become friends, connecting seamlessly.

Step 6: Exporting and Previewing Your Template

Now the magic happens – your template gets exported into your SendGrid account. Once the connection is established, a hyperlink will show up, directing you to the templates section within your SendGrid account.

Exporting and Previewing Your Template

Here, you’ll see your freshly exported newsletter sitting pretty. Give it a preview to see how it mirrors the design you created within the Postcards app.

Give it a preview

Your journey of exporting email templates from Postcards to SendGrid has been successful. It’s really that straightforward, especially with the one-click integration feature easing the process.

Below is the previous method for exporting an email template from Postcards to SendGrid.

Steps (Legacy)

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:


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 May 16, 2024
Was this article helpful?

Related Articles