Telephone Link Protocol
We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more; they're an excellent convenience to visitors. With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers:
The tel protocol is used for phone numbers:
<a href="tel:18008675309">Call Jenny!</a>
If you'd like to create a link for SMS text messaging, that's easy enough too:
<a href="sms:18008675309">Text Jenny!</a>
The sms protocol is used for text.
Many mobile browsers automatically linkify phone numbers on webpages but with the snippet above you can forcibly create phone links! Since said links don't work on desktop browsers, it's probably wise to create a JS snippet to replace spans with a given CSS class with phone links.
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![CSS vs. JS Animation: Which is Faster?]()
How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps?
This article serves as a point-by-point...
![Dynamically Create Charts Using MooTools MilkChart and Google Analytics]()
The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript -- creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics...
![Fullscreen API]()
As we move toward more true web applications, our JavaScript APIs are doing their best to keep up. One very simple but useful new JavaScript API is the Fullscreen API. The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...
I’ve not yet found a way to detect support for this protocol, other than UA detection – are you aware of a way to do it?
As of 2018, both of these protocols are well supported by all the major browsers & As far as the auto link conversion is concerned, you can use a meta tag to disable it
“Since said links don’t work on desktop browsers, it’s probably wise to create a JS snippet to replace spans with a given CSS class with phone links.”
Ugh. That deprives desktop browsers, desktop browser add-ons, and other unknown browsers of the semantic information that they could use to do something useful with those links. Gmail supports sending text messages, for example – so a desktop browser add-on that does something clever with sms: protocol links to open up an appropriate gmail chat window would be perfectly possible… unless the web page decided not to bother sending sms: links to desktop browsers. Pretty sure there are web telephony apps for desktop computers that support making voice calls to phone numbers, as well.
In an ideal world (in my opinion) browser makers would be responsible for doing something sensible with links that they can’t resolve due to unsupported protocols – for example, it’d make sense to stylistically grey them out, add a tooltip indicating the functionality is unavailable, and offer a CSS pseudoclass and something in javascript to enable web authors to detect the situation and react accordingly.
I don’t know what to do in a world where browsers are unintelligent about invalid protocols, but I hate the idea of penalizing (future?) browsers and/or add-ons that ARE smart in order to protect current browsers that aren’t.
Stuart: That makes sense, maybe a pseudo-selector like ::unsupported-protocol.
But yeah in Chrome tel: and sms: links don’t seem to do anything at all (I would expect at least an error dialog) but I suspect Skype would register at least one of those, and Google Voice would be a perfect candidate to register handlers for both.
It can be a security problem. On many phones with phone numbers you can do many low level things like format the phone. A few months ago that appeared on news, and the standard android browser was vulnerable, opera mobile instead showed a security warning before launching the dialer. I don’t know about firefox.
“Since said links don’t work on desktop browsers”
I could see where the tel protocol could potentially be used to initiate a call on your desktop providing you had an installed softphone with a SIP account that had POTS termination.
I’ve worked on this a bit, and came up with a solution that for me has worked 99% (leave some room for error). It’s a pure js solution, and the source code describes the approach.
http://stackoverflow.com/a/13675901/124069
Skype picks up on telephone-like numbers regardless of the tel: protocol, as far as I know.
Didn’t knew about the sms thing tho. tnx!
Hi, Thanks for sharing.
Is there a way to add preformatted text for a SMS ?
Example :
Send to 18008675309 the text “Hi, Please call me back.”
“Since said links don’t work on desktop browsers…”
Why shouldn’t they?
I found this page searching for an add-on that would allow my desktop browser to dial phone numbers for me.
Why is it that the whole world assumes just because you’re at your desk that you wouldn’t find it convenient to automatically dial the number for some business you just did a search for.
We have an Avaya phone system connected to desktop PCs. We have dial button on client apps but I need to do it from a custom web app. I guess Avaya has an API. Anyone done anything like this?
i want dial desktop phone (avaya) by clicking an image on web page on a desktop pc connected to a phone.
try your code in mozilla bud…
Anyone know how to include * codes in a TEL link? Something like
href='tel://*6718008675309'apparently is an invalid link, at least according to my Nextiva app.