HTML Email Signature in Gmail Using Google Chrome

UPDATE: The script referred to below, email signature generator has been surpassed by a new Chrome Extension… Read more here

If you are using Gmail, then you probably by now have realized that Gmail does not allow HTML signatures. And if you are anything like me, you refuse to accept “no” as an answer. I spent a little while searching around on the Internet trying to find a workaround to this issue. It turns out that a number of people before me have also wanted an HTML signature in Gmail, and there are a handful of methods to accomplish this task.

Many of the methods use a Grease Monkey script for FireFox… Which would work great if you use FireFox. But being that I am addicted to anything Google these days, and the fact that Chrome is a far superior browser, I do not use FireFox anymore.

So what if you use Chrome?

Don’t worry, there is hope for you yet!

How it is Done

We are going to go through a handful of steps to create your email signature. I will do my best to illustrate these steps as I go, but feel free to comment below if you run into trouble.

Step 1

Since this is a post about creating an HTML email signature, I am going to assume that my readers have already created their signature using HTML, or are savvy enough to know how this is done. If you have not already done so, now is the time to create your block of HTML (be sure to use inline CSS and keep things as simple as possible).

Step 2

Next, you will need to visit this page. GeekFG has provided a great application for generating a javascript bookmarlet that will place your signature into email with the click of a button. But… If you are using Chrome (like you should be!), you will notice that the generator throws an error when you land on the page. So you will need to visit this page using FireFox or worse – Internet Explorer.

On the WYSIWYG editor, click the button that says “HTML.” That will switch the text field to an HTML view. Now paste the block of HTML for your signature into the field and click the “Go to Step 2″ button.

Step 3

You should now see something like this:

Drag & Drop this link [ Signature ] in your favorite toolbar, and enjoy

Since our goal is to get the bookmarklet into Chrome, and we are currently using another browser to run the generator you will need to view the source of this page. To do this, right click on the page and select “View Source.” Scroll down about half way and look for a section of the code that starts:

<p class=”info”>Drag & Drop this link [ <a href=”javascript:

Starting with, and including, “javascript,” highlight and copy the entire link (which should be a very long mess of characters), and return to Google Chrome.

Step 4

Back in the Chrome browser make sure that the top toolbar is showing by pressing Ctrl+B. Then right click on the top toolbar anywhere that does not already have a button. From the options, select “Add page…”

In the name field, place anything you want (I simply called mine Signature). In the URL filed paste the entire link that we copied in Step 3 and click OK.

You should now see a button in the top bar of Chrome that says “Signature,” or what ever you called your link.

NOTE: If you prefer to have your email signature appear above the quoted text in replies and forwards, please read my follow up post, Place Gmail HTML Signature Above Reply, before you move on.

Step 5

Navigate over to Gmail and compose a new message. With the compose screen open, click the button that you just created.

If you followed all of my steps correctly, you will see you email signature appear at the bottom of your email body.

Here is how mine turned out:

Thanks to GeekFG for updating the editor to support Chrome users, and thanks for the shout out on your website