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.