Making Phone Calls and Sending SMS with HTML

Posted in Mobile and PHP on Tuesday, the 19th of January, 2010.

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:

<a href="http://example.org/">Click here</a>
The Make Phone Call Dialog on a Nokia N70 Handset

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'];
}
 
?>
 
<!-- some HTML here -->
 
<?php if ( $callstring != 'none' ) : ?>
 
<p><a href="<?php echo $callstring; ?>1234567">Click Here</a>.</p>
 
<?php endif; ?>
 
<!-- some more HTML -->

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

The Send SMS Dialog on a Nokia N70 Handset

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' ) : ?>
 
<p><a href="<?php echo $smsstring; ?>1234567?body=The Quick Brown
Fox">Click Here</a>.</p>
 
<?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

The Send MMS Dialog on a Nokia N70 Handset

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' ) : ?>
 
<p><a href="<?php echo $mmsstring; ?>1234567?subject=Hi
There&body=The Quick Brown Fox MMS">Click Here</a>.</p>
 
<?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

Comments

Posted by Terence Eden on Monday, the 15th of February, 2010.

Hi,
I've been trying to find which is more widely supported - tel or wtai.

I'm not sure if it's an error in your test page or in WURFL, but both my test phones (BB9000, Android 1.5) show no dialling scheme available. Yet I know that both support tel & WTAI.

Is there any definitive information about support for these schemes across a range of handsets?

Thanks

T

Posted by Juan Leysner on Tuesday, the 8th of June, 2010.

Is it posible to send me the html file for the test page ?

Thanks

Posted by Richy C. on Thursday, the 10th of June, 2010.

Interesting, it shows "Opera/9.80 (Windows NT 6.0; U; en) Presto/2.5.24 Version/10.53" as being a Nintendo Wii Browser...

Is there any way of detecting things like a Skype install and appropriately presenting the number then?

Posted by Simon Harris on Thursday, the 10th of June, 2010.

Hi Richy -

Yeah, that's an interesting feature, and is down to an outdated installation of Tera-WURFL. I've a plan to upgrade to version 2.0, which should remedy that, but free time is somewhat scarce.

Not sure how one would go about detecting Skype, or anything else, being installed. If I've understood the question correctly, I think that might imply a bit of a security hole in the user's device or computer.

Juan -

View -> source should do it :) There's a little PHP going on but nothing more than you see in the article.

Posted by Richy C. on Friday, the 11th of June, 2010.

Hi Simon,

I've found http://download.skype.com/share/skypebuttons/js/skypeCheck.js which may help detect Skype: but it is client side... If there is a way to detect recognised protocols (such as sip: , skype: , tel: , call:) then this whole job would be easier... If I come across a way, I'll let you know.

Posted by Troy Thomas on Friday, the 9th of December, 2011.

I highly interested in this.

Only i dont want a link that does it i want a page that when you land on it, a script triggers and it loads an sms keyword and number for them to just hit send.

This way you can use Normal URL fields in CMS's like Joomla and when they click the link they are sent to a page that triggers the sms message.

Any ideas on how to make this happen?

Posted by Rens on Monday, the 2nd of January, 2012.

I am looking for the correct syntax to incorporate message texts with the for android devices. Above formats apperantly not compatible ?!

Posted by John T. Sebastian on Saturday, the 7th of July, 2012.

where should i type the Password to obtain MMS

Posted by Eldog on Sunday, the 27th of January, 2013.

Thanks for the information on SMS links, the format I got working on my Android device is

<a href="sms:[PHONE-NUMBER]?body=[MESSAGE]">The SMS link</a>

but of course when I tested it on a Windows Phone 7 it didn't work.

see

http://www.w3.org/TR/mwabp/#bp-interaction-uri-schemes

for more on the specifics.

Posted by Nghien Phim on Thursday, the 7th of February, 2013.

Is this helpful on mobile-browser only? On desktop, how can we call or send SMS? The helpful code on desktop should be Skype call.

Posted by Scott on Saturday, the 22nd of June, 2013.

Links to example are broken.

Enter your comment: