API docs here

Overview

Programmatically send email in Node.js an other languages.

Two distinct offerings: API Plans and Marketing Campaign Plans

Alternative’s include Amazon SES and many many others.

First heard of from Brad Schiff’s, “JavaScript: Full Stack from Scratch Course”

There is transactional versus marketing email. Transactional email is like an auto-generated welcome emails after signing up or an auto-delivered email notifying an post author someone has commented on their post. Maybe the site owner should get an email notifying them when a new user has signed up. Marketing Emails are more in line with a weekly newsletter, promotional content, etc.

Domain Verification

Sendgrid provides CNAME DNS records to add to your DNS provider. You may need to alter them to work for some web hosts /email hosts. This is the case for hostinger. See more from this stack overflow article here. The gist of it is:

Provided ex0123.sub.domain.com, you should be adding only ex0123

for s1._domainkey.sub.domain.com you should be adding only s1._domainkey

For s2._domainkey.domain.com add only s2._domainkey

The Basics

Create and account, verify sender email and create an API Key. Docs on sending mail here.

const sgMail = require('@sendgrid/mail')
sgMail.setApiKey(process.env.SENDGRIDAPIKEY)

exports.create = function(req, res) {
  let post = new Post(req.body, req.session.user._id)
  post.create().then(function(newId) {
  sgMail.send({
    to: 'harrypotter@hogwarts.edu',
    from: 'test@test.com',
    subject: 'Congrats on Creating a New Post',
    text: 'Yay! You created a post.',
    html: 'You did a <strong>Great Job!</strong>'
  })
  //other code here too
  }).catch(//more code)
}

List Management

To me this is where the real magic happens. When someone signs up they are automatically added to the list via the API. You can send one email that goes to the entire list. Users can unsubscribe to the list. List management happens through the Marketing Campaign Plans area.

There is a global “all contacts” list when you first sign up. I thought it was wise to create a new list.

Create a List

Either through the Contacts API or the SendGrid dashboard.

Adding to the List

Note: if you have an existing list you can manually add them or upload a csv file from the Sengrid website UI.

There is a separate Contacts API seen in docs here

Adding a contact requires installing the @sendgrid/client library. Docs on this here.

Note the base url for all endpoints is https://api.sengrid.com

const client = require("@sendgrid/client");
client.setApiKey(process.env.SENDGRID_API_KEY);

const data = {
  "contacts": [
    {
      "email": "annahamilton@example.org",
      "custom_fields": {
        "w1": "coffee",
        "w33": "42",
        "e2": "blue"
      }
    }
  ]
};

const request = {
  url: `/v3/marketing/contacts`,
  method: 'PUT',
  body: data
}

client.request(request)
  .then(([response, body]) => {
    console.log(response.statusCode);
    console.log(response.body);
  })
  .catch(error => {
    console.error(error);
  });

Sending to a List

Sending to a list is called a “single-sender list”

Create groups of contacts: be aware group names and descriptions are public facing.

Unsubscribe Functionality

Create an unsubscribe group knowing the name and description is visible.

Dynamic Data in Emails

You want to use the customer’s name.

The API supports handlebars as seen in the docs here.

Questions

What data besides the email address should we get from the customer when signing up for email newsletter, (name)? Any other info we should pass into SendGrid, like the sign-up date?

Can we export the data from contacts from send grid?

What is a single send? On the SG site it says, “Create your first Single Send to deliver a one-time, targeted email to a list or segment that you choose. Then, measure the results and optimize your next Single Send to drive increased engagement.”

Sources

Fireship Video here shows how to use the drag and drop editor to create a template (making note of this templates auto-generated ID) and leverage the doubly curly bracket handlebars syntax {{}} to feed this value in from the code.

Note this is from 2020 so the API code may be outdated.

const msg = {
  to: user.email,
  from: "hello@yourdomain.com",
  template_id: TEMPLATE_ID,
  dynamic_template_data: {
    subject: "Welcome to our awesome app!",
    name: user.displayName
  }
}

Colby Fayock Video: Th example use case is for contact form. I really enjoyed his part on verifying the domain of your email, (he uses google). Also a great part on how he handles same value for text/html which includes “/n/r” and when used on the html line uses the replace() method.