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 class="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 class="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 class="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 class="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 class="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.
Tags: android, blackberry, html, ios, ipad, link, nokia, samples, webos
This entry was written by Max Firtman and posted on Thursday, November 18th, 2010 at 6:29 pm and is filed under Code samples. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
#1 written by Jorge Grippo November 18th, 2010 at 20:42
Muy útil! Lo voy a implementar inmediatamente. Gracias!
#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
#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?
#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!
#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.
#6 written by firt July 15th, 2011 at 19:46
iPod Touch is not a phone, so you can’t make calls there
#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
#8 written by firt October 19th, 2011 at 08:45
You should use sms:?body=Something. However it will not work on every phone
#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.
#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;}