How To Vuild A Html Email Template

How to use custom HTML email templates with SendGrid

Last updated September 11, 2017

Congratulations! Yous've just downloaded your set of responsive HTML email templates and are ready to start sending professional looking emails from your ESP (Email Service Provider). At present you need to put them into SendGrid so y'all can utilize them.

SendGrid is a dandy developer solution for an ESP and includes features for sending marketing campaigns, transactional emails and tracking deliverability.

With SendGrid yous tin either store your HTML every bit a reusable template or you can send it as part of your API request.

How to use custom e-mail templates for SendGrid transactional emails

Open your SendGrid dashboard
Become to Templates > Transactional
Create a new template and give it a memorable name
Add a new version of that template
Select the Code Editor selection
Copy over the inlined version of the template you want to utilise
Replace the unsubscribe url with the SendGrid tag <%asm_group_unsubscribe_raw_url%>
Update your placeholder content with SendGrid sub tags east.1000. <%body-text-goes-here%> or <%alertText%>
Send a exam to yourself
Telephone call this template's ID when using the API

Lets expect at some of these in more detail.

Create a template and copy the code across

Open your email template in your editor of choice and then you can meet the code. Select all, copy, then paste into SendGrid. Hither I've copied across the inlined receipt e-mail code.

Update the placeholder content with SendGrid sub tags

And then that you tin use this template, SendGrid needs to know where yous want to identify the variables and content that you send with your API call.

First, replace the unsubscribe link with the <%asm_group_unsubscribe_raw_url%> tag like and so:

            Don't similar these emails?              <a              href=              "<%asm_group_unsubscribe_raw_url%>"              style=              "text-decoration: underline; color: #999999; font-size: 12px; text-marshal: center;"              >Unsubscribe</a>

So put SendGrid sub tags where you want the content e.thou. in the receipt email below you can see I've placed tags like <%item%> and <%cost%>

As it is not visible it is easy to forget but you lot should also be replacing preheader text with a sub tag and sending preheader text with each request.

                          <span              class=              "preheader"              way=              "color: transparent; display: none; superlative: 0; max-height: 0; max-width: 0; opacity: 0; overflow: subconscious; mso-hibernate: all; visibility: hidden; width: 0;"              >              <%preheader%></span>

Using images

SendGrid offers a handy epitome upload managing director and then you can upload your template images and reference them. They then practice the hosting for you lot so no need to worry about an external CDN.

Start sending

That should be you ready to go. When you brand your API phone call to SendGrid, include the ID of the template and provide it with the necessary sub tags it needs to return.

                          {              "to":              [              "hi@htmlemail.io"              ],              "sub":              {              ":name":              [              "Lee"              ],              ":item":              [              "Monthly Subscription"              ],              ":price":              [              "              $20              "              ]              },              "filters":              {              "templates":              {              "settings":              {              "enable": 1,              "template_id":              "fa2ef42e-f70b-4951-a671-cf3b53b01123"              }              }              }              }