Jump to content

How to Initiate a Phone Call from Your Mobile Website

+ 4
  Maximiliano Firtman's Photo
Posted Oct 11 2010 11:06 AM

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. The image below shows how link-to-call actions work on a few different devices.

Palm's webOS and Android show the call window when we activate a tel: link.

Attached Image

Fortunately, there are some URLs that will help us. The first de facto standard (copied from the Japanese i-Mode standards) is to use the tel:<phone number> scheme. This is called the i-Mode format:

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

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=<numbers>. You can use numbers, *, and # (using the URL-encoded %23 value), as well as p for a one-second pause and w for a wait-for-tone pause:

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

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.

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

While 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.

Attached Image

Note: 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.

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:

<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.

Note: The BlackBerry browser automatically detects phone numbers and email addresses and converts them to links. If you don’t want this feature, you should use the meta tag <meta http-equiv="x-rim-auto-match" content="none">. Safari also has its own metatag for the same action: <meta name="format-detection" content="telephone=no">.

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 (dc:<number>). This is compatible with BlackBerry iDEN devices:

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

Note: 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:<phone number>.

The table below lists which voice call URI schemes work with which platforms.

Call-to action compatibility table

Browser/platformtel: compatibilityWTAI compatibility
Android browserYesYes
Nokia Series 40YesYes
NetFrontYes, for call and add to contact manager
Openwave (Myriad)YesYes
Internet ExplorerYes, for call, SMS, and add tocontact manager
Motorola Internet BrowserYes, for call, SMS, and add tocontact manager
Opera MobileYesYes
Opera MiniYes (unless Java MIDP 1.0 device)Yes (unless Java MIDP 1.0 device)

Note: The iPod Touch, a non-phone mobile device, doesn’t allow voice calls. Instead, it shows a prompt to add the phone number used in the tel: link to the phonebook.

Programming the Mobile Web

Learn more about this topic from Programming the Mobile Web.

How do you take advantage of the new opportunities opening up in mobile web development? With this book, you'll learn the intricacies and pitfalls involved in building HTML and CSS-based apps that you can extend to work with particular devices, including the iPhone, Nokia, Blackberry, Android devices, and other smartphones. You'll not only learn how to deal with platform variations, finicky browsers, CSS compatibility, and other issues, but also how to create pleasant user experiences in a constrained environment.

See what you'll learn

0 Subscribe

3 Replies

 : Oct 27 2010 06:59 PM
Nicely illustrated and very intuitive. Thanks for sharing your knowledge on this matter :)
  nancy30's Photo
Posted Sep 26 2013 11:09 PM

This is a great way to convert your traffic into call to action and increase you conversion rate. I have been trying this on a mobile website, called TechAhead where they make mobile websites.
  marehinds's Photo
Posted Feb 14 2014 10:34 PM

customized fat loss