Email, phone home: Initiating voice calls from HTML email newsletters

Initiating a call from an emailOnce upon a time, mobile devices were primarily used for calling other people. That was long ago and since then, we've graduated to using our iPhones and Androids primarily to play Angry Birds. Nonetheless, voice calling still has its place in the world.

There are loads of businesses that rely on phone calls to make their bread-and-butter - from Thai take-out joints, to your local salon. Perhaps even you and your clients fit into this category, too!

In this post, we're going to look at how you can get your subscribers to place calls from an HTML email newsletter received in their desktop, web or mobile email client. You heard it - we're not talking about maximizing click-throughs, but call-throughs. Featured is an example HTML email newsletter (pictured) which you can download, adapt and use to learn more about this technique.

Placing calls via email: the basics

If you check email on a mobile device, you may have noticed how some models parse phone numbers in messages and turn them into tappable links. These links allow you to conveniently place calls, by automatically switching from the email app to the phone interface on your device.

As of recently, Gmail has started doing the same thing, launching Google Voice in a similar manner to make it really easy to place calls via their telephony service.

Creating links for convenient calling is nothing new. Prior to either of the above hitting the scene, Skype URLs were commonplace on the web. In March this year, Skype hit a record 30 million simultaneous online users and can be installed on Windows and Mac machines, as well as on iOS and Android handsets.

It turns out that these methods can be adapted for use in HTML email. The resulting links can be customized, meaning that you can turn a phone number or Skype username into a bold call-to-action. To demonstrate, lets look at the example template (click to view):

Phone numbers in email demo

The 'Call:' button has been disabled in most browsers - we'll explain why and how shortly

Linking to telephone numbers and Skype usernames

When testing email newsletters on the iPhone and in Gmail, we found that both email clients automatically wrap phone numbers with <a> tags like so:

<a href="tel:555-666-7777">555-666-7777</a>

This can be a massive annoyance for email designers, as these 'new' tel: links tend to be bold, bright blue and often difficult to style with CSS.

Thankfully, there is a universal fix - preemptively adding your own tel: links to the HTML code. Using this method, you can also add phone number links wherever you see fit - let it be in your call-to-action, or surrounding a 'call us now' line in your copy:

To order a pizza, <a href="tel:555-666-7777">call us now</a>.

The same can be done with Skype links:

Skype us on <a href="skype:555-666-7777">555-666-7777</a>. 
Don't forget to add <a href="skype:abcpizza">abcpizza</a> to your contacts!

The downside to this method is that in order for the links to be detected in email clients, we can't convert them into tracking links for use in Campaign Monitor campaign reports. To turn off tracking specifically for these links, we use the cm_dontconvertlink attribute:

To order a pizza, <a href="tel:555-666-7777" cm_dontconvertlink>call us now</a>.

To make things even more testy, not all email clients know how to deal with tel: links. Obviously, Skype has to be installed on the recipient's machine for skype: links to work. With this in mind, here's what support looks like across the major email clients:


Desktop email clients Tel: Support Skype: Support
Outlook 2007/2010 No Yes
Outlook 2003 No Yes
Apple Mail No Yes
Windows Live Mail No Yes
Thunderbird No Yes
Webmail clients Tel: Support Skype: Support
Hotmail No No
Yahoo! Mail No Yes
Gmail Yes No
AOL No No
Mobile email clients Tel: Support Skype: Support
iPhone Yes Yes
Android (Gmail) Yes No
Android (default) Yes No
BlackBerry 6 OS Yes No
Windows Mobile 7 Yes No

While tel: support is great across mobile clients, it's spotty at best on desktop and in webmail clients. Conversely, skype: support is the bee's knees on desktop clients, it falls over on mobile and webmail clients (unless you have the Skype web toolbar installed).

Disabling tel: links in desktop and webmail clients

Given the inherit troubles in featuring tel: links in anything but mobile email clients, the best option is to simply turn them off. We'll do this by nesting the link text in a block-level element (eg. a table), wrapping this with the tel: link, then applying the following CSS:

a.disable-link {
	pointer-events: none;
	cursor: default;
}
...
<a href="tel:1800ABCPIZZA" class="disable-link" cm_dontconvertlink>
   <table>
      <tr>
          <td> Call: +1800-ABC-PIZZA </td>
      </tr>
   </table>
</a>

And voila! The tel: link above is inactive in Outlook, Apple Mail, Thunderbird and most browser/webmail combinations. Remarkably, Google Voice still picks up on tel: links, even with the workarounds above. That's a good thing.

In mobile email clients, we'll activate the link by using a @media query:

@media only screen and (max-device-width: 480px) {
   a[class="disable-link"] {
      pointer-events: auto !important;
      cursor: auto !important;
   }
}

Nicely done, if I say so myself.

The template, yours to download and tweak

Admittedly, this isn't a perfect solution, due to the lack of tracking and limitations with tel: support. However, if your business relies on phone enquiries, then you can build very innovative campaigns around this technique. Feel free to download the template, see how it works and refactor it for your own adventures in email and telephony:

Download the phone-friendly email template (zip file, 20kb)

A huge thank you to vlanzoiz for the inspiration and early testing and Panic, for letting me rip off their design again. If you have any questions or comments on initiating phone calls from email newsletters, we'd love to hear them in the comments below.

Posted by Ros Hodgekiss

17 Comments

  • Rhys
    5th October

    Given the massive rise in mobile client usage in our stats over the last few years this looks well worth testing. Shame we can’t track them but you can’t have everything.

    Good work, thank you.

  • Ed Melly
    5th October

    Awesome - I hadn’t thought to try and disable the link for desktop clients. That’s some smart CSS, and I’m shocked that Outlook obeys it. Nice work.

  • Scott
    6th October

    The table trick to disable the link on desktops is great - but if my phone number link is in the middle of a sentance, how would I keep it that way?

    This:
    Call 123-456-7890 to get more information.

    Becomes:
    Call
    123-456-7890
    to get more information.

  • Katie
    6th October

    This is a great idea. As mobile email use rises, it’s a no-brainer to make the telephone number the main call-to-action.

    Thanks!
    Katie

  • Rishi
    6th October

    this is an awesome idea. thanks for posting this tutorial

  • Stephen
    8th October

    Can you confirm that you don’t have to apply the style to a table?

    i.e. would the below work just as well:

    Call: +1800-ABC-PIZZA

  • Michigan Web Design
    8th October

    Wow - Never even thought about this! Thanks for the tip!

  • Treo
    8th October

    This was very informative! Thank you

  • Andrew Stromberg
    11th October

    Okay, that’s awesome. I’m thinking right now of some way to get this into a new or upcoming campaign for my clients. Thanks for the background as well as the file at the end.
    We’ve been keeping an eye on the clients used to read our latest messages and the iphone is quite high on the list.

  • s4ku
    11th October

    That’s a neat trick. Thanks for sharing.

  • Ros Hodgekiss
    13th October

    Thanks for the awesome feedback, everyone! Some really good questions here, which I hope I can help out with.

    @Scott - You may want to try wrapping the sentence in a 3 column table, then putting the tel: in its own cell, or even 1x1 table. Understandably this is a pretty messy way to go about things, however block-level elements are always going to be problematic like this (especially given that floats are a no-no) :/

    @Stephen - Two things here. First, the link has to be in the format: a href=“tel:12345678” (no http:// before the tel). It’s a bit like mailto: in that it doesn’t need to be prefixed by http://.

    Secondly, it will work great as a text link, but as mentioned above, you won’t be able to disable it in desktop clients unless you wrap it in a block-level element like a table. Remember the table is only being used to ‘fool’ some clients into ignoring the link - if this isn’t a concern, you’re more than free to use it like you have above. Hope that helps!

  • michael
    31st October

    What a great idea and tutorial. With the new online template-maker it would be great to have this as a button even non-coders could easily add to the sidebar of those slick new templates Campaign Monitor is providing.

  • Ryan
    4th November

    Is there anyway to get the phone button to just not show up at all in Outlook, et al?

  • Ros Hodgekiss
    4th November

    @Ryan - You can try using conditional comments to white it out. Outlook ‘07/‘10 doesn’t support display: none; which would be the most suitable solution. Of course :)

  • Ryan
    5th November

    display:none was my first attempt. Glad to know it’s MS not my own sloppy coding!

  • herdi
    30th November

    Is there anyway to disable phone link or date link in Gmail or Iphone?

  • Ros Hodgekiss
    30th November

    Hi herdi, you may want to take a look at this blog post on a couple of possible fixes. Good luck!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account