How to send HTML emails in Gmail

And because it’s been around for so long, you might think you know everything there is to know about the platform, from setting up filters and folders to newer features like sending payments from the inbox. Maybe you’re even a fan of hitting the snooze button on conversations with Gmail users that you “just can’t” handle right now.

But even if you’re a real power user, follow a successful email template, have sent wonderful personalized emails, and know how to run a successful email campaign, you might not have realized that you can also use your trusty inbox to design and send HTML emails directly from your Compose window.

In this article, we'll go over what, exactly, an HTML email is and how to create one yourself (highly recommended to use on Google Chrome) from your very own Google inbox. Let’s dive in.

• What is an HTML email, anyway?
• How do you add custom HTML to Gmail?
• How to send an HTML email in Gmail from an outside template
• How to send HTML email in Gmail with a Chrome extension

HTML (HyperText Markup Language) is a type of email that’s designed like a web page. Meaning, it contains code that tells an HTML reader (like a web browser) how to render different types of information from images to bold font, colors, and clickable elements.

Basically, an HTML email can look like this:

Which looks much nicer and more fun than your regular plain-text email:

The benefits of HTML emails for email marketers and Gmail users: they allow you to tell stories, generate clicks, and create a visually engaging experience for your recipients.

Though many of us think of branded newsletters when we think of HTML emails, HTML is actually the default for most email clients—including Gmail. It’s HTML that allows you to customize things like font types, graphics, and emojis in the body of the email.

But, why send them through Gmail when you can send emails through an email service provider that comes with more features? One reason you might want to send an HTML via Gmail is so that you can send a newsletter-style email for an email campaign without going through an external service like Mailchimp or Drip.

This way, you can design email templates for personalized sales emails, introductions, and follow-ups. And, if you’re sending from your personal email address (i.e. not sales@company.com), you’ll have an even better shot at landing in the main inbox instead of the Promotions folder.

Many email clients—including Gmail—come with what-you-see-is-what-you-get (WYSIWYG) editors baked into the system for easy editing. WYSIWYG editors allow you to design and format emails (or ads, landing pages, and web pages) without any coding knowledge.

That means you can quickly drop in images, customize the copy, and rearrange design elements until you’re happy with the template.

That said, the editing capabilities that come standard in your compose window don’t do anything fancy. You can make simple changes, say, resizing an image or highlighting important points, but your options are limited:

The main functionality here is to give you the ability to add photos, include files from Google Drive, or spice things up with a few emojis. It’s not exactly the best resource for creating high-end e-commerce-style campaigns.

However, if you do need some more flexibility, you have a few options:

• Compose an HTML file in a third-party editor, or
• Use a Chrome extension to bring HTML editing into the inbox
  

Let’s go over both approaches.

While Gmail supports HTML, it doesn’t offer everything you need to design a professional template from scratch. Instead, you’ll need to design your email elsewhere and paste it into your Gmail account. But rest assured, you don’t need to mess with any code when you learn the answer to “how do I send HTML email in Gmail?”

To add HTML content to Gmail, preferably using Google Chrome, follow these steps:

1. Put together your email content in the HTML editor of your choice. I used a basic MailChimp template and added a couple of stock photos from my desktop to test out the process, but any of the drag-and-drop email builders will work just as well.

2. Make sure that you and other email marketers use absolute path URLs when linking to any external files linked to the email such as images, web pages, or style sheets. Absolute paths are complete URLs, which include the entire domain name and look like this:

3. When you're done editing, save your HTML file to your computer. In Mailchimp, you can do this by navigating to the Templates page and exporting as HTML:

4. Next, open the HTML file in your web browser:

5. Check that the images and design elements are visible to ensure that the CSS styles and any other customizations are correct. In other words, make sure that the pasted content matches up to the original template:

6. From there, select all using Ctrl+A (Windows) or Cmd+A (Mac) and copy the page using Ctrl+C (Windows) or Cmd+C (Mac).

7. Then, head over to Gmail and paste the window and email contents into the compose window.

8. If everything looks good, test the email by sending it to yourself before sending it to recipients.

Keep in mind, you may want to keep your templates relatively simple. Gmail does allow you to make a few edits directly from the inbox, but be careful—a wrong move or two can ruin your design.

If the cut-and-paste approach isn’t for you, another easy way to bring HTML into the mailbox is to look toward the long list of free Chrome extensions that help you get more mileage out of your Compose window.

By no means is this an exhaustive list of options when asking: “How do I send HTML email in Gmail,” but here are a few choices worth exploring if you’re looking to bring fancier emails to your Gmail account.

Newsletter Creator for Gmail

Newsletter Creator for Gmail does exactly what you might imagine. The Chrome extension allows users to design newsletters and set up email marketing campaigns from the Gmail Compose box. The tool is free if you send 25 or fewer emails a month but offers paid plans that allow you to send more emails.

Here’s a quick look at Newsletter Creator’s core features:

• Design an email or use a template with the drag-and-drop editor.
• Build email lists using Google Contacts or by uploading a .CSV file.
• Clip web content for curated newsletters.
• Track metrics like opens, clicks, and unsubscribes.

The editor lives in the menu on the left-hand side of your Gmail inbox. From there, the extension takes over your email and you can start designing your email.

Copper's email templates

Copper is a CRM that also offers a Chrome Extension for Gmail—it lets you build email templates, save them for later, and track email engagements directly from your Gmail inbox.

An added perk here is that you can also share templates with your colleagues for quick access to on-brand emails (for example, so that the whole sales team is including consistent information in their pitching / closing emails), and send personalized emails in bulk to save time.

Whether you use a Chrome extension to create your template or the old cut-and-paste, it’s worth pointing out that you can save your designs in Gmail for use in future emails.

We take a deeper dive into Templates (formerly known as Canned Responses) in this post, but I’ll quickly run through the basic setup here.

1. First, make sure templates are enabled. To do this, head to your settings tab and navigate to the advanced tab. Select “enable” and save changes:

2. Open the draft containing the template and click the three dots at the bottom of the compose window. Select “Templates” from the drop-down and “Save draft as template.”

3. Name your creation and hit save.

4. To use the template in a new email, select templates from the menu again, only this time, you’ll select one from the insert template list.

Ultimately, sending HTML emails in Gmail is an easy, affordable way to put a more professional stamp on your messages—or even impress your friends with well-designed invites. That said, using Gmail for your email marketing efforts seems like a partial solution if you’re trying to grow a business.

Though some HTML Chrome extensions come with some built-in reporting tools, you’ll typically need to pay for those features. Meaning, you’re likely better off paying for a CRM or marketing automation tool that offers more than an HTML editor.

Copper allows you to create templates for Gmail, as well, but also allows you to track email activity alongside everything else you do.

Want to learn more about using Copper with Gmail? Sign up for a free trial.