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










February 7, 2009 at 11:31 am
Great work around. I just made the chrome switch today to give it a whirl. Opened Apps and was like Argh where are my signatures. Anyway, very impressed with Chrome so far. Very lightweight and responsive.
Henry’s last blog post… Device/Software Install
December 17, 2009 at 5:55 pm
Just created a google-chrome extension called Autopen for email signatures in gmail. Please give it a whirl let me know what you guys think.
https://chrome.google.com/extensions/detail/cmjcoiohflenpehfaalahocpmacjloof
December 18, 2009 at 9:30 am
Incredible… It works brilliantly. Are you interested in publishing a product review on this site to give your new extension some push? I already get a chunk of traffic each day dealing with this post, I think a review of your extensions would drum up some real traffic around here.
December 18, 2009 at 12:21 pm
Yes I would be willing to make a product review. I think that is a great idea. Just let me know how you would like me to proceed and I will get on it. I will be working on this constantly to make sure I can get everyones features/suggestion/bugs done.
February 8, 2009 at 4:26 pm
Thank you SO much for this. I have just recently switched to using Gmail in Chrome for all of my emails. This tool works perfectly!
February 9, 2009 at 7:21 am
Glad I could help… If you prefer to have your signature above the reply email, be sure to check out my follow-up post: http://www.zachgraeve.com/2009/01/26/place-gmail-html-signature-above-reply-bookmarklet-method/
February 17, 2009 at 6:57 pm
Hey I tried exactly what you said and it didn’t work. When i try to input the link into Google Chrome, it doesn’t give me the “OK” button to creat it. maybe you can help me out,
here’s the original HTML for my signature:
Robert Navarro robert@floorselectusa.com http://wwww.robertnavarro.wordpress.comSale’s Representative19224 E Walnut Dr North Unit FCity of Industry, CA 91748626.581.9515
Here’s the code that I copied from the website that created my new link:
[[edit: snipped]]
What you see is exactly what i input in Chrome and it doesn’t work. Help me out dude. Thanks.
February 18, 2009 at 11:54 am
Rob – Be sure to only put the section inside quotes, starting from: javascript…
You don’t add anything else except for the javascript code, without the quotes.
February 19, 2009 at 4:13 pm
nice one! The only issue I have is that I run Gmail as a Chrome “Application Shortcut” so it runs without the bookmarks toolar (feels more like a desktop app that way. Never mind, can’t have it all I suppose! Well, hopefully Google just add this functionality into Gmail natively – It’s a basic omission in imho…
April 28, 2009 at 11:30 am
I think I got another approach to address the html signature issue with Gmail in Chrome: using labs features “Insert images” and “canned” responses” it’s really easy to create a signature to be introduced when desired.
February 20, 2009 at 3:30 pm
Hi guy’s ! I use chrome too (and I love it) ! I’ve updated the editor. Now you can use chrome to create your own signature.
I hope you will appreciate.
Thx for the feedback
Ps : I will add some back-link to your blog from the bookmarklet generator main page ;
GeekFG’s last blog post… Algorithme tri de couleur (+ demonstration javascript)
February 20, 2009 at 3:51 pm
Thanks for dropping by! Glad to hear you are updating the generator. Would love to see my addition of adding the signature above replies included as an option in your script.
And of course… I would love to see a link back to my site!
February 21, 2009 at 11:17 am
Yep, I will update the script tonight
GeekFG’s last blog post… Modifier openWYSIWYG afin qu’il supporte Google Chrome
February 21, 2009 at 4:42 pm
Done. If you have other feedback don’t hesitate & contact me with my comment’s email.
February 26, 2009 at 7:13 am
Got it to work then when I closed down chrome and restarted it failed
same on opening a new tab
Any thoughts
Allan
February 26, 2009 at 7:54 am
Not sure I understand what your issue is… Is Google Chrome crashing when you insert the signature? Or crashing under other uses as well?
March 19, 2009 at 1:56 am
Hi,
I marked the “place above reply” button, but it doesn’t seem to work.
The sig is still under the reply.
can you help me out?
Regards,
Rob
April 11, 2009 at 9:04 am
Great post and great signature. Where in FL are you located?
Ian Garlic’s last blog post… Open Up!
April 11, 2009 at 9:12 am
Thanks… I am located in Palm Beach Gardens (SE Florida).
April 17, 2009 at 7:44 am
Thank you, this is great!
April 26, 2009 at 8:51 pm
This is awesome, thanks! Only problem is that the signature always goes on top of my reply, even if I didn’t tick the ‘Insert signature above reply’ box. No biggie, though.
May 5, 2009 at 8:53 am
For some reason it didn’t work for me. I dragged it into my bookmark tool bar, but nothing happens when I click on the link.
This is the link that it generated:
[snipped]
Any ideas?
May 5, 2009 at 3:29 pm
Clay – Your code worked for me. Try right clicking on your bookmarks bar at the top of the browser and selecting “Add page.” Then insert the entire section of code into the URL and call it whatever you want. IT should then work for you to. (I am assuming you are using Google Crome – different browsers may have different steps to add a bookmark.
May 31, 2009 at 5:50 pm
I tried also – no luck! Can you take a look please.
June 3, 2009 at 10:28 am
Cheerio! I got it, am thrilled, and thanks to the “wave” of people helping everyone! One question.. “insert above reply” is checked, but I cannot seem to get it to enter replies at all… it doesn’t exist above, or below. What do you think? Thanks! mhraba@gmail.com
hhotelconsult’s last blog post… The Story of the In-Room Phone, & the future of on property telephony
June 29, 2009 at 6:45 pm
Cheers!!! Thanks a ton Zach…
July 20, 2009 at 2:25 pm
So, I tried to do this, and when I click the button, the html code pops up in my signature and not the actual signature. Any suggestions?
July 27, 2009 at 11:26 pm
Great stuff! I will be using this for a while I’m sure! Thanks.
August 3, 2009 at 7:27 am
Any way to make this automatic everytime you hit the compose button? Thanks.
August 6, 2009 at 1:16 pm
awsome! this owrs great… i was minutes away to fall back in bill gates jaws, and this simple, original javathingy solved it… thank god there are still wise people around.!!!
August 24, 2009 at 2:35 am
Doesn’t seem to play nice with Google Apps for me T_T Works great in normal gmail though – and now Chrome has bookmark sync the signature get’s synced too ^_^ Shame on the Apps fail though.
August 24, 2009 at 2:38 am
Disregard my last comment, works fine in Apps
^_^
September 14, 2009 at 4:41 pm
How did you manage to work it out within the gmail app, without the bookmark bar?
(as not within the browser itself)
September 15, 2009 at 2:54 am
How did u get it to work in apps without the bookmark bar?
August 28, 2009 at 8:16 am
Hi! It worked for me, except that the table which contains my logo and informations had its border set to a dashed line instead of being transparent. I know the html code is right, because I use it with BlackCanvas on Firefox, and it shows correctly on browsers. Is there a workaround?
October 16, 2009 at 10:23 am
Ditto…exactly the same problem. Table-based signature that I previously created. Works flawlessly other than that it is adding unwanted dashed line borders around all table cells.
October 16, 2009 at 10:35 am
Now I understand… I would suggest placing inline styles in your HTML for the tables and cells:
Example:
style=”border:0px;”
I would also recommend using DIV containers instead of TABLES when possible. It makes degrading to text-only email easier to control and it makes the code cleaner and more efficient.
August 29, 2009 at 4:51 pm
AWESOME! Works like a charm!
September 3, 2009 at 4:27 am
this is great. will it allow me to create multiple signatures?
September 7, 2009 at 8:57 am
I am so sorry to ask, but I have tried literally everything and no go. Once this work when I bkmked it from IE7 and copied the bookmarklet over to Chrome….but NEVER since.
I have tried creating it using FF, IE, and Chrome. Ive tried adding a page and doing it manually, automatically, many kinds on HTML including ONLY an ref saving the whole thing as an image.
I AM STUCK!!!! I have followed your steps to the letter, but NOTHING ever happens when I click on it!
September 10, 2009 at 6:44 am
I used the GeekGF page that you suggested to create a html signature, but am having trouble linking the pictures that I have with my signature, i.e. facebook and twitter icons and my company icon. Do you have any suggestions.
October 6, 2009 at 2:45 pm
I’m having to insert the signature each time I email. Should I have to do that or am I doing something wrong? Thanks!
October 7, 2009 at 9:01 pm
Yes… With the Google Chrome bookmark you will have to click your bookmark each time you write an email. If you don’t need an HTML signature, you can always just use the automatic signature option in the Gmail settings.
October 7, 2009 at 8:47 pm
I’ve followed the directions, but nothing happens when I click the signature bookmarklet. Can’t figure out what I am doing wrong. The address shows as: [[edit: snipped]]
I am assuming that because it begins with ‘void’ that something must be wrong?? Not sure what the next step would be … I have deleted and tried adding it several times with no sucess. Even did a test with a more simple signature and no luck. Any direction is appreciated. I really must have an HTML signature for my business and do not want to use IE or Firefox …
Thanks!
Andrea
October 7, 2009 at 8:59 pm
It appears that you are doing it correctly… Sometimes I find that Gmail glitches. When this happens, I have to discard the draft email and do a hard refresh of the page (hold the control key and press F5 for PCs). Also, I sometimes find that the signature can take a minute the first time I use it during the day. Sometimes as long as 10-15 seconds (and I am rocking a pretty mean computer). Give these suggestions a try and see what happens.
October 10, 2009 at 6:48 am
Great solution! But there has a problem, the HTML signature usually use form, put company logo left side and contact information right side. I usually set the border no color but the above method will add color to the form, this make the signature ugly.
October 13, 2009 at 1:48 pm
Great! It works! it took me sometime to copy the correct link. But I didi it. THKS!
October 21, 2009 at 12:10 am
I generate signature from MyBlogLog Widget feature and then follow your step. It done. That’s terrific info. Thx.
October 23, 2009 at 3:16 pm
Great script! Works fine in Gmail for me, but not in Google Apps Mail… does nothing! Can anyone help me tweak it so that it works in GAPPS mail?
October 23, 2009 at 6:17 pm
I also used the “canned response” google labs plugin to have html or images in my signatures. It works really well! Thanks Guzman!
November 7, 2009 at 6:32 pm
It doens´t work here…ooooooo GOSHHH
I did all you said…. doesn´t work on GMAIL for me
November 13, 2009 at 9:23 am
Your signature looks wonderful! I love century gothic, my favorite font! I am going to copy your syle, and let everyone know about your site! thank you!!!!
November 18, 2009 at 5:54 pm
The script works beautifully! Thank you!
One thing to note is that if it doesn’t work for you, close the browser completely and reopen the application. I thought it wasn’t working, but once I restarted the browser it was fine.
November 23, 2009 at 10:22 pm
Has anybody managed to get this to work in google apps for domains? How did you it? It doesn’t work for me.
December 9, 2009 at 8:16 am
Thanks for this tip — ran across it in a google search. Loving Chrome’s light and sleek interface but hadn’t found a good way to manage my sig. I’m cruising along now, thanks to you!
December 25, 2009 at 1:42 pm
How can u do that to put the text over the picture, not under that ?
January 12, 2010 at 6:05 pm
This is very useful!!! Thank you, i just trying to figure out how to enable this in my Google app email
March 22, 2010 at 6:28 am
Hi Zach,
We love your post!
You might want to check out WiseStamp Email signatures to create a signature that simply works STANDS OUT.
We currently support Chrome and Firefox http://www.wisestamp.com
With WiseStamp you can not only automatically insert your signature to email’s but easily add your social profiles,updating rss feeds and so much more…Check it out!
Please feel free to email me and let me know what you think.
Looking fwd,
Josh ツ
April 1, 2010 at 11:59 pm
What a very nice script thank you so much for solving my problem with the sig
April 25, 2010 at 5:39 pm
Great! Now why did I not find this earlier.
I wondered how you put in your little icons for twitter etc and the end of your signature. Looks good.
May 9, 2010 at 9:23 am
Have you seen this: http://www.wisestamp.com/google-chrome-extension
Works great for gmail signatures.
June 22, 2010 at 7:34 am
[...] DiggOne of the more popular posts around here dealt with an early bookmarklet hack that made it possible to have HTML email signatures in Gmail with Google [...]
September 20, 2010 at 10:21 pm
now you can include html or rich text signature directly inside gmail, no need for hacks or third-party scripts. you can visit http://knol.google.com/k/sumit-roy/how-to-create-… for some customizations tips and tricks.
November 4, 2010 at 7:56 am
I would like to share a new email signature service I created. The service is widely compatible with virtually all email clients. Try it out at bumperize.com .
Bumperize