To allow the dynamic numbers to work on your website, you will need to wrap an existing phone number, (or static - sometimes referred to as a default), inside an HTML Span tag. The static number can also be a supplied Calltracks number, thus ensuring all your calls are captured. Within Calltracks, these span tags are commonly referred to as Placeholders.
This script tag should be included just before the closing body tag </body> of your web site. It is preferable that you put the tag just before </body>, since it needs to be after any phone numbers, to ensure that the phone numbers are there when the script looks for numbers to replace.
The Span tags/Placeholders
To have a clickable link, with for example an image instead of a link, you can instruct Calltracks to not insert a phone number, by using the data attribute "data-calltracks-no-replace" on the span tag.
<a href="tel:+18775550199"><span class="calltracks_acme-main-usa" data-calltracks-no-replace="true"><img src="/images/callus.gif"></span></a>
Click to Reveal
Below is an example of two "Click to reveal" links which use different identifiers.
Once the link is clicked a request is made only for the specified identifier, so only a single dynamic number is retrieved.
- span tag must be inside "A" tag in order to work correctly on mobile phones (i.e. to be able to click and automatically dial number)
- span tag must have data-calltracks-class attribute set which refers to the correct Calltracks identifier
- span tag may have data-default-number attribute set which contains default number which is displayed after one second after clicking if there was no response from Calltracks server
>Click to reveal</
>Click to reveal</
By default, Calltracks will display phone numbers in the format that you would dial within the country that the number is for. For example, a UK phone number will be displayed as: "0113 496 0123", and a US number as "1 877 555 0199".
You can change to international format, by including the attribute data-use-intl-fmt="true". For example:
<span class="calltracks_main" data-use-intl-fmt="true">+1 (877) 555-0199</span>
For inclusion/exclusion of trunk digits, spacing of digits in phone numbers, etc, it is our intention to follow the standard of each respective country. If you feel that Calltracks displays a phone number incorrectly, then please contact your support representative, and we will investigate.
For advanced formatting of phone numbers, for example to include punctuation, such as periods or dashes, we allow you to specify a custom number format within the span tag. This can also be used for overriding the default setting, and force the number to be displayed in international format. When using the original format, if the number begins with a plus sign or ‘00’, then the number that Calltracks inserts, will be in international format, starting with the same prefix. If you do not have an international dialling prefix, then you can still use data-use-intl-fmt="true" to force international format on the inserted number.
To use the same formatting as what you already have on your site, you simply insert a data attribute, data-use-original-fmt="true". This will cause the new phone number to be inserted with the same punctuation, spacing, etc as the original number.
Examples, with and without international prefixes
<span class="calltracks_main" data-use-original-fmt="true">(877) 555-0199</span>
<span class="calltracks_main" data-use-original-fmt="true">+44 20 7946 0001</span>
<span class="calltracks_main" data-use-original-fmt="true" data-use-intl-fmt="true">44 20 7946 0001</span>
Dynamic content (Ajax loaded)
Any content that is loaded via Ajax will need to be handled separately, since phone numbers are then not replaced when the page is initially loaded.
The easiest option, if applicable, is to load the content when the page is loaded, but leave it hidden until the time that it should be displayed (for example, the visitor clicks on a button). This will ensure that the numbers are replaced as normally.
If this is not possible, or if numbers are only loaded on demand, to avoid having too many phone numbers on one page, then number replacement can be triggered by reloading our code.
This can be done by either modifying the code that loads the Ajax content, or within the Ajax content itself, like this: