SIGNAL Superclass 2021: Programmatic Email with Twilio SendGrid

Contents

• Session description
• Documentation and resources
• Session outline

Session description

This repository contains materials to accompany the Twilio SendGrid session at SIGNAL Superclass 2021.

Among the communication channels available today, email is non-negotiable. Email is reliable, works globally, and offers flexibility that can't be met by other communications avenues. That may be why 83% of customers prefer to receive business communications via email.

In this SIGNAL Superclass session, you'll learn how to implement the Twilio SendGrid Mail Send API to programmatically deliver email at scale. You'll also see how the Twilio SendGrid dynamic templating system makes it possible to personalize your messages for each customer, and you can expect some deliverability pro-tips along the way.

Documentation and resources

The following documentation and resources will help you build upon what you learn in this session.

SIGNAL 2021 email talks

• SendGrid Sessions at SIGNAL 2021

TwilioQuest

• TwilioQuest

Twilio SendGrid documentation and API reference

• Twilio SendGrid documentation
• Twilio SendGrid API reference

Transactional vs Marketing email

• Guide to transactional and marketing email
• Marketing vs transactional email

Mail Send API quickstarts by language

• Go
• Node.js
• Python
• PHP
• Ruby

API keys and environment variables

• API keys
• API keys permission list

Helper libraries

• C#
• Go
• Java
• Node.js
• PHP
• Python
• Ruby

Design and template documentation

• How to send an email with Dynamic Transactional Templates
• The Design and Code Editor
• Using Handlebars

Send Verification documentation

• Sender Identity explained
• How to set up domain authentication
• How to verify a Single Sender

More information about Sender Identity and email authentication

• Spoofing
• SPF
• DKIM
• Everything about DMARC

Session outline

This outline provides abbreviated steps and code snippets to help you follow along with the workshop. You can use this outline and the app in the 5K9 directory to replicate the workshop on your own.

Prerequisites and setup

1. Sign up for a SendGrid account.
2. Create and store an API key.
3. Domain authentication.
4. Navigate to the 5K9 directory of this repository.

cd 5K9

5. Install the project dependencies.

npm install

6. Start the application in developer mode.

npm run dev

Modify the sendEmail file and add it to your route

• File: controllers/sendEmail.js

module.exports = function sendEmail(toAddress, templateData) {
  const sgMail = require("@sendgrid/mail");
  sgMail.setApiKey(process.env.SENDGRID_API_KEY);

  const email = {
    to: toAddress,
    from: "[email protected]", // Change to your verified sending address
    templateId: "your-template-id", // Change to your template ID
    dynamicTemplateData: templateData,
  };

  sgMail
    .send(email)
    .then(() => {
      console.log("Email sent");
    })
    .catch((error) => {
      console.error(error);
    });
};

• File: routes/signup.js

const express = require("express");
const router = express.Router();
const sendEmail = require("../controllers/sendEmail");

router.get("/", function (req, res, next) {
  res.render("signup");
});

router.post("/confirmation", function (req, res, next) {
  sendEmail(req.body.email, req.body);
  res.render("signup-confirmation");
});

module.exports = router;

Template Handlebars snippets

• template insert snippet

{{ insert dog_name 'default=your super dog.'}}

• template resources test data

{
    "first_name": "Miles",
    "dog_name": "Dash",
    "resources": {
        "loose_leash_guide": "Guide to Loose Leash Walking",
        "night_checklist": "Night Running Checklist",
        "harness_picks": "2021 Harness Picks"
    }
}

• template resources list snippet

<!-- Order Confirmation -->
<table class="module" role="module" data-type="text" border="0" cellpadding="0" width="100%" style="table-layout: fixed;">
    <!-- Divider -->
    <tr>
        <td colspan="2" style="padding: 10px 0px 10px 0px;">
            <table class="module" role="module" data-type="text" border="0" cellpadding="0" width="100%" style="table-layout: fixed;">
                <tr>
                    <td style="padding: 0px 0px 1px 0px; background-color: #333333;"></td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- End Divider -->

    <!-- Reciept Header -->
    <tr>
        <td colspan="2" style="color: #1A82E2; text-align: left; padding: 15px 0px 15px 0px;">
            <h2 style="padding: 0px; margin: 0px;">Your training resources</h2>
        </td>
    </tr>


    <tr>
      <td valign="middle" style="color: #000000; text-align: left; padding: 0px 0px 5px 0px;">
        <ul>
          {{#each resources}}
            <li>{{this}}</li>
          {{/each}}
        </ul>
      </td>
    </tr>

    <!-- Divider -->
    <tr>
        <td colspan="2" style="padding: 10px 0px 10px 0px;">
            <table class="module" role="module" data-type="text" border="0" cellpadding="0" width="100%" style="table-layout: fixed;">
                <tr>
                    <td style="padding: 0px 0px 1px 0px; background-color: #333333;"></td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- End Divider -->
</table>