How to create click-to-call links for mobile browsers

Remember: most mobile devices are also phones! So, why not create link-to-call actions? If you’re creating a business guide, or even for your own unique phonebook, most people will prefer to call a person instead of filling in a form on the device.

In this article, we analyze the new URI schemes, some meta tags and also how to call Skype or Facetime applications from a website.

This content is partially extracted from my book “Programming the Mobile Web”, published by O’Reilly.

The tel: scheme

The first de facto standard (copied from the Japanese i-Mode standards) is to use the tel: scheme. It was proposed as a standard in the RFC 5341, but be careful because most of the parameters proposed there do not work on any device.

Today, we can find support for tel: URI-scheme in almost every mobile device, including: Safari on iOS, Android Browser (image above), webOS Browser (image above), Symbian browser, Internet Explorer, Opera Mini and low-end devices browsers.

The very basic and simple syntax is:

<a href="tel:+1800229933">Call us free!</a>

If the user activates a call link she will receive a confirmation alert asking whether to place the call, showing the full number. This is to avoid frauds tricking the user into calling another country or a premium number.

I recommend inserting the phone number in the international format: the plus sign (+), the country code, the local area code, and the local number. We do not really know where our visitors will be located. If they are in the same country, or even in the same local area, the international format will still work.

What happens when the user clicks

While many browsers, like iPhone, Android, Nokia and BlackBerry offer a confirmation alert for the call action, Sony Ericsson’s NetFront browser presents the user with a menu proposing different actions to take.

Some non-phone mobile device (like iPod Touch, iPad), don’t allow voice calls. Instead, they show a prompt to add the phone number to the phonebook (see the image below).

Sending DMTF Tones

Some devices also allow sending DMTF tones after the call has been answered by the destination. This is useful for accessing tone-controlled services, helpdesk systems, or voicemail; you can say to the link, “call this phone number and, when the call is answered, press 2, wait 2 seconds, and then press 913#”. You do this using the postd parameter after the number: the syntax is ;postd=. You can use numbers, *, # (using the URL-encoded %23 value), as well as p for a one-second pause and w for a wait-for-tone pause.

This function doesn’t work on all mobile devices, but on devices that don’t understand it, the primary telephone number should at least be called. The compatibility list for this feature is complex, and I don’t recommend relying on it.

Autodetecting phone numbers

The BlackBerry browser and Safari for iOS (iPhone/iPod/iPad) automatically detect phone numbers and email addresses and convert them to links. If you don’t want this feature, you should use the some meta tags.

For Safari

<meta name="format-detection" content="telephone=no">

For BlackBerry

<meta http-equiv="x-rim-auto-match" content="none">

Opening native applications

There are some native applications that can be opened from a link, mostly from iOS. One sample is the Facetime videochat application from iPhone 4 and iPod Touch. From iOS 4.1 we can use the facetime: URI to open the Facetime application and call somebody, for example:

<a href="facetime://5555555555">Call us free using Facetime!</a>

Skype for iOS is another application having its own URI-scheme. We need the Skype username. Optionally, we can add a ?call parameter to initiate immediately a call. Without it, we will see the user’s profile instead.

<a href="skype:skype_user?call">Call us using Skype!</a>

Remember that there is no way to detect on-the-fly if the user has the native application installed. You can find on my book a little hack to solve this problem.

There are no URI-schemes for Google Voice for iOS published until now.

WTAI: scheme

Although the table below shows that it is not as well supported as tel:, the other way to originate a call is using the WTAI standard, via the wp public library and the mc (make call) function. As I mentioned in my book, the WTAI is an old standard coming from the WAP 1.0 era and available from WML. . This URI-scheme was created for contacting public libraries on the device and it is not working on Safari on iOS or webOS Browser.
<a href="wtai://wp/mc;+1800229933">Call us free!</a>

WTAI also accepts a link to be used while the call is in progress, but this is useful only if the user is in hands-free mode or using a headset. This link can include tones to be sent to the destination as if the user had pressed them on the keypad, specified using the wp library’s sd (send DTMF tones) function.

Making radio calls

iDEN networks (like Nextel) use radio packets to make internal calls inside the network. If you are working with customers of such a network—for example, for an intranet—you can allow users to launch internal calls to other members of the team (or external calls) using the Direct Connect URL scheme ([inlinecode]dc:[/inlinecode]). This is also compatible with BlackBerry iDEN devices:

<a href="dc:5040*0077">Ping John</a>

Invoking video-calls

Some models present users with a submenu when they click a tel: link so they can choose whether to place a voice-only or a video call (available in 3G systems). Some Japanese phones also allow you to specify that a link should initiate a video call, using the protocol tel-av:.

Other techniques

Do you know any other technique? Feel free to add it on the comments sections below.

Share

Tags: , , , , , , , ,

Comments, ideas, questions?

Loading Facebook Comments ...
  1. #1 written by Jorge Grippo November 18th, 2010 at 20:42

    Muy útil! Lo voy a implementar inmediatamente. Gracias!

    RE Q
  2. #2 written by Luke November 30th, 2010 at 14:57

    Hi thanks for this amazing resource!

    I recently added this to our business website and was wondering how I could best detect only certain browsers (that is, mobile browsers plus iPad etc) to convert any phone numbers to tel: links format.

    I ended up looking at a few basic user agents and then wrapping the number with jQuery.

    Is there a simple future-proof subset method you know of?

    I know with jaavscript and so on one would normally test-check what the browser can do – what it supports . So I wonder is there a way to test for support of the tel: protocol? In one of my tests on Internet Explorer you see the tel: protocol broke the browser (no surprise there!)

    many thanks

    Luke

    RE Q
  3. #3 written by Dan Anos February 24th, 2011 at 17:59

    When using Phonegap, the tel: prefix doesn’t work when in the page (under webos/jqtouch), does anybody have any experience of this?

    RE Q
  4. #4 written by Joe May 15th, 2011 at 17:17

    Great tip – thanks! How can I disable this click-to-call on regular browsers (non mobile devices) because currently it says page cannot be found when browsing from a desktop.

    Thanks!

    RE Q
  5. #5 written by nani July 15th, 2011 at 19:40

    Will it work on all mobiles.I have problem with I pod Touch..how do I reslove it.

    RE Q
  6. #6 written by firt July 15th, 2011 at 19:46

    iPod Touch is not a phone, so you can’t make calls there

    RE Q
  7. #7 written by Anders October 19th, 2011 at 08:36

    Hi – have you heard of a way to insert content into a text message using the Send link! syntax?
    I wish to insert the link to the mobile-page, so that the customers can share the url by SMS.

    Best regards,
    Anders

    RE Q
  8. #8 written by firt October 19th, 2011 at 08:45

    You should use sms:?body=Something. However it will not work on every phone

    RE Q
  9. #9 written by Anders October 19th, 2011 at 11:52

    Thanks! Unfortunately, I can only get it to open the text box, but no number or text is included.

    RE Q
  10. #10 written by Kevin Mukhwana February 7th, 2012 at 04:04

    @Joe
    Hey Joe don’t know if you figured this out already but this is what you can do Call +1800229933

    Then add this CSS Class for non-handheld devices
    .handheldOnly {visibility:hidden;}

    RE Q
  11. #11 written by Emily February 28th, 2012 at 21:15

    I noticed this phone number only has 10 digits instead of the standard 11. (1-800-229-933) This may be a stupid question, but does having the + require the phone number to be only 10 digits?

    RE Q
  12. #12 written by Lars March 17th, 2012 at 17:48

    Is there any way to write code that forces Skype to start a video call instead of just a voice call?

    This starts a voice call:
    Call us using Skype!

    Any code that starts a video call?

    RE Q
  13. #13 written by Yaeger Design April 11th, 2012 at 19:32

    You can also use the “callto” function:


    +1 555 555 5555

    RE Q
  14. #14 written by Yaeger Design April 11th, 2012 at 19:34

    That href value should be “callto:+15555555555″, just like a “mailto:” email link.

    RE Q
  15. #15 written by firt April 11th, 2012 at 23:28

    Well, be careful with that because as far as I know it’s not part of any standard and it should work only on some browsers. Tel is the right way to do it and it will work on most mobile browsers. callto sometimes works with Skype only.

    RE Q
  16. #16 written by Robert April 15th, 2012 at 14:33

    I put in the code as this article states above:

    Call us!

    and get a “web page not found” error when I try to click it on my Android phone (Samsung SPH-M820). Does anyone know why the code will not allow me to call when clicked? Website this code is installed on is linked to my name on this post. TIA.

    RE Q
  17. #17 written by Robert April 15th, 2012 at 14:50

    Ok. For some reason, the code I meant to show in my previous post became a link in my post. Let’s try this again. The code I put on my website is:

    Call us!

    If anyone know why I get a “web page not found error” when I click on it with my Android phone, please post a fix. TIA.

    RE Q
  18. #18 written by firt April 15th, 2012 at 14:54

    Robert, it seems you didn’t read the article you are commenting on ;) You must use the tel protocol to have a working link, your href attribute should be tel:+1262…. Regards!

    RE Q
  19. #19 written by Robert April 15th, 2012 at 14:56

    Sorry for 3rd post. This time I put ” ” around my code to keep it from turning into a link:

    Call us!

    Just remove ” ” to see what I put in my website.

    If anyone knows why I get a “web page not found error” when I click on it with my Android phone, please post a fix. TIA.

    RE Q
  20. #20 written by Robert April 15th, 2012 at 15:02

    firt, I apologize that my attempt to put the code here keeps turning into a link. I am using the given protocol tel:+1262… but still get a “web page not found error” on my Android phone. Could it be my phone? Does my link allow you to call on your phone? Thanks for your reply. This is very frustrating for me.

    RE Q
  21. #21 written by maria vargas May 8th, 2012 at 23:49

    I am having the same problem that Rober #19 an d#20 post is having. My link format is:

    and I get a “web page not found error” also.
    somewhere I found advice that said to add a ? at the end of the number, but that didn’t work either.

    Thanks for you input!
    MV

    RE Q
  22. #22 written by firt May 9th, 2012 at 01:03

    Maria, I’m not seeing that you are actually using tel: as the protocol in your URL

    RE Q
  23. #23 written by Raks May 14th, 2012 at 12:14

    Firt, Do you know if the SMS uri would work with the body attribute in Android and iPhone, I tried in Android but it did not work, with only the number it works.

    RE Q
  24. #24 written by firt May 14th, 2012 at 21:07

    For security reasons (premium SMS), some platforms don’t allow body definition, they will just ignore the value

    RE Q
  25. #25 written by Yatendra June 8th, 2012 at 05:38

    hi,
    how can i make click to sms as like calick to call function (tel:1234567890)
    what i have to do for sms.

    RE Q
  26. #26 written by firt June 8th, 2012 at 15:35

    Hi! You can use the sms: protocol, for example: sms:123455. On some platforms you can define also the body sms:12123?body=Hello

    RE Q
  27. #27 written by kuri June 20th, 2012 at 04:18

    Hello, I have a wordpress site and my tel: links were turning into links like maria’s [deleted?] when clicked. I had to add tel: to the list of whitelisted protocols. Maybe this will be relevant to someone else: http://core.trac.wordpress.org/attachment/ticket/18469/formatting.php.patch

    RE Q
  28. #28 written by MegaMind July 11th, 2012 at 08:05

    Hello, im working on a website that will help my ipad users to purchase internet bundles.. the dial number will be *149*01#.. how can i create that since i have seen SIM APPLICATION working fine on Ipads

    RE Q
  29. #29 written by Zeke July 12th, 2012 at 14:59

    Emily : I noticed this phone number only has 10 digits instead of the standard 11. (1-800-229-933) This may be a stupid question, but does having the + require the phone number to be only 10 digits?

    @Emily

    Emily, thanks for your addressing this.
    But, is there something I am missing? tel: works great on mobile browser but from computer browser I get:
    “The address wasn’t understood
    Firefox doesn’t know how to open this address, because the protocol (tel) isn’t associated with any program.

    You might need to install other software to open this address.”

    Ideally, when they click the number from their computer they can choose between google voice, skype or any other IP-based phone service.

    “callto” does not seem to consider google voice as an option, and it does not work on (android) mobile devices.

    I entered the css you suggested, but I know I am missing something. Thanks!
    Zeke

    RE Q
  30. #30 written by Rich Rosen August 8th, 2012 at 20:57

    Any ideas how to determine if a call is made? Does ios or android pass any call results? ideas?

    RE Q
  31. #31 written by firt August 8th, 2012 at 21:00

    Rich; no way to know if the call was made or not unfortunately.

    RE Q
  32. #32 written by Robert Adams August 17th, 2012 at 21:37

    The article makes a mention of “Some non-phone mobile device (like iPod Touch, iPad), don’t allow voice calls. Instead, they show a prompt to add the phone number to the phonebook”

    Is there a way, when someone clicks a tel:# link for that prompt to be added?

    I am creating a mobile emergency web app that requires client to ‘save’ a phone number in case of emergency, of course on iPhone and Androids.

    Any ideas how to get that prompt or even both prompts (Call Number, Save Number)

    Thanks,
    rad1964

    RE Q
  33. #33 written by firt August 18th, 2012 at 13:44

    Unfortunately, there is no standard way to do that today.

    RE Q
  34. #34 written by Nick September 28th, 2012 at 13:40

    Re #30 – The way that I track this is to use a dedicated phone number within the “tel: ” section. I then compare the page loads of the mobile site against the call records from the phone number provider, which gives a ratio of viewers to callers.

    It’s not as snappy as having the click count picked up automatically, but it works.

    While I’m here: is there a way to add a company name as well as the phone number to the call confirmation screen that the user sees? Just be nice to have both showing.

    RE Q
  35. #35 written by Redy October 8th, 2012 at 15:16

    Hi,
    I am building a mobile web app which has click to call functionality. Here i am using Call us . This is working fine everywhere except in HTC WildfireS with 2.3.3 version only. In this device, when i click on the link, it popups up with Voice call or Video call. Also, browser address bar is updating with tel:18002299338 in the background which is not expected. Can this behavior fixed in this device ?

    RE Q
  36. #36 written by Roger October 26th, 2012 at 15:16

    Hi I’m a designer from Brazil and I was trying to make a Nextel device call another Nextel device using the method described on the post (Example: Ping John), but couldn’t make it work. Am i missing something? I apologize if my question seems kind of stupid.

    RE Q
  37. #37 written by Vikram December 10th, 2012 at 10:15

    Is there a way to make click to skype calls for android browsers similar to iOS?

    RE Q
  38. #38 written by firt December 10th, 2012 at 19:19

    If the user has Skype installed, you should use the same protocol as in iOS

    RE Q
  39. #39 written by Babette February 8th, 2013 at 18:35

    I’m trying to make a click-to-call list in google docs to be used on my iPhone 4S and every method so far has failed. If I do it on a spreadsheet on the computer, I click link and fill in =hyperlink(callto:+15555555555,555-555-5555), it says Invalid link and erases it. I’ve also tried it with tel: and call:. Editing on the iPad and iPhone it just says #ERROR. It also doesn’t work with a google doc on the computer and on the mobile devices I can’t find the button for inserting a link in a doc.
    Is it possible? Should I try another app? Thanks for your help

    RE Q
  40. #40 written by Gaurav February 13th, 2013 at 10:27

    Hi I am working on a call forwarding setup program and want to run a script by using a callto:*21*9711915988# its working fine and showing value on mobile dialer screen. I need to dialed that nos automatically on click instead of manually press dial button some one please tell me the solution if we want to dial automatic on click

    RE Q
  41. #41 written by JK March 5th, 2013 at 12:31

    my number is *133#, its not supported. I tired tel:*121%23 but doesn’t work. # is a problem i guess.

    RE Q

SetPageWidth