Batchbook Knowledge Base Gmail IntegrationAdding HTML to Gmail templates

Adding HTML to Gmail templates

Email templates are a huge time saver but no one likes staring at a text only email! Add a little pizzazz to your automated emails by including a few basic HTML tags to your templates!

Text Formatting

Add a little emphasis with these simple html tags:

<b>bold</b> = bold

<i>italics</i> = italics

<u>underline</u> = underline

Add a list

Want to break down your paragraphs into some quick bullet points? Use the following HTML:

Unordered list (bullet points):

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul> =

  • List item one
  • List item two
  • List item three

Ordered list (numbers):

<ol>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ol> =

  1. List item one
  2. List item two
  3. List item three

Use Headings to call attention and separate your thoughts

Headings, like the one above, help your reader to skim and find the most important info. They are super easy to add.

<h1>Heading 1</h1> =

Heading 1

<h2>Heading 2</h2> =

Heading 2

<h3>Heading 3</h3> =

Heading 3

<h4>Heading 4</h4> =

Heading 4

Add a link that hides the url

Most email providers will convert a url into a clickable link. But sometimes you don’t want to include a url in your email text (they can be ungainly).

Here’s how to turn any string of text into a link:

<a href=”http://www.batchbook.com”>Link text</a> = Link text

Insert an image

Inserting an image is a bit harder, only because you need a place to host that image. If you have a website, you can upload the image to a unique page there and then use that url. WordPress sites can upload images to the Media Manager.

Here’s the code to insert the image:

<img src=”https://media.giphy.com/media/8vc2rMUDjhy6Y/giphy.gif”>

You’ll want to include some alternative text that will show in case the image doesn’t load. You may also want to resize the image. You can do both of those with this code:

<img src=”http://urlwheretheimagelives.com” alt=”Alternative Text” style=”width:304px; height:228px;”>

Pull it all together: Set up an HTML Signature

Let’s put some of this code to use by building an HTML signature to use in your emails.

Here is one way to do that:

——————————-

<img src=”http://twitteravatarurl.com” alt=””style=”width:100px; height:100px;”>

<h3>Your Name</h3>

<i>Your Title</i>

555-5555

you@email.com

<a href=”url”>Get a free something</a>

——————————-

Bradford Shimp

Product Manager

1-888-402-2824

bshimp@batchblue.com

Follow me on Twitter