HTML Email Signature in Gmail Using Google Chrome
chrome, email, google
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
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
Comment by Henry — February 7, 2009 @ 11:31 am
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!
Comment by Belinda — February 8, 2009 @ 4:26 pm
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/
Comment by zacheos — February 9, 2009 @ 7:21 am
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.
Comment by Rob — February 17, 2009 @ 6:57 pm
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.
Comment by zacheos — February 18, 2009 @ 11:54 am
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…
Comment by louieo — February 19, 2009 @ 4:13 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)
Comment by GeekFG — February 20, 2009 @ 3:30 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!
Comment by zacheos — February 20, 2009 @ 3:51 pm
Yep, I will update the script tonight
GeekFG’s last blog post… Modifier openWYSIWYG afin qu’il supporte Google Chrome
Comment by GeekFG — February 21, 2009 @ 11:17 am
Done. If you have other feedback don’t hesitate & contact me with my comment’s email.
Comment by GeekFG — February 21, 2009 @ 4:42 pm
Got it to work then when I closed down chrome and restarted it failed
same on opening a new tab
Any thoughts
Allan
Comment by Allan knox — February 26, 2009 @ 7:13 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?
Comment by zacheos — February 26, 2009 @ 7:54 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
Comment by Rob — March 19, 2009 @ 1:56 am
Great post and great signature. Where in FL are you located?
Ian Garlic’s last blog post… Open Up!
Comment by Ian Garlic — April 11, 2009 @ 9:04 am
Thanks… I am located in Palm Beach Gardens (SE Florida).
Comment by zacheos — April 11, 2009 @ 9:12 am
Thank you, this is great!
Comment by Tara — April 17, 2009 @ 7:44 am
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.
Comment by Cami — April 26, 2009 @ 8:51 pm
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.
Comment by Guzman — April 28, 2009 @ 11:30 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?
Comment by Clay S — May 5, 2009 @ 8:53 am
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.
Comment by zacheos — May 5, 2009 @ 3:29 pm
I tried also – no luck! Can you take a look please.
Comment by Shayne — May 31, 2009 @ 5:50 pm
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
Comment by hhotelconsult — June 3, 2009 @ 10:28 am
Cheers!!! Thanks a ton Zach…
Comment by Shirish — June 29, 2009 @ 6:45 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?
Comment by Eugene — July 20, 2009 @ 2:25 pm
Great stuff! I will be using this for a while I’m sure! Thanks.
Comment by Dustin — July 27, 2009 @ 11:26 pm
Any way to make this automatic everytime you hit the compose button? Thanks.
Comment by Mike — August 3, 2009 @ 7:27 am
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.!!!
Comment by yago amat — August 6, 2009 @ 1:16 pm
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.
Comment by WiredFire — August 24, 2009 @ 2:35 am
Disregard my last comment, works fine in Apps
^_^
Comment by WiredFire — August 24, 2009 @ 2:38 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?
Comment by Pedro Altomar — August 28, 2009 @ 8:16 am
AWESOME! Works like a charm!
Comment by Mayur Jobanputra — August 29, 2009 @ 4:51 pm
this is great. will it allow me to create multiple signatures?
Comment by dave — September 3, 2009 @ 4:27 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!
Comment by Marc — September 7, 2009 @ 8:57 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.
Comment by christopher — September 10, 2009 @ 6:44 am
How did you manage to work it out within the gmail app, without the bookmark bar?
(as not within the browser itself)
Comment by ene — September 14, 2009 @ 4:41 pm
How did u get it to work in apps without the bookmark bar?
Comment by ene.xis — September 15, 2009 @ 2:54 am
I’m having to insert the signature each time I email. Should I have to do that or am I doing something wrong? Thanks!
Comment by John Felkins — October 6, 2009 @ 2:45 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
Comment by Andrea — October 7, 2009 @ 8:47 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.
Comment by zacheos — October 7, 2009 @ 8:59 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.
Comment by zacheos — October 7, 2009 @ 9:01 pm
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.
Comment by Zhigang Wu — October 10, 2009 @ 6:48 am
Great! It works! it took me sometime to copy the correct link. But I didi it. THKS!
Comment by Cristobal — October 13, 2009 @ 1:48 pm
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.
Comment by Chris Martin — October 16, 2009 @ 10:23 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.
Comment by zacheos — October 16, 2009 @ 10:35 am
I generate signature from MyBlogLog Widget feature and then follow your step. It done. That’s terrific info. Thx.
Comment by Maxie — October 21, 2009 @ 12:10 am
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?
Comment by Petrus4 — October 23, 2009 @ 3:16 pm
I also used the “canned response” google labs plugin to have html or images in my signatures. It works really well! Thanks Guzman!
Comment by Petrus4 — October 23, 2009 @ 6:17 pm
It doens´t work here…ooooooo GOSHHH
I did all you said…. doesn´t work on GMAIL for me
Comment by andre — November 7, 2009 @ 6:32 pm
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!!!!
Comment by miti — November 13, 2009 @ 9:23 am
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.
Comment by Fiona — November 18, 2009 @ 5:54 pm
Has anybody managed to get this to work in google apps for domains? How did you it? It doesn’t work for me.
Comment by Jason — November 23, 2009 @ 10:22 pm
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!
Comment by Tammy Lenski — December 9, 2009 @ 8:16 am
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
Comment by Autopen Staff — December 17, 2009 @ 5:55 pm
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.
Comment by zacheos — December 18, 2009 @ 9:30 am
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.
Comment by Autopen Staff — December 18, 2009 @ 12:21 pm
How can u do that to put the text over the picture, not under that ?
Comment by griffin — December 25, 2009 @ 1:42 pm
This is very useful!!! Thank you, i just trying to figure out how to enable this in my Google app email
Comment by Hen — January 12, 2010 @ 6:05 pm
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 ツ
Comment by Josh @WiseStamp — March 22, 2010 @ 6:28 am
What a very nice script thank you so much for solving my problem with the sig
Comment by r4 kaart — April 1, 2010 @ 11:59 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.
Comment by Ben — April 25, 2010 @ 5:39 pm
Have you seen this: http://www.wisestamp.com/google-chrome-extension
Works great for gmail signatures.
Comment by scott — May 9, 2010 @ 9:23 am