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.

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


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.



5 comments:

  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.

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

    ReplyDelete
  3. 5 dni temu — With this in-depth newbie's guide, you may rapidly become an expert of the stay casino – including stay roulette, stay blackjack, and stay ... While that’s all properly and good, and comparatively easy for a casino newcomer to know, the variations of the roulette desk format need explaining. Further, 18 of the numbers are purple, with the remainder are black. You can place 50/50 bets 먹튀사이트 먹튀프렌즈 on the successful number being purple or black, or odd or even. You also can bet on the number being 1-18 or 19-36, plus on the successful number being in a specific section of the desk.

    ReplyDelete
  4. Given that gamers can observe the motion of the wheel because it spins, some imagine video games featuring this feature to be extra reliable than others. Live roulette, on the other hand|however|then again}, provides far fewer game variants than its computerized counterpart. Video roulette’s many varied varieties, low minimal bets, and diverse themes are all positive elements of the game. If you’ve been gaming on-line for some time now then you’ve in all probability noticed that most of the finest roulette apps accept common cost methods such as bank cards. These methods do come with some pretty hefty fees and you'll anticipate withdrawals to take as much as} 7 days. However, many gamers still select to use this methodology 먹튀사이트 먹튀프렌즈 for a number of|numerous|a variety of} reasons.

    ReplyDelete
  5. However, the very fact fact} that|although} have the ability to|you presumably can} belief the outcomes of the best on line casino video games, your gaming sessions ought to be characterised by responsible gambling. On the match part, obtainable beneath the on line casino video 1xbet games, there's a rating automatically up to date with the player’s name. Any registered participant with a verified account might enter the tournaments supplied by the brand.

    ReplyDelete