Enabling Click to Call

You may wish to add a click to call button to your site to allow smartphone or SIP phone customers the ability to call you at the touch of a button.

To enable the click/touch to call functionality simply add an additional class of 'clickable' to the element(s) which contain the Contact number you wish to be Click to call:

<span class="InfinityNumber clickable">0333 123 0001</span>

In the above example, the number "0333 123 0001" will be replaced with the Infinity Call Tracking number and the surrounding code will also be modified to enable the Click to Call.

Advanced Click to Call

Some clients wish to replace the dynamic number shown on their site with text, eg. Call Us Now, while still wanting it to be clickable.

In the example below we have replaced the number on our mobile site with the text 'Call Us Now' like many websites do.

And this is the code we would use:

<a class="InfinityNumber call-us visible-xs" href="tel:03331231234"><i class="glyphicon glyphicon-earphone"></i>Call us now</a>

The important thing to check now though is that the href (the tel: number which allows click to call) has been updated with the dynamic number.

To do this you will need to inspect the Click To Call link once the above code has been placed on the site. The number in the href should no longer be the Auto Discovery number and should be a Dynamic number. If you are still seeing the Auto Discovery number, the code is not running correctly.

Anyone that has browsed and clicked on that icon will be calling the AutoDiscovery number and NOT an Infinity dynamic number, meaning no calls from from click to call will be tracked.

Using the Infinity Clickable class here will not work as we will replace the Call us now icon with the dynamic number once number replacement has occurred, this breaks your site and removes the icon.

Solution

Using the example of code, here is what we are going to add:

data-ict-discovery-number If the contents of the element are text or an image, then you can tell us what AutoDiscovery number you’d like to use

data-ict-silent-replacements If you don't want to update the contents of the target element, but just the href

So now the code will look like this:

<a class="InfinityNumber call-us visible-xs" href="tel:+443331231234" data-ict-discovery-number="+44333 123 1234" data-ict-silent-replacements="true"><i class="glyphicon glyphicon-earphone"></i>Call us now</a>

This will leave the 'Call Us Now' intact but ensures the href is updated with a Dynamic Number.