Search code examples
javascripthtmlmobilewebkittel

Detecting HTML <a> click-to-call support in Javascript


There are two ways to have click-to-call links in HTML

  • <a href="wtai://wp/mc;+1800229933</a> WTAI style (Nokia, others)

  • <a href="tel:+1-800-275-2273">Call Apple Customer Support at 1-800-275-2273</a>. TEL style (Apple)

How one can

  • detect which format is supported by current user agent in Javascript?

  • Is it possible to do the detection without relying the user agent string

More info


Solution

  • Maximiliano Firtman has a great article on how to create click-to-call links for mobile browsers. He states that the tel: protocol is supported by almost every mobile device, including: Safari on iOS, Android Browser, webOS Browser, Symbian browser, Internet Explorer, Opera Mini and low-end devices browsers.

    Because of the wide support of the tel: protocol, I would suggest just use the tel: protocol. To support Nokia I would check if the navigator.userAgent contains Nokia footprint. If so, replace tel: to wtai://wp/mc;

    If you can use jQuery, the Javascript could look something like:

    if (/(Series60|Nokia)/i.test(navigator.userAgent)){
      $("a[href^='tel:']").each(function(){
        this.href = this.href.replace("tel:", "wtai://wp/mc;");
      });
    }