3 Replies Latest reply on Jan 2, 2013 3:13 PM by cqnewuser

    How to get href="tel:phonnumber" working? (click on a link and call on mobile)

    cqnewuser

      Hi,

       

      I am trying to develop a component for a mobile website which allows users to click on a link and make a phone call on the mobile device.

       

      I have tried to use the following code :

       

      <a  href="tel:<%=xssAPI.encodeForHTML(tel)%>" >Click and Call!</a>    // where tel is for instance: 12345678

       

      But CQ keeps displaying:

       

      localhost:4502/content/mysite/_tel_12345678

       

      I need the link to display as tel:123456789

       

      I've also tried using href="http://tel:<%=xssAPI.encodeForHTML(tel)%>" which displays 'tel:12345678' when mouse hovering over on a computer. However, as soon as I deploy the code on a mobile device and press on the link, it redirects to 'http://tel.12345678' which results in an error page.

       

      Has anyone had any experience in bypassing CQ's URL prefixing and force the href to be what the user input is?

       

      Many thanks.

        • 1. Re: How to get href="tel:phonnumber" working? (click on a link and call on mobile)
          snemarch Level 1

          EDIT: disregard this answer, Justin Edelson has the simple & correct answer. My bad for not having had enough coffee, and firing up a decompiler before looking at the service configuration. Is there any official documentation on the settings, apart from the comments in the service configuration? My google-fu is obviously weak today

           

          Is "tel:number" correct - shouldn't it be "tel://number"? The latter won't be rewritten.

           

          I'm not sure how to make the former version work. The guilty part is CQ's Link Checker (which not only checks for valid links, but also does other transformations - the one you're dealing with is "namespace mangling". You can disable link checking - and some rewrites - on a per-link basis by adding x-cq-linkchecker="skip" to the href tag, but "link externalizing" (which includes namespace mangling) is done regardless of that attribute.

           

          If you need "tel:", without the slashes, to work, I'm not sure if there's a better way than completely replacing CQ's Link Checker... or, if you're into Extreme Hacks™, don't mind depending on implementation details, and can place a "://" somewhere in the href without breaking phone parsing, that'll keep the namespace mangling from triggering.

           

          But then you'd have to question yourself whether you can live with something like the following - I know I couldn't

          <a href="tel:1234-454-52&hack=hack://" x-cq-linkchecker="skip">click to call!</a>

          1 person found this helpful
          • 2. Re: How to get href="tel:phonnumber" working? (click on a link and call on mobile)
            justin_at_adobe Adobe Employee

            You need to add 'tel:' as a "Special Link Prefix" in the configuration of the CQ Link Checker Service.

             

            To do this, copy /libs/cq/linkchecker/config/com.day.cq.rewriter.linkchecker.impl.LinkCheckerImpl to a config folder under apps (e.g. /apps/myapp/config). Then edit the property service.special_link_prefix to add tel: as a new prefix.

            • 3. Re: How to get href="tel:phonnumber" working? (click on a link and call on mobile)
              cqnewuser Level 1

              Thanks very much Justin and snemarch! Really appreciate such quick and detailed answers!

               

              And Yes it worked like a charm!

               

              Thank you so much guys!