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. It is based on the most common way companies usually display their phone numbers! There might be cases where you might want to show 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 the 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>

It will display an international number like this: +442011223344

If you want even further customisation to your number formatting, you’ll have to elaborate on the following parameters and add 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:

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 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