How to Embed HTML in Gmail: Easy Tips to Send HTML Emails

Church Newsletter: How to Attract & Engage Your Congregation
Email Best Practices
Process
25.04.2022
Read time: 13 min

Once upon a time, Gmail included an option to build emails using HTML. While it’s still possible to do so, it requires knowing how to embed HTML in Gmail. In this article, we’ll cover why and how to use an HTML email template. We’ll also look at how you can design, test, and send emails seamlessly and export them to Gmail using a tool like Publicate.

Why Import HTML Email into Gmail?

When you click on “Compose” in Gmail to create an email, you’ll be met with a window that operates with a WYSIWYG editor, which stands for What You See Is What You Get. The idea here is that anyone can create an email using the same skills and knowledge you have from using word processors.

However, when it comes to internal employee newsletters or external marketing emails, there’s another big thing to consider –branding. Creating a beautifully designed and formatted email inside Gmail’s composition window isn’t easy to do. That’s where HTML can come into the picture (or should we say window?).

In this case, you’ll leverage external tools like an HTML editor and then have to embed HTML in Gmail. 

How to Send HTML Email with Gmail?

To use HTML in Gmail, you will first need to write HTML code in the internal editor or use an external editor. With an external editor, you may be able to find an existing HTML email template, which will lessen the amount of code you have to write.

Or, you can use an email builder like Publicate which means you won’t have to know any code at all. You can choose from an array of professional templates and then edit the template either with HTML or with the visual drag-and-drop editor. 

You can send HTML in Gmail in a few different ways. Let’s review them:

1. Copy & Paste HTML into Gmail

If you write HTML code in an editor and then simply copy and paste it in the Compose window on Gmail, you will get back straight code. That’s because that window relies on the WYSIWYG editor, as mentioned above. 

To insert HTML into Gmail, you have to follow these steps:

  • Export your HTML file and save it as a “.html” file. Save the file as plaintext. If you’re doing this on a Mac, you’ll need to uncheck the box about a .txt extension. 
  • Now right click on the file and open it in a browser window 
  • You should see the HTML like you expect to - visually instead of code
  • Copy the entire window (you can use your copy shortcuts here like Command +”A” and Command + “C” on a Mac to highlight everything (all) and copy it 
  • Go back to your Gmail Compose window and now you can paste it 

2. Use Chrome Developers Tools   

Alternatively, you can try out this “hack” using Chrome’s developer tools to embed HTML in Gmail.

  • Get your custom HTML ready to go 
  • Click on “Compose” in Gmail 
  • Right click inside the Compose window anywhere and select “Inspect”
  • The window will split and open up code to the right to see the elements. One section will be automatically highlighted 
  • Find the “Div” marked “contenteditable=true” and right click on it to select “Edit as HTML”
  • Paste your custom HTML 
  • Exit out of the inspect window and you should see your email designed as intended within the Compose message body 

3. Use Chrome Extensions   

Rather than having to go through those steps and find the right Div to paste your code, you can also download a Chrome extension that will add an HTML button into Gmail’s Compose message window.

When you have that downloaded, you should be able to click on the button for the widget and paste your code into the HTML window. The design tool takes over your Gmail window. Once you’ve pasted your code, simply exit out of it and you’ll see your email ready to go. 

There are a few different HTML Chrome extensions to pick from. Some are free and some require sign ups, so do your research before choosing. Options include HTML Inserter for Gmail and GMass, to name a few. 

4. Use HTML Email Builders

If you use an HTML email builder, a lot of the complexities of sending HTML emails in Gmail are removed. For example, Publicate is an HTML email template builder that has a library of email templates to choose from and makes it super easy to embed HTML in Gmail.

You don’t have to be a graphic designer or a coder to create beautiful emails. Instead, you can select a template and edit it how you see fit using either HTMl or drag-and-drop functionality. 

Once your email is ready to go with your desired text, branding elements, and design, you can export it to Gmail using Publicate’s Gmail chrome extension. Plus, if you want to use a different email provider such as Apple Mail or Outlook, you can do so as the web-based builder enables you to create an outlook email template or any other template. 

Laptops with HTML coding

Picture source Unsplash

What to Look for With HTML Emails?   

There are some HTML limitations in Gmail that you need to be aware of when you are trying to embed HTML in Gmail.  you can do so as the web-based builder enables you to create an outlook email template or any other template. 

Your email visions may expand beyond HTML’s simple framework. Keep in mind the following when building, exporting, and sending HTML emails in Gmail: you can do so as the web-based builder enables you to create an outlook email template or any other template. 

1. Image Hosting

When you add an image to an email in Gmail, it will show up as an attachment, which isn’t ideal because some recipients may have attachments blocked or may never download attachments. To overcome this limitation, you’ll need to host images online somewhere public. 

This way, you’ll have a link to source the image that you can input into the HTML. You can store images on your server or Google Drive, for example. If you’re taking stock images from a public source online, use the link to the image, not a link to where you stored the image. 

When you choose to use Publicate for your HTML needs, you can use any content from your content library, including the ability to drop in images. 

2. Inline CSS

With Gmail, you can’t use external styles. You’ll have to use embedded CSS and inline styles to work around this limitation. CSS is used to style your email. Unless you have experience with coding, this can become overwhelming quickly. 

That’s another reason why so many companies choose an HTML email builder instead. This way, you can still create HTML emails but without the need to code anything. 

3. Fonts

While it’s fun to play with wild fonts or use your branded fonts, Gmail can’t render web fonts. Instead, you’ll have to rely on fonts that exist within the email provider, including: Sans Serif, Serif, Fixed Width, Comic Sans MS, Tahoma, Verdana, and a few others. 

How to Test Your HTML Emails?       

Before sending any email, you’ll want to test it. The thing about email providers is that they can render HTML emails differently and also according to the recipient’s screen size. To test your email, you can do it the old-fashioned (and time-consuming way). This would be to email it to as many different people with email clients that you can think of. Then, you’ll have to get their feedback. 

Or, you can use leverage tools that will check the email across different providers for you. 

Final Thoughts

Now you know the different ways you can embed HTML in Gmail. After reading this article, it may have become clear that coding your own email and going through the motions of inputting it into Gmail may be more time-consuming and stressful than you’d have hoped. 

Instead, you can send email publications easily with Publicate. In addition to the ease of sending emails, designing emails becomes second nature, too. 

With the email builder, everything can be visually composed and you can start with the skeleton of the email template so you have to do less work on your end. This way, you can always get your messages across in a timely manner. 

responsive newsletter templates work anywhere

Beautifully Designed Templates

Beautifully designed, work anywhere

Browse The Templates