Monday, 12 November 2012

Click-To-Call: Playing with HREF TEL schema nicely

Assume that you want to add click to call feature to your page. Given the increasing popularity of mobile sites, it is quite possible. It would be obvious decision to go with 'tel' schema solution.

Quick explanation: Browser which processes <a/> tag with href attribute starting with "tel:" prefix will try to place a call to a defined phone number.

On modern mobile phones it just works nicely. But when you will try to open the same link on desktop browser, most likely, you will see the error page, saying something like: "Can't handle tel schema...".
Not very nice, isn't it? We don't want to show this error page on desktop browser (or any other browser which doesn't support 'tel' scheme).
So far, I found two solutions for this problem:

First one - JavaScript free.

The idea is to have invisible frame on the page, and use this frame as target for <a/> tag.

  <iframe name="click-to-call-safety-net"/>
  <a href="tel:123456" target="click-to-call-safety-net">
    Call us: 123456

I have tested this approach on all available to me Android and iOS devices and can confirm that it works. The situation on desktop browsers is not that good. Chrome, Firefox, Safari are OK. IE doesn't handle loading of 'tel' schema into iframe nicely. Still shows the error page :(

Second approach - feature detection.

If you are OK to use some JavaScript to detect 'tel' support - there is another  recipe. I found that there is correlation between support of <input> with 'tel' type and 'tel' schema handling. This article describes how to detect browser support for 'tel' input type. Rest  steps are easy:

  1. Detect 'tel' input type support. Modernizr is a good way to go.
  2. Add JavaScript click handler to your <a href="tel:??????" /> links. This handler shall allow link clicks only if browser supports 'tel' input type, otherwise it should prevent default click handling.


  1. Second approach will not work. The website you referenced detects support for the tel input-type, which is a totally different thing from the tel URI-scheme.

  2. To clarify: IE8 definately doesn't support the tel input-type, but it could support the tel-URI scheme when (for example) Lync is installed.