<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1822615684631785&amp;ev=PageView&amp;noscript=1"/>

How to use custom HTML in a Gmail Compose window [3 ways]

Today I’ll show how to create “HTML emails” and send them along in Gmail. The benefit of doing so is that you can design email campaigns and then edit and send them directly inside Gmail, either as a campaign or even just as part of regular email correspondence.

There are three ways you can load the Gmail Compose window with your custom HTML.

  1. Copy/paste the rendered HTML into the Compose window.
  2. Paste your HTML code into the Compose window using Chrome’s Developer Tools
  3. Use a Chrome extension to add an HTML editor to the Gmail Compose box

My favorite technique is #2, because it gives me the most control and doesn’t require an extension. Every extension you add to Gmail crowds the interface just a tad more.

Option 1: Copy/paste rendered HTML

On its own, the Gmail Compose window doesn’t let you edit the HTML “behind” the message. This is in contrast to most email platforms, like Mailchimp and Constant Contact in which you can edit the raw HTML. So, the technique below is a way to work around that Gmail limitation.

Once you have your HTML written, the process is basically just a matter of copy and paste. You create your page in HTML, load it into a browser, copy the contents of the browser, and then paste it into Gmail’s compose window. By “rendered” HTML, I mean what the HTML looks like in the browser, with colors, fonts, and images in place.

Let’s run through a quick example of that.

Creating and sending your HTML email

  1. Write your HTML. For this example, I’m using some boilerplate HTML adapted for our purposes. HTML can be either written directly or, possibly, composed with an HTML authoring tool. Gmail is a little picky with what it will allow as HTML in its emails, so here are a few important guidelines:
    – You can’t use external style sheets, though you can use inline CSS (e.g., <td style=bgcolor=”white” align=”center”>) as well as embedded CSS in the head. For more on the details of exactly what you can and should use in Gmail, see this pageNote: Gmail changed their support for CSS in 2016, so older posts online may claim they don’t support things they actually do. The post I linked to is up to date with that change.
    – Some HTML tags may not be supported. This list (which may not be perfectly current) shows HTML tags that are supported and some that are not.
    – Gmail does not support web fonts. So, either use the standard fonts they provide, or, if you want another font for something like a logo, make an image of that text. Then, in the HTML, link to that image hosted online, which is what I have done for the “Binkman’s Books” logo in my sample email below.
    – All images have to be hosted online somewhere — they can’t be included in the email. You can host images on Imgur, Amazon Web Services, Google Docs (if you can get a direct link to the image), or any other place intended for hosting images.
    – Using tables to organize the display of contents is the recommended way to go for HTML emails. However, even using tables, there are still issues to watch out for.
    Google Docs for composing could be problematic. Although there are tutorials out there about using Google Docs to create your HTML email without coding, when I tried it, I found that what was displayed on Google Docs was not exactly what appeared in the email (e.g., something that was centered in Google Docs was left aligned in the email).
    Keep it simple. Because what Gmail will support is somewhat unpredictable, it’s best to keep things fairly simple in terms of the HTML. (That’s probably a good idea from the point of view of recipients, too. No one needs an overly complex email.)
    Remember, Gmail is a work-in-progress. Gmail keeps changing, so blog posts or online answers from a few years ago are already out of date. If you’re researching how do anything with HTML and Gmail, try to find content that is as recently written as possible.

    A part of the HTML used to create the email.
    A part of the HTML used to create the email.
  2. Display the page in a browser. I used Chrome and just opened (Ctrl-O) the .html file that was on my computer.

    The HTML as rendered in the Chrome browser.
    The HTML as rendered in the Chrome browser.
  3. In the browser window, select all and copy the contents of the browser window into the clipboard.
  4. Open a Gmail Compose window and paste into the main text area. The HTML email should appear in the compose window. Double check (including scrolling down to the bottom) that everything looks appropriate before you send.

    HTML email now pasted to Gmail compose window.
    HTML email now pasted to Gmail compose window.
  5. Send your mail merge with GMass. As usual, just hit the red GMass button.

    Cursor shown poised over the GMass button, ready to click.
    Ready to send out, just need to click GMass…

That’s it! The nice thing about this approach is you can save the HTML file as a template, so that future HTML emails will look consistent and build a “brand look” in your emails. It also saves you a huge amount of time in crafting new HTML emails.

Of course, this technique can be combined with any of the other ways to use GMass, such as from a Google Docs spreadsheet, or even as part of an automated email sequence.

Option 2: Paste the HTML using Chrome’s Developer Tools

This technique is a Gmail and Chrome hack. You right-click in the Gmail Compose window, find the relevant HTML portion of the box’s element, and then paste in your HTML.

First, right-click anywhere in the Compose box and choose Inspect.

choose inspect

Chrome will then split itself and open up a pane showing the HTML of the Compose box and one part will be highlighted.

inspect code

 

Find the “div” marked “contenteditable=true”, and then right-click and choose Edit as HTML.

content editable

The part inside the “div” tag is the part you should replace with your custom HTML.

replace HTML inside div

Here I have my custom HTML in the Sublime text editor:
custom HTML

But here it is for you as well, in case you want to try copying/pasting this yourself:


<h1>This is my headline</h1>

<p>This is my first paragraph.</p>

<p style="font-weight: bold;">Here is some bold text.</p>

<p>Here is an image of a sun:</p>
<br>
<img src="https://image.shutterstock.com/image-vector/sad-sun-exhausted-heat-vector-260nw-200226281.jpg">

Finally, here is my code pasted in:

placed customer HTML

and as soon as I click away, the Compose window is filled with the rendered version of the HTML.

Option 3: Use a Chrome extension

There are several Chrome extensions that add a slick HTML editor to the Gmail Compose window, so that you can edit the HTML behind the scenes in an easy-to-use manner. In Option 2, you are also editing the HTML behind the scenes, but doing so in a direct manner by hacking the code behind the HTML page. Chrome extensions let you do the same thing but make the process easier.

Chrome extension 1: Free HTML Editor for Gmail by cloudHQ

This is the most robust of the HTML editors because it includes WYSIWIG design tools as well. The one annoyance that comes with this extension is it requires you to create an account with them. They don’t require OAuth access to your Gmail account, but they do require Google Sign-in privileges. That doesn’t inherently your account data at risk, but it’s annoying because the functionality should be able to be accomplished all client-side.

Click the extension’s icon at the bottom of the Compose window.

click the icon

Here’s what their design tool looks like.

CloudHQ design tool

The design tool takes over the Compose window until you click “Close Editor.”

You can also watch their video to see their extension in action.

Chrome extension 2: GMass

My own Chrome extension includes an “HTML” function so you can view and set the HTML into the Compose window.

Launch the Settings box and click “HTML”.

GMass HTML widget

Paste in your HTML.

paste custom HTML

Hit Okay, and watch the magic happen.

Gmail with custom HTML

Note that to use just the HTML editor functionality of GMass, you don’t need to subscribe to a paid plan.

Chrome extension 3: HTML Inserter for Gmail

This is a nifty extension that’s one of my favorites because it doesn’t require any OAuth access to my Gmail account. It works entirely client-side without sending any information back to a server.

You can use it in 3 easy steps:

  1. Click the HTML icon.
    Click HTML icon
  2. Paste your HTML.
    Paste custom HTML
  3. Click the Insert HTML button and watch your formatted message appear.
    Gmail with custom HTML content
19 Comments
    1. It’s great to send custom html email with gmass mail merge. I wanna know how to send Custom Html emal in Auto Follow-up email.

  1. what i meant to say was that when i send a reply that is formatted. like a bold word or different sizes, or even new lines are not available

  2. Does this work on GSuite as well?
    Tried this but didn’t work on mine.
    Also, I have used GMass. Thanks for the nice product, man!
    Love it!

  3. Hello Marvin,

    I wish to include a Paypal button in my emails, which is HTML code generated at the Paypal site. I assume this is possible – just want to be really sure!

    Thanks,
    James

  4. Hello Again Marvin,

    I was pleased with your decision to provide all features to everyone. However, one my main reasons to chose Gmass is the auto follow ups. Which is only available in the most expensive version. Now, when I only use this feature once (maybe twice) a year, can I downgrade the subscription a month after sending that campaign with auto follow-up, even if the last reminder comes after 6 weeks?

    James

    1. Hi Djordje,

      Upon checking, we’re not showing any campaign emails sent from the email address you used for this comment. Please contact our support team directly so we can assist you. Please see gmass.co/g/support.

  5. This does not work for me. When I open my document in Chrome I see my images. But when I copy and paste into Gmail the images do not appear. Nor do they appear when emailed to someone.

  6. Thanks for sharing informative and unique ideas for creating a professional email by using this technique. Keep sharing useful ideas and tips.

Leave a Reply

Your email address will not be published. Required fields are marked *

Try GMass today

It only takes 30 seconds to install it!

Install Now GMass requires Chrome
Share This