iPhone Calling and Texting Links

This is the calling one (probably more useful if the clickable text is words, as the iPhone auto-detects phone numbers and does this automatically):

<a href="tel:1-408-555-5555">1-408-555-5555</a>

This is the SMS one, which overrides the default calling behavior:

<a href="sms:1-408-555-1212">New SMS Message</a>

Not sure what other things these links might work on... Might be a little dangerous as having non-standard links that don't work or bring up errors is kinda bad UX. Best for mobile-only sites. If someone know if this works on Android/Blackberry/Other Mobile, comment below.

Comments

  1. User Avatar
    Aaron
    Permalink to comment#

    I think using “callto:” instead of “tel:” is more useful – these work with Skype on the desktop too.

    • User Avatar
      Ucavus
      Permalink to comment#

      callto: is proprietary. tel: is RFC, works on many devices and is understood by Skype.

  2. User Avatar
    Andrej Badin
    Permalink to comment#

    Should be combined with some device detection script, which would keep us from non-standard link on unsupported devicec.

  3. User Avatar
    Dinesh Verma
    Permalink to comment#

    will this work with android too.

    • User Avatar
      traq
      Permalink to comment#

      if you hold-click on a phone number, android will bring up a dialing menu. I think you need a dedicated app to actually make the call, however, at least when I tried it on a 2.2 tablet

    • User Avatar
      priya
      Permalink to comment#

      yes “tel” tag works on the anriod phone.

  4. User Avatar
    Josh
    Permalink to comment#

    Yes i can verify it works on android with one exception it doesn’t auto call you have to hit call yourself…so all it does is bring the number up when trying to call but texting opens a new message.

  5. User Avatar
    russ
    Permalink to comment#

    hey team,
    stumbling back onto this thread, email signatures in mind.

    means by which we might optimize a phone number to play ball with a wide-range of devices/interfaces/clients when clicking from an email signature (mac mail in this case)?

    e.g. i’m joe recipient in calgary, got an email from a colleague in buenos aires (yep) – skype happens to be my preferred mode of contact right about now.. any means of making it so that i can choose between ‘phone,’ ‘text,’ ‘skype,’ when i click the telephone number on my phone or desktop?
    sure would be awesome – but too idealistic a query?

  6. User Avatar
    Mike Swizzy
    Permalink to comment#

    Reference IETF Standard RFC3966 [ http://tools.ietf.org/html/rfc3966 ]. I have verified that this works on most mobile units… Click (tap) the link, and you’re taken directly to the dialer with the phone number auto-filled. Include *meta name=”format-detection” content=”telephone=no”* in the header to force this format on all devices.

  7. User Avatar
    David Do
    Permalink to comment#

    This is new to me, but let me try

  8. User Avatar
    Enrique

    Any idea how to make this work when the phone number contains the “number sign” #? I don’t know about other countries, but this is pretty common in Spain for functions such as activating or deactivating services like roaming, etc. I’ve already tried HTML-entifying it as # but phone won’t still get it. They just seem to link to the phone number without the # part…

    • User Avatar
      James
      Permalink to comment#

      Yes Enrique, replace the # with two zeros… It works the same on telephones.
      rather than
      “+ 40 012345678” you use
      “00 40 012345678”

    • User Avatar
      Someone
      Permalink to comment#

      # has to be URL-encoded as %23.

  9. User Avatar
    Chase
    Permalink to comment#

    I just used this technique on a mobile site I made for a client. Works beautifully. Thanks!!!

  10. User Avatar
    Laura
    Permalink to comment#

    Thank you for this great tip! I just used it on a site and it was so easy-once someone so gracious shows you how! : )

  11. User Avatar
    Andrew
    Permalink to comment#

    I swear that you get the links if you implement microformat structures as well.

  12. User Avatar
    Jenna
    Permalink to comment#

    how do u set it up to like not just call one person like how do u make it go to like ur missed calls and contacts and stuff for iphone

  13. User Avatar
    Marc
    Permalink to comment#

    Use of “tel” results in a 404 error on desktop mac. “callto” works.
    Another source touted as better incorporates use of jQuery, though I have yet to try it out.
    http://zekefranco.me/mobile/ios/phone-number-conversion-for-mobile-devices/

  14. User Avatar
    Carlton Stith
    Permalink to comment#

    I am redesigning my web site right now and I used this for my contact section. Thanks!

  15. User Avatar
    Vic Dinovici
    Permalink to comment#

    I am trying to add a call link on an image into an email. I tried both tel: and callto: using the phone # with no “-” and with them. It’s just not working. When I open the email in browser and I tap this time on the text number, it works. Any idea what else I can try?

  16. User Avatar
    Marc
    Permalink to comment#

    Here are my notes for how I had success with this. I usually create two html files for my eblasts. One for sending and one for viewers to land on if they are unable to view the images in the email. The difference I found is that the email handles it differently that safari.

    Hope this helps.

    For the eBlast, set the link on the phone image to be

    tel://1-###-###-####

    But for the browswer either desktop or mobile, set the link to be
    callto:1-###-###-####

    On the desktop, clicking with initiate skype if available.

    On mobile device within the browser, clicking will initate the phone call.

  17. User Avatar
    octavioamu
    Permalink to comment#

    And what about big numbers in text? I you have “some text about something 000000000” in iphone this 00000000 becomes a call link automatically….

  18. User Avatar
    adam
    Permalink to comment#

    for linking to sms does anyone know if possible to pre-populate the body field for the text message

  19. User Avatar
    Himu

    Hi

    What if I want to ad an extra code that one dials when the call is connected? Can that be made automated?

  20. User Avatar
    anil
    Permalink to comment#

    showing W3c error ….

  21. User Avatar
    Gregg
    Permalink to comment#

    For those that have been asking, the “tel” link does work on Android. The “callto” link does NOT. This is per my Samsung Note II running Jelly Bean.

  22. User Avatar
    Kumar
    Permalink to comment#

    One thing that works really well for setting up an SMS link texting form if you don’t want to spin up a back end is Link Texting.

    We built it to make this issue a thing of the past.

  23. User Avatar
    Farhan Islam
    Permalink to comment#

    This article comes with great information.

    I was trying to add the tag but forgot the exact spell to use.

    Also the sms tip is so awesome ^_^

  24. User Avatar
    Jesse
    Permalink to comment#

    We use http://notifynotify.com to capture emails and store them in a database. They have a really simple editor and even a recurring reminder scheduler which is off tap.

  25. User Avatar
    Yves
    Permalink to comment#

    Same Q’s Himu. Is there a way to insert DTMF after the call has been established? For instance, I want to contact 555-555-5555, when the called party picks up, I want the system to automatically press # then 2 # etc… etc…

  26. User Avatar
    Paul D
    Permalink to comment#

    For anyone wanting a simple means of alternating how the tele number is presented (mobile vs non-mobile) :

    HTML:

    <a class="phone-mobile" href="tel:1-800-555-1212">+1 (800) 555-1212</a>
    <span class="phone-nonmobile">+1 (800) 555-1212</span>
    

    CSS:

    /* Change behaviour of footer phone link on MOBILE */
    @media screen and (max-width: 750px) {
        .phone-mobile {
            display: inline;
        }
        .phone-nonmobile {
            display: none;
        }
    }
    /* Change behaviour of footer phone link on NON-MOBILE */
    @media screen and (min-width: 750px) {
        .phone-mobile {
            display: none;
        }
        .phone-nonmobile {
            display: inline;
        }
    }
    

    Employ whatever device size suits your particular project!

    -Enjoy

  27. User Avatar
    JonW
    Permalink to comment#

    Is there a way to have a link that not only dials the number and then dials an extension? Essentially it would have to dial, pause for a bit and then dial another set of numbers.
    I know back in the dark days of dial-up you could do this by inserting commas between the 2 sets of numbers, but not sure it it would work with html.

  28. User Avatar
    Aaron Hall
    Permalink to comment#

    The “Reference URL” to this page https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/sms.html#//apple_ref/doc/uid/TP40008054-SW1 no longer worked. Is there another page out there? Thank you.

  29. User Avatar
    Ben
    Permalink to comment#

    How would you add this tag to a PDF using itextsharp with razorpdf? I need both the controller syntax and the razor html markup syntax.

  30. User Avatar
    Ari
    Permalink to comment#

    Hi, is there a way to add 2 phone numbers in the same href?

  31. User Avatar
    Olly

    hey Dudes, I’m having trouble getting html code for website phone click to call link – it works but only if you click and hold. How could I get it so it just needs a quick click (rather than click and hold)??? (like all the others out there!)

  32. User Avatar
    besnoid
    Permalink to comment#

    Anyone able to get this to work in iOS 10? Seems to be broken. Anyone getting it to work?

  33. User Avatar
    Brian Forrest
    Permalink to comment#

    I just added the SMS snippet to my new wordpress site and it works perfectly!! Thanks!!

    http://forgeryexpertusa.com/minamaze

  34. User Avatar
    Mark
    Permalink to comment#

    Today I tried a “Tel” link on a website that belongs to a website hosting service, using my smart phone, a Sony Xperia Z1 (Android).

    The link had a combination of numbers and letters as “1-877-SHAWBIZ”.

    I tapped the tel link and it worked, my phone translated the letters to numbers and made the call.

    This style of letters instead of numbers is fine for websites where people would normally access using their mobile device, but for websites that are more “desktop access” because of what they do, as hosting services, is a very poor idea when someone wants to call their support line.

    When I hover my cursor (desktop) over the number+letters TEL link, I get the same combination in the browser’s bottom status bar.

    I suggest to those who use this number+letter combination, is to make the HTML “link” itself as all numbers and the visible text as number+combination. This way you create better accessibility / visibility for both mobile and desktop users.

    Basically the HTML link itself should always be numbers as that provides a fall back and translates the letters to numbers on a mere cursor hover.

    Also use “title=” attribute for links ALWAYS. Same reason and only use numbers in the “title” value. The link example above did not have a “title” attribute and it was a large company using skilled web designers.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag