Today, I’ll show you how to create “HTML emails” and send them in Gmail.
Watching: How to send html emails 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 just as part of regular email correspondence.
And once you’ve done that, you can save your HTML email as a template to use again.
Why importing HTML into Gmail “doesn’t work”
If you take HTML code and paste it “raw” into the Gmail compose window, it won’t render anything else — it will just appear as HTML code. So, HTML on its own won’t help you format the shape or appearance of your emails.
So, I’ll show you how to work around that.
How to send HTML email with Gmail
There are three ways you can load the Gmail Compose window with your custom HTML.
Copy/paste the rendered HTML into the Compose window.Paste your HTML code into the Compose window using Chrome’s Developer ToolsUse 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 an email service provider like Mailchimp or 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
In the browser window, select all and copy the contents of the browser window into the clipboard.
That’s it! The nice thing about this approach is when you save the HTML file as a template, your future HTML emails will look consistent and build a “brand look” in your emails. It also saves you a huge amount of time crafting new HTML emails, and you don’t have to create any external CSS files.
Of course, this technique can be combined with any of the other ways to use gmailaccount.co, such as from a Google Docs spreadsheet or even as part of an automated email sequence.
Option 2: Paste the HTML code 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 code.
First, right-click anywhere in the Compose box and choose Inspect.
See more: Set Up Gmail – Use Your Google Account On Your Iphone Or Ipad
Chrome will then split itself and open up a pane showing the HTML of the Compose box, and one part will be highlighted.
Find the “div” marked “contenteditable=true”, and then right-click and choose Edit as HTML.
The part inside the “div” tag is the part you should replace with your custom HTML code.
Here I have my custom HTML code in the Sublime text editor:
But here it is for you as well, in case you want to try copying/pasting this yourself:
This is my headlineThis is my first paragraph.
Here is some bold text.
Here is an image of a sun:
Finally, here is my code pasted in:
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 directly by hacking the code behind the HTML page. Chrome extensions let you do the same thing but make the entire HTML code 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 put your account data at risk, but it’s annoying because the functionality should be able to be accomplished all on the client-side.
Click the extension’s icon at the bottom of the Compose window.
Their email design tool looks like this:
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: gmailaccount.co
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.”
Paste in your HTML.
Hit Okay, and watch the magic happen.
Note that to use just the HTML editor functionality of gmailaccount.co, 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 on the client side without sending any information back to a server.
See more: Updating Phone Numbers On Gmail Account, Updating Phone Numbers On Gmail
You can use it in 3 easy steps:
So, as you can see, you can create basic templates for bulk emails without learning to use a developer tool or hiring an email template designer. You don’t even need to know how to code from scratch if you can copy and paste the HTML version of an existing email.