HTML Email Signature in Gmail Using Google Chrome
chrome, email, google
UPDATE: The script referred too below, email signature generator has been updated. You may now choose to place your signature above the reply, and you may also add their bookmarklet directly to your Chrome bookmarks bar.
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
Enjoy This Article?
Now is your chance to join our growing community! Be the first to know about great new articles like this one. Register for my Email Updates or RSS Feed today!About the Author
Zach is a marketing consultant and owner of a FL web design and marketing group. He offers graphic design and marketing services, speaks on Internet marketing, and blogs about it all in his free time. (»)
Contact Zach: Company Website | Email
Related Posts
February 7, 2009 @ 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
Reply
Autopen Staff
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
Reply
zacheos
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.
Reply
Autopen Staff
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 @ 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!
Reply
zacheos
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/
Reply
February 17, 2009 @ 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.
Reply
zacheos
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.
Reply
February 19, 2009 @ 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…
Reply
Guzman
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.
Reply
February 20, 2009 @ 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)
Reply
zacheos
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!
Reply
February 21, 2009 @ 11:17 am
Yep, I will update the script tonight
GeekFG’s last blog post… Modifier openWYSIWYG afin qu’il supporte Google Chrome
Reply
February 21, 2009 @ 4:42 pm
Done. If you have other feedback don’t hesitate & contact me with my comment’s email.
Reply
February 26, 2009 @ 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
Reply
zacheos
Not sure I understand what your issue is… Is Google Chrome crashing when you insert the signature? Or crashing under other uses as well?
Reply
March 19, 2009 @ 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
Reply
April 11, 2009 @ 9:04 am
Great post and great signature. Where in FL are you located?
Ian Garlic’s last blog post… Open Up!
Reply
zacheos
Thanks… I am located in Palm Beach Gardens (SE Florida).
Reply
April 17, 2009 @ 7:44 am
Thank you, this is great!
Reply
April 26, 2009 @ 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.
Reply
May 5, 2009 @ 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?
Reply
zacheos
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.
Reply
Shayne
I tried also – no luck! Can you take a look please.
Reply
June 3, 2009 @ 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
Reply
June 29, 2009 @ 6:45 pm
Cheers!!! Thanks a ton Zach…
Reply
July 20, 2009 @ 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?
Reply
July 27, 2009 @ 11:26 pm
Great stuff! I will be using this for a while I’m sure! Thanks.
Reply
August 3, 2009 @ 7:27 am
Any way to make this automatic everytime you hit the compose button? Thanks.
Reply
August 6, 2009 @ 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.!!!
Reply
August 24, 2009 @ 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.
Reply
August 24, 2009 @ 2:38 am
Disregard my last comment, works fine in Apps
^_^
Reply
ene
How did you manage to work it out within the gmail app, without the bookmark bar?
(as not within the browser itself)
Reply
ene.xis
How did u get it to work in apps without the bookmark bar?
Reply
August 28, 2009 @ 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?
Reply
Chris Martin
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.
Reply
zacheos
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.
Reply
August 29, 2009 @ 4:51 pm
AWESOME! Works like a charm!
Reply
September 3, 2009 @ 4:27 am
this is great. will it allow me to create multiple signatures?
Reply
September 7, 2009 @ 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!
Reply
September 10, 2009 @ 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.
Reply
October 6, 2009 @ 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!
Reply
zacheos
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.
Reply
October 7, 2009 @ 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
Reply
zacheos
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.
Reply
October 10, 2009 @ 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.
Reply
October 13, 2009 @ 1:48 pm
Great! It works! it took me sometime to copy the correct link. But I didi it. THKS!
Reply
October 21, 2009 @ 12:10 am
I generate signature from MyBlogLog Widget feature and then follow your step. It done. That’s terrific info. Thx.
Reply
October 23, 2009 @ 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?
Reply
Petrus4
I also used the “canned response” google labs plugin to have html or images in my signatures. It works really well! Thanks Guzman!
Reply
November 7, 2009 @ 6:32 pm
It doens´t work here…ooooooo GOSHHH
I did all you said…. doesn´t work on GMAIL for me
Reply
November 13, 2009 @ 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!!!!
Reply
November 18, 2009 @ 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.
Reply
November 23, 2009 @ 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.
Reply
December 9, 2009 @ 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!
Reply
December 25, 2009 @ 1:42 pm
How can u do that to put the text over the picture, not under that ?
Reply
January 12, 2010 @ 6:05 pm
This is very useful!!! Thank you, i just trying to figure out how to enable this in my Google app email
Reply