How to Send HTML Formatted Emails with Google Apps Script

by

Sending HTML formatted emails allows you to include styling, images, and a structured layout that can enhance the communication and engagement of your emails. Google Apps Script provides a straightforward way to achieve this, leveraging the Gmail service. Here, we’ll walk through how to set up a script that sends an HTML email, and we’ll also provide an example HTML email template.

Step 1: Write the Google Apps Script Code

First, we’ll write the script that sends an HTML email. Here’s how to start:

  1. Open your Google Sheet or Google Drive.
  2. Click on Extensions > Apps Script.
  3. Delete any code in the script editor that opens up, and replace it with the following script:
function sendHTMLEmail() {
  const recipient = "recipient@example.com"; // Change this to the recipient's email address
  const subject = "Exciting News from Our Team!";
  const body = "This is a plain text version of the email. Your email client does not support HTML.";
  const htmlBody = `
    <html>
      <head>
        <style>
          h1 { color: #3366ff; }
          p { font-size: 16px; }
        </style>
      </head>
      <body>
        <h1>Exciting News!</h1>
        <p>We are thrilled to announce the launch of our new product! Get ready for a game-changing experience.</p>
        <p>Check out our <a href="https://www.example.com">website</a> for more information!</p>
      </body>
    </html>`;

  GmailApp.sendEmail(recipient, subject, body, {
    htmlBody: htmlBody
  });
}

This script sends an email with both plain text and HTML content. If the recipient’s email client can display HTML emails, it will render the HTML; otherwise, it will fall back to the plain text.

Step 2: Deploy and Run the Script

After adding your code:

  1. Save the script with a meaningful name, like “SendHTMLMail”.
  2. Click the play/run button to execute sendHTMLEmail function.
  3. You might need to authorize the script to send emails on your behalf if it’s your first time running it.

Step 3: Example HTML Email Content

In the script, htmlBody is where you define your HTML content. Here’s a simple example used in our script:

<html>
  <head>
    <style>
      h1 { color: #3366ff; }
      p { font-size: 16px; }
    </style>
  </head>
  <body>
    <h1>Exciting News!</h1>
    <p>We are thrilled to announce the launch of our new product! Get ready for a game-changing experience.</p>
    <p>Check out our <a href="https://www.example.com">website</a> for more information!</p>
  </body>
</html>

This HTML includes basic CSS for styling within the <head> tag, and the body contains a heading, two paragraphs, and a hyperlink.

Final Thoughts

HTML emails can significantly improve the effectiveness of your communications, making them more engaging and visually appealing. With Google Apps Script, you can automate the sending of these emails, whether they’re part of a regular newsletter or updates to your contacts. Experiment with different HTML designs and CSS styles to create emails that reflect your message and brand identity.