Sending an HTML Email Using Google Apps Script

by

In this blog post, I’ll show you how to send an HTML email using Google Apps Script and an HTML file as the source. This is a powerful way to enhance your emails with custom styles and layouts.

Prerequisites

Before we start, ensure you have:

  1. A Google account.
  2. Access to Google Drive and Google Apps Script.

Step-by-Step Guide

Step 1: Create an HTML file

First, you need to create an HTML file that will serve as the content for your email. You can create this file using any text editor or directly within Google Drive.

  1. Go to Google Drive.
  2. Click on New > More > Google Apps Script.
  3. Delete any default code and create a new HTML file by clicking on File > New > HTML.
  4. Name your file emailTemplate.html and add your HTML content. Here’s an example:
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        font-family: Arial, sans-serif;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        width: 80%;
        margin: 0 auto;
      }
      .header {
        background-color: #f2f2f2;
        padding: 10px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
      }
      .content {
        margin-top: 20px;
        line-height: 1.6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">Welcome to Our Newsletter</div>
      <div class="content">
        <p>Dear Subscriber,</p>
        <p>Thank you for subscribing to our newsletter. We are excited to have you with us.</p>
        <p>Stay tuned for more updates!</p>
        <p>Best regards,<br>Your Company</p>
      </div>
    </div>
  </body>
</html>

Step 2: Create the Google Apps Script

Now, we will create the Google Apps Script that will read this HTML file and send it as an email.

  1. In the same Apps Script project, create a new script file by clicking on File > New > Script File.
  2. Name your file sendEmail.

Add the following code to sendEmail.gs:

function sendHTMLEmail() {
  // The email address to send to
  var recipient = 'recipient@example.com';
  
  // Subject of the email
  var subject = 'Welcome to Our Newsletter';

  // Fetch the HTML content from the file
  var htmlTemplate = HtmlService.createHtmlOutputFromFile('emailTemplate').getContent();

  // Send the email
  GmailApp.sendEmail(recipient, subject, '', {
    htmlBody: htmlTemplate
  });

  Logger.log('Email sent to: ' + recipient);
}

Step 3: Explanation

  1. Recipient and Subject:
    • recipient is the email address where the email will be sent. Replace 'recipient@example.com' with the actual recipient’s email address.
    • subject is the subject line of your email.
  2. Fetching the HTML Content:
    • HtmlService.createHtmlOutputFromFile('emailTemplate').getContent(); fetches the content from the emailTemplate.html file.
  3. Sending the Email:
    • GmailApp.sendEmail(recipient, subject, '', { htmlBody: htmlTemplate }); sends the email with the HTML content.
    • The third parameter is an empty string '' because we are not sending any plain text content.

Step 4: Running the Script

  1. Save your script by clicking on File > Save.
  2. Click on the Run button (the triangle icon) to execute the sendHTMLEmail function.
  3. You might need to authorize the script to access your Gmail. Follow the on-screen prompts to grant the necessary permissions.

Step 5: Testing

Check the recipient’s email inbox to see if the email has been received with the HTML content as designed. You can also check the Apps Script logs for confirmation by going to View > Logs.

Conclusion

Using Google Apps Script to send HTML emails allows you to create more engaging and visually appealing emails. You can customize the HTML file as per your needs and reuse this script to send different emails by simply changing the HTML content. This approach is efficient and leverages the power of Google’s ecosystem for email automation.