504

I want to mark up a phone number as callable link in an HTML document. I have read the microformats approach, and I know, that the tel: scheme would be standard, but is quite literally nowhere implemented.

Skype defines, as far as I know, skype: and callto:, the latter having gained some popularity. I assume, that other companies have either other schemes or jump on the callto: train.

What would be a best practice to mark-up a phone number, so that as many people as possible with VoIP software can just click on a link to get a call?

Bonus question: Does anyone know about complications with emergency numbers such as 911 in US or 110 in Germany?

Update: Microsoft NetMeeting takes callto: schemes under WinXP. This question suggests, that Microsoft Office Communicator will handle tel: schemes but not callto: ones. Great, Redmond!

Update 2: Two and a half years later now. It seems to boil down to what you want to do with the number. In mobile context, tel: is the way to go. Targeting desktops it's up to you, if you think your users are more Skype people (callto:) or will more likely have something like Google Voice (tel:) installed. My personal opinion is, when in doubt use tel: (in line with @Sidnicious' answer).

Update 3: User @rybo111 noted, that Skype in Chrome has meanwhile jumped on the tel: bandwagon. I cannot verify this, because no machine with both at hand, but if it's true, it means we have finally a winner here: tel:

11
  • 1
    Unfortunately not. It seems to boil down to what your provider (VoiP, cellphone comp or whatever) does. This may as well be charging for 800 numbers.
    – Boldewyn
    Jul 20, 2011 at 9:21
  • 1
    I'm using Google Voice in Chrome and it does not recognize tel: URIs. I'm stil sticking with callto: and a display of the phone number on the theory that the mobile phone browsers should auto-detect the number anyway.
    – Old Pro
    Apr 18, 2012 at 2:17
  • 6
    Despite the title, this question is really "what URL scheme should you use for phone numbers", rather than how to mark them up.
    – Raedwald
    May 3, 2013 at 12:27
  • 1
    @Boldewyn Skype is prompted when using Chrome with tel: so perhaps you should remove your comment at the end about Skype using callto:?
    – rybo111
    Feb 20, 2014 at 10:56
  • 1
    Could you please try to edit your question updates into the according answers. Like this it’s kind of a mess.
    – idmean
    Aug 3, 2015 at 13:45

14 Answers 14

542

The tel: scheme was used in the late 1990s and documented in early 2000 with RFC 2806 (which was obsoleted by the more-thorough RFC 3966 in 2004) and continues to be improved. Supporting tel: on the iPhone was not an arbitrary decision.

callto:, while supported by Skype, is not a standard and should be avoided unless specifically targeting Skype users.

Me? I'd just start including properly-formed tel: URIs on your pages (without sniffing the user agent) and wait for the rest of the world's phones to catch up :) .

Example:

<a href="tel:+18475555555">1-847-555-5555</a>

7
  • Thanks for the detailed answer! Since I asked the question, I was tempted to follow this approach, too. Use the standard and tell complaining people, that they use the bad app/tool. Although it gets hard, if this one is your client, I think, you're right. If nonetheless I have to consider Skype users, I'll go with my JavaScript solution the other way round.
    – Boldewyn
    Sep 24, 2009 at 14:16
  • 1
    It's 2014 and Tel: now works for Skype. But if you wanted to initiate a call to the Skype Echo / Sound Test Service, the link would be <a href="skype:echo123?call">Call the Skype Echo / Sound Test Service</a> from msdn.microsoft.com/en-us/library/office/…
    – OzBob
    Apr 2, 2015 at 4:11
  • 4
    Anybody tried href="tel://1-555-555-5555" format ? the guys from Tutsplus recommend it code.tutsplus.com/tutorials/…
    – Adriano
    Apr 30, 2015 at 10:14
  • 2
    In my experience with the tel: tag Skype requires the country code with a + to be on the number (e.g. "+44" for UK numbers) to parse the number properly. Otherwise it just opens Skype but doesn't try to dial.
    – ShaunUK
    Apr 18, 2016 at 15:57
  • 3
    Shouldn't the example be: <a href="tel:+18475555555">? Note the + before the initial 1.)
    – Stéphane
    Jun 1, 2016 at 21:29
76

My test results:

callto:

  • Nokia Browser: nothing happens
  • Google Chrome: asks to run skype to call the number
  • Firefox: asks to choose a program to call the number
  • IE: asks to run skype to call the number

tel:

  • Nokia Browser: working
  • Google Chrome: nothing happens
  • Firefox: "Firefox doesnt know how to open this url"
  • IE: could not find url
9
  • 2
    To add to this, the behaviour is the same for Google Chrome on Android 4.2.2 (Nexus 4). Having the Android version of Skype running in the background doesn't even make callto: links work. In short, you can't really use callto: links if you're wanting to target mobile at the minute.
    – aendra
    Mar 6, 2013 at 13:20
  • Now on chrome 35 you get this popup
    – pec
    Jun 27, 2014 at 19:19
  • In chrome and firefox ( maybe IE as well), you can register a web service of yours for the tel: prefix with registerProtocolHandler. Sep 30, 2014 at 18:19
  • U have to use +countrycode phone number that works on chrome. tel: links dont seem to work w skype on chrome w/o + Oct 21, 2014 at 5:59
  • Update on OSX and Chrome: it asks to launch Facetime.
    – Giulio
    Nov 11, 2014 at 11:11
45

The best bet is to start off with tel: which works on all mobiles

Then put in this code, which will only run when on a desktop, and only when a link is clicked.

I'm using http://detectmobilebrowsers.com/ to detect mobile browsers, you can use whatever method you prefer

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

So basically you cover all your bases.

tel: works on all phones to open the dialer with the number

callto: works on your computer to connect to skype from firefox, chrome

5
  • Yes, this -- callto: doesn't work at all on Android (See my comment on Murat's answer), and tel: doesn't really work on desktop. It's unfortunate, really.
    – aendra
    Mar 6, 2013 at 13:22
  • 1
    Hmmm, sadly a quick jsfiddle doesn't seem to let this work either... jsfiddle.net/tchalvakspam/gVZYt/3
    – Kzqai
    Apr 26, 2013 at 17:39
  • Working on Seamonkey 2.20 on Mac 10.8 put below the <body <?php body_class(); ?>> code on a wordpress theme's header.php file.
    – om01
    Sep 6, 2013 at 0:33
  • callto: didnot worked for chrome in mac and the version is up-to-date
    – Ujjwal
    Sep 2, 2015 at 3:47
  • Sadly this has been depreciated in JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed
    – Casebash
    Jan 8, 2016 at 6:53
21

As one would expect, WebKit's support of tel: extends to the Android mobile browser as well - FYI

0
10

I keep this answer for "historic" purpose but don't recommend it anymore. See @Sidnicious' answer above and my Update 2.

Since it looks like a draw between callto and tel guys, I want to throw in a possible solution in the hope, that your comments will bring me back on the way of light ;-)

Using callto:, since most desktop clients will handle it:

<a href="callto:0123456789">call me</a>

Then, if the client is an iPhone, replace the links:

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

Any objections against this solution? Should I preferably start from tel:?

4
  • It could be that the iPhone also supports the callto scheme, but that Apple prefers tel, so that's the one mentioned in the documentation. Jul 22, 2009 at 10:49
  • 5
    See my answer. callto: is a proprietary URI scheme, so I wouldn't start there.
    – s4y
    Sep 23, 2009 at 16:48
  • callto: didnot worked for chrome in mac and the version is up-to-date.
    – Ujjwal
    Sep 2, 2015 at 3:47
  • That doesn't surprise me. The landscape was fundamentally different in 2009, when the answer was given. Also, you need a third-party program, that registers for the callto: scheme, like Skype. Chrome itself has no idea, what it should do.
    – Boldewyn
    Sep 2, 2015 at 6:31
9

Mobile Safari (iPhone & iPod Touch) use the tel: scheme.

How do I dial a phone number from a webpage on iPhone?

1
  • 2
    So if the main targetted users are iPhone or iPod Tough (and maybe other mobile devices, I don't know... ) , you should use tel: If the main users are normal web clients, (IE, Firefox etc..) using skype or some other VoIP software, I think callto: would be best.
    – awe
    Jul 22, 2009 at 9:35
3

RFC3966 defines the IETF standard URI for telephone numbers, that is the 'tel:' URI. That's the standard. There's no similar standard that specifies 'callto:', that's a particular convention for Skype on platforms where is allows registering a URI handler to support it.

1
  • That's what Sidnicious said, yes.
    – Boldewyn
    May 21, 2013 at 9:37
3

this worked for me:

1.make a standards compliant link:

        <a href="tel:1500100900">

2.replace it when mobile browser is not detected, for skype:

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

Selecting link to replace via class seems more efficient. Of course it works only on anchors with .phone class.

I have put it in function if( !isMobile() ) { ... so it triggers only when detects desktop browser. But this one is problably obsolete...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}
1
  • The "proper" way to detect mobile browsers is to check for the case insensitive string "mobile".
    – Kevin Cox
    Jun 9, 2013 at 2:29
2

I used tel: for my project.

It worked in Chrome, Firefox, IE9&8, Chrome mobile and the mobile Browser on my Sony Ericsson smartphone.

But callto: did not work in the mobile Browsers.

2

I would use tel: (as recommended). But to have a better fallback/not display error pages I would use something like this (using jquery):

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

The assumption is, that mobile browsers that have a mobile stamp in the userAgent-string have support for the tel: protocol. For the rest we replace the link with the callto: protocol to have a fallback to Skype where available.

To suppress error-pages for the unsupported protocol(s), the link is targeted to a new hidden iframe.

Unfortunately it does not seem to be possible to check, if the url has been loaded successfully in the iframe. It's seems that no error events are fired.

1
  • Nice use of hidden iframes!
    – Boldewyn
    Sep 23, 2013 at 8:29
1

Since callto: is per default supported by skype (set up in Skype settings), and others do also support it, I would recommend using callto: rather than skype: .

1
  • 3
    Here I agree. But all together it seems to boil down to tel: vs callto:, and that's not an easy one.
    – Boldewyn
    Sep 24, 2009 at 14:18
1

Although Apple recommends tel: in their docs for Mobile Safari, currently (iOS 4.3) it accepts callto: just the same. So I recommend using callto: on a generic web site as it works with both Skype and iPhone and I expect it will work on Android phones, too.

Update (June 2013)

This is still a matter of deciding what you want your web page to offer. On my websites I provide both tel: and callto: links (the latter labeled as being for Skype) since Desktop browsers on Mac don't do anything with tel: links while mobile Android doesn't do anything with callto: links. Even Google Chrome with the Google Talk plugin does not respond to tel: links. Still, I prefer offering both links on the desktop in case someone has gone to the trouble of getting tel: links to work on their computer.

If the site design dictated that I only provide one link, I'd use a tel: link that I would try to change to callto: on desktop browsers.

1
  • 1
    the stock browser in the latest open-source build of Android "Ice Cream Sandwich" still appears to support only tel:; clicking on a callto: link results in "Web page not available"
    – rymo
    Jan 17, 2012 at 21:59
0

Using jQuery, replace all US telephone numbers on the page with the appropriate callto: or tel: schemes.

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

Thanks to @jonas_jonas for the idea. Requires the excellent findAndReplaceDOMText function.

1
  • 1
    This solution is not ideal, since analyzing the user agent string is considered bad practice. Consider a device that supports the tel URI but doesn't report itself as a mobile. Jun 24, 2015 at 5:21
-1

I use the normal <a href="tel:+123456">12 34 56</a> markup and make those links non-clickable for desktop users via pointer-events: none;

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

for browsers that don't support pointer-events (IE < 11), the click can be prevented with JavaScript (example relies on Modernizr and jQuery):

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}
3
  • 1
    Using Modernizr.touch which is Touch Event support to infer support for tel: is unreliable. Easy exception cases: iPad, Windows tablets, etc.
    – zachleat
    Jun 17, 2015 at 21:45
  • Even Chrome running on a Windows desktop reports itself as a touch device. Jun 24, 2015 at 5:23
  • Some desktop-class machines do support tel: urls. For a Mac-specific example, FaceTime on the Mac is standard and works with tel:, going so far as to use the user's iPhone with Handoff/Continuity, so using pointer-events: none to target desktops might not be wise to do anymore.
    – OxC0FFEE
    Jan 31, 2016 at 19:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.