Grow your CSS skills. Land your dream job.

Last updated on:

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.

Reference URL

Comments

  1. Aaron
    Permalink to comment#

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

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

  3. will this work with android too.

    • 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

  4. 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. 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. 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. Permalink to comment#

    This is new to me, but let me try

  8. 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…

    • 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″

  9. Permalink to comment#

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

  10. 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. Andrew
    Permalink to comment#

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

  12. 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. 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. I am redesigning my web site right now and I used this for my contact section. Thanks!

  15. 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. 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. 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. adam
    Permalink to comment#

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

  19. 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. anil
    Permalink to comment#

    showing W3c error ….

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".