Making Phone Calls and Sending SMS with HTML

Okay, so you can't really make phone calls and send SMS messages using only HTML; that would be silly. However, if you are developing web sites and web applications for mobile handsets, you can take advantage of some features in XHTML Mobile Profile which make it easy for a user to call a number without typing that number in. You can also use the same mechanism to trigger - on the user's handset - an SMS or MMS dialog with the intended recipient's number and the message content prepopulated.

That this can all be done by creating a specially-formatted HTML link on a web page is one of the most convenient, if occasionally misunderstood features of XHTML-MP. This post will tell you everything you need to know in order to take advantage of this feature.

Making Telephone Calls

If your website displays a telephone number, perhaps that of your customer services department or telephone ordering service, there's a lot to be said for helping the user to call that number with a single click. This is quite possible, using a variation on a normal HTML link such as the following one, with which most readers will be quite familiar:

Click here

Triggering a phone call using HTML is simply a case of creating a link, but specifying a protocol other than HTTP. Unfortunately, and as is so often the case in mobile web development, the exact protocol varies from handset to handset. Some, such as the Sony Ericsson T610 use the string "tel:", while others like the Nokia N70 require the somewhat more baffling "wtai://wp/mc;". Yet other handsets, and of course desktop web browsers, do not support the feature at all.

Luckily, all the information we need in order to make this work where available is in WURFL, the comprehensive Device Description Repository which I've previously discussed several times on this site. The capability which we need to examine is under the "xhtml_ui" group, and is called "xhtml_make_phone_call_string". If the handset supports the feature, that capability is set to the string which specifies the protocol to use, otherwise it is set to "none".

It's easy to put together an example using PHP and Tera-WURFL. If you're using other technologies then you can think of this a pseudo-code:

<?php

// include the Tera-WURFL file
require_once('/path/to/tera_wurfl.php');

// instantiate the Tera-WURFL object
$wurflObj = new tera_wurfl();

// get the capabilities from the object
if ( $wurflObj->GetDeviceCapabilitiesFromAgent($agent) ) {
    $caps       = $wurflObj->capabilities;
    $callstring = $caps['xhtml_ui']['xhtml_make_phone_call_string'];
}

?>



<?php if ( $callstring != 'none' ) : ?>

Click Here.

<?php endif; ?>

So that's all quite simple. Clicking that link should trigger a "Call..." dialogue, inviting the user to confirm or cancel the phone call. The first screenshot shows the result of clicking that link on a Nokia N70.

Sending SMS Messages

A "Send SMS" dialogue can be triggered using the very same mechanism, although here not only can you specify the recipient's number in the link, but you can also pre-populate the message content of the SMS.

Again, the exact string used to specify the protocol varies across handsets. The all-important information is included in WURFL as the xhtml_send_sms_string capability within the "xhtml_ui" group. The values tend to be either "sms:", "smsto:" or, once again, "none" if the feature is not supported.

The following example shows how to create the link. The code is very similar to the first example, with one important difference: we can now specify the body of the SMS message using the "?body=" query string parameter:

<?php

$smsstring = $caps['xhtml_ui']['xhtml_send_sms_string'];

?>

<?php if ( $smsstring != 'none' ) : ?>

Click Here.

<?php endif; ?>

The result of clicking that link on the Nokia N70 is shown in the second screenshot.

One's first instinct tends to be to URL-encode the message body string, but I've found that this approach seems to cause more problems than it solves, leading to unpredictable behaviour across handsets. Perhaps surprisingly, the safest bet seems to be to echo the string out directly, and let the browser take care of any encoding that needs to be done. That said, I wouldn't be surprised if some specific characters will choke some handsets, but I'll leave that particular piece of research as an exercise for readers.

Sending MMS Messages

Finally, an MMS message dialogue can be triggered using the same mechanism. Again the protocol varies across handsets, "mms:", "mmsto:" and of course "none" being the typical values. The details are in WURFL, this time as the "xhtml_send_mms_string" capability within, again, the "xhtml_ui" group.

An additional aspect worth noting here is that MMS messages can include a "subject" field as well as the message body and recipient's number. We can specify this using a "?subject=" query string parameter alongside the "?body=" parameter that we saw earlier:

<?php

$mmsstring = $caps['xhtml_ui']['xhtml_send_mms_string'];

?>

<?php if ( $mmsstring != 'none' ) : ?>

Click Here.

<?php endif; ?>

The result of clicking that link on our trusty N70 is shown in the third screenshot. Again, this seems to work best without URL-encoding, though if readers have contrasting experiences, I'd be happy to hear about them.

Conclusions

So this is potentially a very useful feature of mobile XHTML, and used wisely can improve the end-user's experience considerably. It is of course important to remember that not all handsets support these features, so don't rely on them always being there: always make sure the phone number is visible in plain text, for example.

I've created a small test page at http://tw.pointbeing.net/tel/, which displays whether the device used to access the page can support the various features, and also what the exact protocol strings required are. For extra convenience, that page is also available via the mobile-friendly short URL at http://pg.wag.gd/.

Related Reading

• Programming the Mobile Web by Maximiliano Firtman
• Mobile Web Design by Cameron Moll
• Mobile Design & Development by Brian Fling