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

25.04.2022
Read time: 13 min
Try Publicate For Free Today
Start Now
Church Newsletter: How to Attract & Engage Your Congregation
Try Publicate For Free Today
02.03.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 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. 

3. 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 

4. 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. 

Creating Your HTML Email Step by Step 

Creating your HTML email has never been easier. Using Publicate’s web-based builder, you have everything you’ll need at your fingertips., All you have to do is follow these steps:

  1. Sign up or sign in to use Publicate 
  2. Choose from an array of templates and then start customizing your HTML email
  3. Add whatever content you wish to include (i.e. images, GIFs, videos, URLs, and more)
  4. Edit the details and review 

The drag-and-drop editor makes it simple to see exactly how your newsletter will look without having to know any code. If you wish to rearrange the layout of a newsletter or start from scratch, you can do so by dropping in whatever content blocks you want in your preferred order. 

Sending HTML Email Gmail 

Now that you have your HTML email ready to send, you can simply export it to Gmail using Publicate’s integrated tool. Click on “Export to Gmail” and Publicate will load your email newsletter into Gmail. 

Open up Gmail and select “Compose.” Then, click on the Publicate icon which will appear in your Gmail’s WYSIWYG toolbar. Choose your desired email newsletter from the list. It’ll appear in your message body and is now ready to launch out to the recipients you choose to send it to. 

By using Publicate’s web-based email builder, the email will be structured to render properly across any recipient’s device and email service provider. Your work here is done! 

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.