Sign in

Welcome.
How can we help?

How can I customise Freespee number formatting on my website?

Topic: , Updated:

Number formatting on websites can be displayed in lots of different ways depending on multiple factors. As each unique Freespee script recognises which country the account is registered in, it’s by default replacing the numbers on your website displaying only area code + subscriber number. This is based on the most common way companies usually display their phone numbers! There might be cases where you might want to display the country code as well.

Here’s how to do it:

Standard Freespee script

<script type="text/javascript">
var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx'}]);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>

For example, if you're located in London and place the standard Freespee script on your website - your number will look like the following formatting: 020 1122 3344

To be able to add country code to the replacing Freespee numbers you’ll have to add a few lines of code to your script, including the e.164 recommendation. The e.164 recommendation defines the general number plan for international numbers (country codes) in almost all countries in the world. Here’s how the script would look like:

<script type="text/javascript">
var formattingFunction = function(localNumber, e164Number) {
return e164Number;
} var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx','formatting_function': formattingFunction}]);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>

This will display an international number like this: +442011223344

If you want even further customisation to your number formatting, you’ll have to elaborate with the following parameters and them to your Freespee script:

return e164Number.replace(/\+(\d{0,2})(\d{0,2})(\d{0,3})(\d{0,3})(\d*)/,'+$1 (0) $2 $3 $4 $5');

To understand the different parameters so that you understand what happens when you change them, here’s a quick explanation:

Parameter Description
/\+ Ignores the plus character generated by the script
(\d{0,2}) Block containing two digits. If you change the second digit to a higher one, the block will include more digits
(\d*) All remaining digits
+ Writes the plus character into the number formatting
$1 First block of digits/characters. Change the number to '3' and it will mean the third block

A Freespee script including the parameters above would look like the one presented below and also provide a Freespee number with the following formatting:

<script type="text/javascript">
var formattingFunction = function(localNumber, e164Number) {
return e164Number.replace(/\+(\d{0,2})(\d{0,2})(\d{0,3})(\d{0,3})(\d*)/,'+$1 (0) $2 $3 $4 $5');
} var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx','formatting_function': formattingFunction}]);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>

Formatting example: +44 (0) 20 112 233 44

If you are showing one number for national calls and one for international callers then you can use this to keep an international formatting on the latter.

Put a <span> tag around the number that you would like to keep the international format on, in the example below I have set the id fs-international-number on that <span> tag.

var formattingFunction = function(localNumber, e164Number) {
    document.getElementById("fs-international-number").innerHTML = e164Number.replace(/\+(\d{0,2})(\d{0,2})(\d{0,3})(\d{0,3})(\d*)/,'+$1 (0) $2 $3 $4 $5');     return localNumber; }

If you are using the getNumber version of our script (e.g. when using the onClick solution), the formatting of the number needs to be done in a slightly different way. Instead of using the formattingFunction, you will instead add the preferred formatting inside the getNumber, as follows: 

  function doOnClick() {
    var a = document.getElementById('nr');
    __fs_dncs_instance.getNumber(
      function(ref,res) { 
        ref.innerHTML=res.e164.replace(/\+(\d{0,2})(\d{0,2})(\d{0,3})(\d{0,2})(\d*)/,'$2 $3 $4 $5');
      },
      a,
      '+44201234567',
      'advid'
    );
  }

The code shown above will return a number in the following format: '20 123 45 67'

Hope this clarifies how you can customise the Freespee number formatting for your website and if you’d like to dig deeper into more customisation options, feel free to visit our developers section

Was this article helpful?
2 out of 2 found this helpful

Comments


Not the answer to your question?

Powered by Zendesk