While <a href> tags are most often used to link pages, most developers are aware that they can prompt an eMail by using the mailto: protocol*. Few developers are aware that it’s also possible to initiate a phone call from a web page using tel:, and almost no-one is aware that you can do the same thing with SMS messages.
The basic format of the link is very simple:
<a href="sms:">Send a SMS</a>
On most mobile phones, clicking this link will prompt an open message, without any destination number. On many systems, you can take this further:
<a href="sms://+14035550185">Send an SMS</a>
Some systems (Android, Symbian, webOS) don’t allow a number, to avoid potentially expensive overages on international messages.
Finally, a precomposed (and percent encoded) message can be included in the link, at least for some systems:
<a href="sms://+14035550185?body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20me.">Send a SMS message</a>
If you’re on a supported mobile platform, you can try clicking this link: Send a SMS. The number is in a fictional Hollywood movie area code, so it won’t actually send a message to anyone.
Challenges
There are two major problems with creating such links on web pages: they’re only appropriate for mobile systems, and different platforms will accept some sms: formats and ignore others. (iOS, for instance, will take a phone number after the sms: protocol, but will ignore everything – including the number – if body text is included).
| Platform | Support |
|---|---|
| iOS | Partial (sms:, phoneno)
|
| Android** | |
| webOS | sms: only (no number, no body)
|
| IE Mobile | |
| Opera Mobile | Full (sms:/phone/body)
|
You can’t use connection type or screen size to determine if your site is communicating to a mobile phone with any kind of predictability. Currently, the only reliable method is device detection, via a system like WURFL or PHP mobile detect. With that in place, you could wrap the link in context-aware code:
if ($detect->isMobile()) { echo '<a href="sms:">Send a message</a>'; }
Further detection refinement would allow you to customize the SMS link feature for different phone systems.
* Although this practice is inadvisable: a form is usually a better option.
** Results may vary, based on Android SMS app.
Pro CSS3 Animation, Apress, 2013
Massive Head Canon
The New Defaults
CSSslidy