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

• A Designmodo account
• A SendGrid account
• A text editor that can open HTML files

Steps to Follow

Step 1: Selecting the Template

Welcome to the Postcards app tutorial! Let’s get started by opening the template you want to work on — just double-click it.

Once your template is open, you can start customizing it. Adjust it to your needs and make any changes required to match your requirements.

Step 2: Navigating to the Export Option

Now that your template is ready, let’s move on to exporting it to your SendGrid account. In the top right corner of the Postcards app, click the Export option, then select "Send to Email Platform".

A pop-up window will appear, showing a variety of one-click integration options.

Step 3: Choosing SendGrid Integration

This is where SendGrid comes in. Select the SendGrid option from the pop-up window. Then a new pop-up will appear asking you to enter your API key.

Don’t worry if you don’t have an API key yet. The “API key” text is a clickable link that will take you directly to the API section in your SendGrid account, where you can create one.

Step 4: Generating Your API Key

In the API section of your SendGrid account, you’ll see a “Create API Key” button. Click on it.

Give your API key a name — for this tutorial, let’s call it “Postcards API”. Then set the required permissions. To ensure the SendGrid integration works correctly, enable Full Access for the Design Library. Select Custom Access, scroll down to Design Library, and set it to Full Access.

We also recommend granting Full Access as a fallback to avoid any permission issues during export.

Scroll down and choose “Create and View”.

And just like that, you’ve got your API key. Copy it, as you’ll need it in the next step.

Step 5: Connecting SendGrid to Postcards

With the API key copied, go back to the Postcards app and paste it into the designated field. There is an option to name the integration, but we’ll skip that for now. Click “Connect,” and your Postcards app and SendGrid account will be successfully connected.

After successfully exporting your template to SendGrid, a confirmation pop-up window will appear. Click the “SendGrid Template” link to open your template in SendGrid.

Your page should look like:

Your journey of exporting email templates from Postcards to SendGrid is now complete. It’s a straightforward process, especially with the one-click integration feature.

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

Steps

1. Create a Postcards template with SendGrid tags

First, we need a Postcards template with SendGrid tags. We add the tags at this stage to avoid having to manually edit the code later. The easiest way to do this is directly in the Postcards template.

In the Postcards app, create a template. In my case, it consists of Header 7 and Footer 1.

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 the “TEXT” element and find the text box that prints out the address like this:

Update the text to use the address tags:

Next, find where the email is set.

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

Now, wait a few seconds for the auto-save.

Once your design is ready, the next step is to export the HTML from Postcards so you can import it into SendGrid. Postcards give you two ways to do this through the Export menu:

• Copy Email Code — this is the quickest option. It copies clean, production-ready HTML directly to your clipboard, so you can paste it right away into SendGrid:
  • Click Export in the top-right corner.
  • Select Copy Email Code.
  • The full HTML will be copied automatically to your clipboard.

• Download as ZIP — this downloads the full HTML package of your email, including the index.html file. Make sure "Host images/fonts online" is enabled before downloading, unless you plan to use your own hosted image and font files.
  • Click Export in the top-right corner and select Download as ZIP.

• Click the "Download as ZIP" button.

• Open the ZIP and extract the contents into a folder.

• Inside the extracted folder, locate the index.html file.
• Open index.html in a text editor such as Notepad, Notepad++, or Visual Studio Code.
• Copy the full HTML code from that file. (CTRL + A - to select all, then, CTRL + C - to copy)

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

Now we have everything we need for the custom SendGrid email campaign.

2. Create a custom HTML email in SendGrid

In your SendGrid dashboard, go to the “Design Library” from the left-hand menu and select “Create Email Design”.

Then select “Code Editor.”

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

Next, we’ll use the code from our Postcards template and paste it into the SendGrid editor, like this:

Now your template is ready to go!

3. Send yourself a test email

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

This opens the settings where you can configure the email, send yourself a test email, and view the available tags.

Fill out the subject and the “from” email. Make sure you don’t use a Gmail or similar address, as the test email won’t be sent. You need to use a custom domain email, like email.com. In this example, I used a temporary test email.

After that, send yourself a test email.

Mine looks like:

You may have noticed that the tags are not replaced with actual values or may not be displayed. This is because this is just a test email. To see the updated tag values, you need to send a real email from SendGrid.

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

To send a single email and see how it looks with the updated tags, 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.