O'Reilly

Telephone Link Protocol

By on  

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.

Track.js Error Reporting

Upcoming Events

Recent Features

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

Discussion

  1. John Holt Ripley

    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?

  2. Stuart

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

  3. Dan

    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.

  4. AV

    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.

  5. bert

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

  6. Chase

    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

  7. jenski

    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!

  8. Aurélien

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....

  • OSCON: Live Stream

    O'Reilly's OSCON is upon us and I'm super excited to share with you a live stream of OSCON keynotes, courtesy of O'Reilly! Check back here every morning this week to get a sneak peek at the best conference in the open source community! Thank you...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...