Pinterest Stumbleupon Whatsapp
Ads by Google

add photo to email signatureIf you’re looking for a way to spruce up your boring, old, static, text-only email signature into something more exciting and interactive, here’s how. Not only will it attract more attention to your signature and making it look more impressive; it will also liven up the mundane task of sending emails.

Before we start, let me lay out the things you will need:

This entire tutorial will transform your email signature from this:

add picture to signature

to this:

add picture to email signature

Ads by Google

If you’re still excited, then read on. But be warned, depending on your level of geekiness, this process may or may not be easy for you. [Disclaimer: this tutorial is actually an improved version of this one]

First step – Making a HTML signature

You have to understand that in order to insert HTML in your email signature and make it interactive, it’s actually two different procedures. The first is to change it into HTML, the second is by using Signature Profiler and adding the interactive stuff: iTunes status, random quote, Skype button.

Let’s focus on the HTML part first. You’ll need to open up TextWrangler and create your HTML signature. There are some limitations to adding HTML – for example, GMail does not recognize body or style tags and all CSS must be embedded. Head here to read more about CSS in email.

If you have no idea where to start, use this example HTML file as a base to mess around with. If you want, you could tweak it to fit your style. You should fill in your name and social sites where the fields indicate. Also, you’ll need to upload your avatar to Divshare or Box.net, get the direct image link and insert it in the image tags. The size of the image varies and depends a lot on the style of your signature and how many lines of text you will have. Like I said, you will need to play around and customize it yourself.

If you notice, there’s a specific line of text after the second break, {itunes.display.info} is used later to retrieve your iTunes status.

To see how your signature will look like, save it (to the desktop or anywhere else convenient) and drag it into Safari. Once you’re happy with the results, click on the File menu and Save as ‘webarchive’ onto your desktop. Name it “HTML sig”. We’ll return to it later.

Step two – Show your currently playing song

Now that you have your HTML signature all set, you’re ready to add the interactive stuff like iTunes status and Skype buttons.

add skype button to email signature

Download and install the Signature Profiler plugin for Mail and restart Mail. It should now be added into your Mail preferences.

Here’s what SigPro can do:

  • Add iTunes currently playing song, artist and album
  • Add a Tail signature
  • Add a random text qoute
  • Add your Skype Status and buttons to call you
  • Lots more advanced stuff like calling scripts

If you’re planning to show your iTunes status, then you’ll need to create signatures for them. Personally, I’ve only created two new ones: one to show the song iTunes in playing, and another when it is paused, stopped or not running. To do this, you’ll need to go to the Signature tab in Mail preferences. Create a new signature and call it “iTunes playing”. Right click in the signature field and you’ll notice that SigPro has added their Replacements into the menu.

Add the items {itunes.playing.song}, {itunes.playing.artist} and {itunes.playing.album} into the signature field from the right-click menu. Now all you need to do is to customize it. Here’s what I would write: I’m listening to {itunes.display.song} by {itunes.display.artist} from their album {itunes.display.album}.

Keep in mind that these are just text, so you can adjust the font attributes. You’ll need to select the curly brackets as well when changing the size and colour of the fonts, if not you’ll lose the formatting.

Now, make another signature for iTunes’ paused state. It doesn’t need to have any fields in it, just a short message will suffice.

After you’ve done that, go to SigPro’s tab in Mail preferences and hit the ‘iTunes & Quotes’ tab. For each iTunes state, select the appropriate signature. Now test it out! Play iTunes and see if the signature changes (it will change right there in Mail preferences).

Step three – Swapping your text signature for the interactive one

If you already have a plain text-only signature set in Mail, good. If not, set one up and associate it with an account (by dragging the signature from the middle column into the appropriate email account in the left column). Quit Mail.

After you’ve done that, go to ~/Library/Mail/Signatures/ and you will find all of your signatures in webarchive format. Assuming that you only have one email account set up in Mail, you will have three signatures: your regular signature, “iTunes Playing” and “iTunes Paused” signatures. To find out which is the one you want to change, double-click them to open in Safari until you find them.

Once you’ve located it, copy its file name. It should look something like this “F61C8250-DE9F-4B33-A17D-2F5FF6E3B5B9” (without the webarchive extension). Rename the “HTML sig” file on your desktop with this file name. Drag the new signature file from the desktop into the ‘Signatures’ folder and replace the older signature file.

Open Mail and your signature is now HTML and interactive.

A few things to remember: The avatar doesn’t load in Mail’s preference but it will load when composing a new mail. Also, any changes made in the HTML signature will be hard to repair. For instance, if you accidentally delete the avatar logo from the signature, you will have to start from scratch again. Keep a copy of the ‘webarchive’ files so that you can restore your signature in case of a disaster.

You can also add other stuff (like the Skype button) into your signature by right-clicking and selecting fields from the SigPro Replacement menu. If you want more control over its formatting, then I suggest that you add the fields by editing the HTML signature in TextWrangler.

If you’re into this kind of thing but don’t use Mac, then I would recommend that you check out Saikat’s article on creating multiple singature in Gmail 5 Ways To Create Custom Multiple Signatures In GMail 5 Ways To Create Custom Multiple Signatures In GMail Read More . Retaggr is also an easy way to add a funky signature to your emails, David mentioned it earlier in his post about how to create online business cards 5 Ways To Create Your Business Card 2.0 5 Ways To Create Your Business Card 2.0 Read More .

Please ask if you have any questions about this tutorial or if you somehow screwed up and need help. What are the other methods you use to interactify/interactize your email signature? Let us know in the comments.

  1. tada pa
    January 23, 2010 at 10:25 am

    it doesn't work for me... it's showing a question mark in place of the picture besides, the lines are not sent, just the text... I realized that if I check the box "Always match my default message font" and uncheck it, the image is displayed, however it's not really sent to the emails... instead of it it's displayed a gray square... does anyone knows how to fix it?! I'm trying this for a couple of days... no success so far.
    thanks in advance

  2. Noicroek
    December 22, 2009 at 2:22 am

    hm... thanks for thoughts..

  3. forexsignals
    December 14, 2009 at 6:49 pm

    The Forex possibilities, allows to infinitely the , to labyrinth . Our unshackled forex signal - of ways to this knowingly. more info on smartforexsignal.com

  4. margosha
    November 7, 2009 at 1:47 am

    Любите смотреть сериалы. Зайтите на сайт о Маргоше. Описание сериала можно отыскать ЗДЕСЬ.

  5. margosha
    November 5, 2009 at 6:53 am

    Мы подготовили современный журнал про актеров сериала маргоша. Только тут можно бесплатно скачать сериал маргоша. Представляем Вам актуальные новости про актеров сериала маргоша. Здесь красочные фотографии из сериала маргоша

  6. margosha
    November 5, 2009 at 6:52 am

    Мы подготовили современный журнал про актеров сериала маргоша. Только тут можно бесплатно скачать сериал маргоша. Представляем Вам актуальные новости про актеров сериала маргоша. Здесь красочные фотографии из сериала маргоша.

  7. James Smith, João Pessoa, Brazil
    November 3, 2009 at 10:15 am

    I do this a much easier way. I have my signature as a .jpg file. I created the text I wanted in a Word processor, such as OpenOffice, inserted what graphics I wanted, formatted everything and then took a screenshot of just the part I wanted to use. Then in Mail of Thunderbird (the one I use) list the .jpg file as your signature.

    Very easy and it can contain anything I want.

  8. ian Weatherhead
    March 17, 2009 at 8:56 am

    cheers for that I have now had a look in the area you mentions (what an Idiot I am) however I still do not have the signature folder

  9. Aaron
    March 17, 2009 at 8:43 am

    I have a new issue. Mail is not auto selecting my signatures. Is there a checkbox I'm missing?

  10. ian Weatherhead
    March 17, 2009 at 7:55 am

    Hello I have generated a webarchive file on my desktop and how want to use this as my signature how do i use this - I have not used any of the itunes or skype facilities as I only wanted a text signature with our logo inccoroprated - please help

    • Jackson
      March 17, 2009 at 8:13 am

      Read step #3 - make a regular signature for your mailbox. Quit Mail. Open the signatures folder in ~/Library/Mail/Signatures/ and there should be only 1 signature file (if you only have 1 active signature) in a the form of a webarchive file. Copy its name and rename the signature webarchive file you've just generated on your desktop with the filename. Replace the original file with the newly generated one (drag & drop into the signatures folder). Relaunch Mail and test.

      Let me know if that works for you.

      • ian Weatherhead
        March 17, 2009 at 8:49 am

        I have looked on my Mac and I cannot find any folder labled "Signature" - I went to "macintosh HD" then "Library" Then "Mail" and the only folders within here are "account types", "Bundles", "Bundles (disabled)" no signature or webarchive files can you help?

        • Jackson
          March 17, 2009 at 8:52 am

          The little tilde ~ means your home folder. That's the icon of the house labelled with your short username. That's where you start. Not your root drive (Macintosh HD).

        • Aaron
          March 17, 2009 at 8:53 am

          Go to your home folder (with the house icon) then library/Mail/etc. Its in there.

          I'm using 10.5

        • ian Weatherhead
          March 17, 2009 at 9:02 am

          I have had a look at this area and have now located the Library folder then mail but again no signature folder

        • ian Weatherhead
          March 17, 2009 at 9:05 am

          All working now cheers for your help

        • Jackson
          March 17, 2009 at 9:05 am

          Ian,

          This probably means that you haven't created a regular signature in Mail. Make one and associate it with an account, then continue.

  11. Aaron
    March 12, 2009 at 1:50 pm

    I followed the steps but when I add the signature I see it twice. very odd. Not sure how to have it only show once. My photo and all the next is doubled (stacked that is, as though its been added twice).

    Any help is welcome.

    A

    • Jackson
      March 13, 2009 at 1:07 am

      Aaron,

      Email me directly at jackson (shift+2) makeuseof.com and we'll try to work it out. Send me a copy of the code you're using and a screenshot as well.

      Jackson

  12. Evan
    March 1, 2009 at 6:40 pm

    Hey
    I found my mistake! I needed to open the file in Safari and save it from there, as a webarchive.

    It works now!

    Thanks for posting this.

    • brian
      October 21, 2009 at 1:29 pm

      Mine keeps coming up blank. I do not see an option to save as webarchive only .html?

      • Jackson Chung
        October 21, 2009 at 2:05 pm

        You need to edit the sample HTML file in TextWrangler, save it, then open it again in Safari.

        • brian
          October 21, 2009 at 4:21 pm

          Thanks. I get that far, what do I save it as? .html? There is not an option (atleast that I can see) to save as webarchive.

        • Jackson Chung
          October 21, 2009 at 4:27 pm

          I don't understand why you can't save it as a webarchive file. What you can do is save it as a page source file (HTML) and make sure not to hide the extension. Then rename the resulting file and change the extension from .html to .webarchive

  13. Evan
    March 1, 2009 at 5:54 pm

    Jackson.

    Thank you fro this tutorial. It is great. I do have a question. I am trying to create a signature ( but without the itunes application for now). I edit the template in TextWrangler. I save it with the same name as the signature I want to override but when I drop it in the Signature Folder, the signature now comes up blank, nothing. Any help? I save it without the .webarchive extension ,add the webarchive later and still nothing. I have saved it as overriding the file directly, still nothing.

  14. Scott Little
    January 22, 2009 at 9:07 am

    Hello Jackson,

    Thanks for the plug here!

    One thing to note is that your step three can be avoided by simply choosing the "replace with Webarchive..." menu item in the newly created signature. This avoids the whole identifying the correct name and copying the webarchive created in step one.

    Hope that makes it easier for people.

    Scott

    • Jackson
      January 22, 2009 at 5:28 pm

      Hi Scott,

      Thanks for dropping by. Maybe you could tell our readers about the little known features of SigPro? A useful example for the script-calling feature perhaps?

      Always appreciate developers dropping by!

Leave a Reply

Your email address will not be published. Required fields are marked *