Post Pic

How to use HTML Signatures in Gmail (Google Mail)

We pride ourselves on our branding and our heavy use of Google services here at MentorMate. For some reason Gmail does not have a built-in feature supporting HTML Signatures. After several iterations of designing workarounds, we’ve decided to share the best one we’ve come up with. Enjoy!

Plain Text Signature

First of all you need to decide on the plain text you will input into your default text-only signature.

Example

Full Name

Job Title

www.spydermate.com

Example Code

Full Name<br>Job Title<br><br>www.spydermate.com

HTML Signature

Next you will need to design the HTML signature version of the same signature.

Example

Full Name

Job Title

www.spydermate.com

Example Code

<span style="font-family: Verdana;font-size: 18px;color:#ff943b;font-weight:bold;">Full Name</span><br/><span style="font-family: Verdana;font-size: 11px;font-style: italic;">Job Title</span><span style="font-family: Verdana;font-size:11px;"></span><br/><br/>
<a href="http://spydermate.com"><img src="http://mentormate.com/images/spydermate-esig.gif" border="0" width="150"/></a><br/><br/>
<span style="font-family: Verdana;color: #7f7f7f;font-size:11px;"><a href="http://spydermate.com" style="font-family: Verdana;font-weight:bold;color:#ff943b;">www.spydermate.com</a></span>

Javascript Bookmark

Next a Javascript Bookmark must be setup to find the Plain Text Signature and replace it with the HTML Signature

Example Code

javascript:void ((
function(){
  if (!document.getElementById("Ijquery")) {
    var noeud_js = document.createElement("script");
    noeud_js.setAttribute("type", "text/javascript");
    noeud_js.setAttribute("id", "Ijquery");
    noeud_js.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
    document.getElementsByTagName("head")[0].appendChild(noeud_js);
  }
  function jquery_loaded(){
    var tmp = "false";
    try {
      tmp = $("body").text();
    } catch (erreur) {
      tmp = "false";
    } return tmp;
  }
  function verif_loaded(){
    var temp = jquery_loaded();
    if (temp != "false") {
      clearInterval(interval);
      code();
    }
  }
  var interval = window.setInterval(verif_loaded, 100);
  function code() {
    var gsig = "Full Name<br>Job Title<br><br>www.spydermate.com";
    var htmlsig = "<span style=\"font-family: Verdana;font-size: 18px;color:#ff943b;font-weight:bold;\">Full Name</span><br/><span style=\"font-family: Verdana;font-size: 11px;font-style: italic;\">Job Title</span><span style=\"font-family: Verdana;font-size:11px;\"></span><br/><br/> <a href=\"http://spydermate.com\"><img src=\"http://mentormate.com/images/spydermate-esig.gif\" border=\"0\" width=\"150\"/></a><br/><br/> <span style=\"font-family: Verdana;color: #7f7f7f;font-size:11px;\"><a href=\"http://spydermate.com\" style=\"font-family: Verdana;font-weight:bold;color:#ff943b;\">www.spydermate.com</a></span>"; var h = jQuery("iframe:last").contents().find("iframe:last").contents().find("body.editable").html();
    h = h.replace(gsig, htmlsig); jQuery("iframe:last").contents().find("iframe:last").contents().find("body.editable").html(h);
  }
} )())

Gmail Settings

Next Gmail must be setup to use the Plain Text Signature. Then the Signature tweaks feature in Gmail Labs needs to be enabled. Once all these steps have been completed, the user simply has to compose an email and click on the Javascript Bookmark in order to use their HTML Signature. The best part about this method is that even if the user forgets to click on the Javascript Bookmark for the HTML Signature, at the very least the Plain Text Signature will always be there.

Known Issues

This script will not work while a chat window or a task window is open in Gmail. These windows must be closed before this script can be used properly. We’ve also noticed that this script does not find and replace properly in FireFox while running the Personas Add-On. If you know of any other issues with this script specific to a certain browser or plugin to a certain browser, please make a note of them in the comments.

WiseStamp

If you use FireFox as your primary browser you can simply use the FireFox Add-On WiseStamp (https://addons.mozilla.org/en-US/firefox/addon/8206) to accomplish the same result. However, the solution we just described above will also work in other browsers and does not require any additional browser add-on installations.

We Would Appreciate Hearing Your Thoughts

* Name, Email, Comment are Required
MN Custom Software Development | MentorMate
Free SEO Analysis & SEO Tools | SpyderMate
SEO Presentation Download

MentorMate's Tweets



Share be a pal and share this would ya?
How to use HTML Signatures in Gmail (Google Mail)