Example Code

We've put together some example code which should work on your website to get you started with customising your Call Back straight away. All of the functionality below can be used together, as shown by the final example.

Make sure that the installation code (shown below) is present in the head section of your webpages. You must replace the ----'s in the following code examples with your Identifier and Key which can be found in your account.

The installation code is included in all examples, but do make sure that your Identifier and Key are entered correctly otherwise it will not work. All of the code is in vanilla JavaScript and xHTML 1.0. These are examples only and should be adapted to your website as appropriate. However, depending on how your website is coded, they may well take on the appearance of your site automatically.

<script>
 
  var _novero = _novero || [];
  _novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
  (function() {
      var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
      novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
  })();
 
</script>

Giving Automated Feedback to Your Visitor

You can specify an HTML Node Element, such as a span or div in which we'll put the 'response' from the TTNC network. Most of the time the response will be "Thanks, we'll call you back shortly", however sometimes if there is a problem we will return a friendly error message.

This is highly recommended to use as it gives your website visitor feedback regarding the status of their Call Back request.

You can also handle the feedback to the customer in a completely bespoke way by using the NoveroJS Success and NoveroJS Failure event functions.

<script>
  var _novero = _novero || [];
  _novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
  (function() {
      var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
      novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
  })();
 
  function StartClickToCall(event) {
 
      (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 
      _novero.push(['NoveroCallback', 'NewCallback', {
          Destination : document.getElementById('Number').value,
          ResponseElement : document.getElementById('ClickToCallResponse')
      }]);
  }
</script>

<form id="ClickToCallForm" onsubmit="StartClickToCall(event);">
 
    <label for="Number">What number shall we call you on?</label>
    <input type="text" name="Number" id="Number"><br>
 
    <input type="submit" value="Call me back">
    <div id="ClickToCallResponse"></div>
 
</form>


HtmlElement ResponseElement `optional`	The HtmlElement object returned from native JavaScript functions such as document.getElementById()

Specifying a Time for the Call

Using the customisation options in NoveroJS you can give your website visitors the option to postpone their call back. Below is an example using an HTML select box, but as long as the CallbackDate parameter is sent in a proper format, it does not matter how the information is selected.

<script>
 
var _novero = _novero || [];
_novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
(function() {
    var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
    novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
})();
 
function StartClickToCall(event) {
 
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 
    _novero.push(['NoveroCallback', 'NewCallback', {
        Destination : document.getElementById('Number').value,
        CallbackDate : document.getElementById('CallbackDate').value
    }]);
}
 
</script>

<form id="ClickToCallForm" onsubmit="StartClickToCall(event);">
 
    <label for="Number">What number shall we call you on?</label>
    <input type="text" name="Number" id="Number"><br>
 
    <label for="CallbackDate">When would you like the Call Back?</label>
    <select name="CallbackDate" id="CallbackDate">
        <option value="" selected="selected">Now</option>
        <option value="+10 minutes">In 10 minutes</option>
        <option value="+30 minutes">In 30 minutes</option>
        <option value="+1 hour">In 1 hour</option>
        <option value="+24 hours">Tomorrow</option>
        <option value="2016-05-21 09:00:00">Tomorrow at 9am</option>
    </select><br>
 
    <input type="submit" value="Call me back">
 
</form>


string CallbackDate `optional`	A string representation of time, either in the international standard for date and time (e.g. "2016-05-20 11:58:10") or the in a relative time format (e.g. "+5 minutes" or "+24 hours")

Sending Additional Data

You can also send additional data from your website which will be saved in your Call Back logs accessible in myTTNC, as well as found in the Call Back email you receive from us. The additional data is a Key-Value pair object which is sent as the parameter AdditionalData. In the example below, there are two other input boxes for the visitors' Name and Email address which are being sent as additional data.

<script>
 
var _novero = _novero || [];
_novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
(function() {
    var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
    novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
})();
 
function StartClickToCall(event) {
 
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 
    var AdditionalData = {
        CustomerFirstName : document.getElementById('Name').value,
        CustomerLastName : document.getElementById('EmailAddress').value
    };
 
    _novero.push(['NoveroCallback', 'NewCallback', {
        Destination : document.getElementById('Number').value,
        AdditionalData : AdditionalData
    }]);
}
 
</script>

<form id="ClickToCallForm" onsubmit="StartClickToCall(event);">
 
    <label for="Name">Your name:</label>
    <input type="text" name="Name" id="Name"><br>
 
    <label for="EmailAddress">Your email address:</label>
    <input type="text" name="EmailAddress" id="EmailAddress"><br>
 
    <label for="Number">What number shall we call you on?</label>
    <input type="text" name="Number" id="Number"><br>
 
    <input type="submit" value="Call me back">
 
</form>


object AdditionalData `optional`	A Key-Pair value object.

Handling a Successful Call Back Request

When a Call Back request completes successfully (the call back has started, or is scheduled to start) you can determine what happens with your website visitor using the NoveroJS default Success function. You can show your own custom success message, change the page the user is on or anything within your power via JavaScript. The default Success function is passed as another element in the request array, after the object specifying the Call Back request details.

<script>
 
var _novero = _novero || [];
_novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
(function() {
    var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
    novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
})();
 
function StartClickToCall(event) {
 
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 
    var SuccessfulRequest = function() {
        document.getElementById('ClickToCallForm').style.display = 'none';
        document.getElementById('ClickToCallSuccessMessage').style.display = 'block';
    };
 
    _novero.push(['NoveroCallback', 'NewCallback', {
        Destination : document.getElementById('Number').value
    }, SuccessfulRequest]);
}
 
</script>

<form id="ClickToCallForm" onsubmit="StartClickToCall(event);">
 
    <label for="Number">What number shall we call you on?</label>
    <input type="text" name="Number" id="Number"><br>
 
    <input type="submit" value="Call me back">
 
</form>
 
<div id="ClickToCallSuccessMessage" style="display: none;">Thank you! One of our staff will be calling you back.</div>

Handling a Failed Call Back Request

Just like handling a successful Call Back request, you can handle a failed one. The NoveroJS default Failure function is passed through as a function in the request array one position after the success function. To make things simpler, the following example shows both Success and Failure functions being used.

<script>
 
var _novero = _novero || [];
_novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
(function() {
    var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
    novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
})();
 
function StartClickToCall(event) {
 
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 
    var SuccessfulRequest = function() {
        document.getElementById('ClickToCallForm').style.display = 'none';
        document.getElementById('ClickToCallErrorMessage').style.display = 'none';
        document.getElementById('ClickToCallSuccessMessage').style.display = 'block';
    };
 
    var FailedRequest = function(Request, Response) {
        document.getElementById('ClickToCallErrorMessage').style.display = 'block';
        document.getElementById('ClickToCallErrorMessage').innerHTML = Response.ResponseMessage;
    };
 
    _novero.push(['NoveroCallback', 'NewCallback', {
        Destination : document.getElementById('Number').value
    }, SuccessfulRequest, FailedRequest]);
}
 
</script>

<form id="ClickToCallForm" onsubmit="StartClickToCall(event);">
 
    <label for="Number">What number shall we call you on?</label>
    <input type="text" name="Number" id="Number"><br>
 
    <input type="submit" value="Call me back">
 
</form>
 
<div id="ClickToCallSuccessMessage" style="display: none;">Thank you! One of our staff will be calling you back.</div>
 
<div id="ClickToCallErrorMessage"></div>

Both the Success and Failure functions can access the Request and Response NoveroJS object and are available as the first and section argument, respectively. In the example above, we are using the 'Response.ResponseMessage' property to get the textual response from the TTNC network.

Everything Combined

All of the functionality above can be used together. Below is an example of everything happening together (except for ReponseElement as this becomes a little redundant when using the Success and Failure functions).

<script>
 
var _novero = _novero || [];
_novero.push(['NoveroJS', 'Set', 'CallbackIdentifier', '----'], ['NoveroJS', 'Set', 'CallbackKey', '----']);
(function() {
    var novero = document.createElement('script'); novero.type = 'text/javascript'; novero.async = true;
    novero.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.ttnc.co.uk/js/NoveroJS.1.0.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(novero, s);
})();
 
function StartClickToCall(event) {
 
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
 
    var AdditionalData = {
        CustomerFirstName : document.getElementById('Name').value,
        CustomerLastName : document.getElementById('EmailAddress').value
    };
 
    var SuccessfulRequest = function() {
        document.getElementById('ClickToCallForm').style.display = 'none';
        document.getElementById('ClickToCallErrorMessage').style.display = 'none';
        document.getElementById('ClickToCallSuccessMessage').style.display = 'block';
    };
 
    var FailedRequest = function(Request, Response) {
        document.getElementById('ClickToCallSuccessMessage').style.display = 'none';
        document.getElementById('ClickToCallErrorMessage').style.display = 'block';
        document.getElementById('ClickToCallErrorMessage').innerHTML = Response.ResponseMessage;
    };
 
    _novero.push(['NoveroCallback', 'NewCallback', {
        Destination : document.getElementById('Number').value,
        AdditionalData : AdditionalData,
        CallbackDate : document.getElementById('CallbackDate').value
    }, SuccessfulRequest, FailedRequest]);
}
 
</script>

<form id="ClickToCallForm" onsubmit="StartClickToCall(event);">
      
    <label for="Number">What number shall we call you on?</label>
    <input type="text" name="Number" id="Number"><br>
   
    <label for="Name">Your name:</label>
    <input type="text" name="Name" id="Name"><br>
   
    <label for="EmailAddress">Your email address:</label>
    <input type="text" name="EmailAddress" id="EmailAddress"><br>
   
    <label for="CallbackDate">When would you like the Call Back?</label>
    <select name="CallbackDate" id="CallbackDate">
        <option value="" selected="selected">Now</option>
        <option value="+5 minutes">In 5 minutes</option>
        <option value="+10 minutes">In 10 minutes</option>
        <option value="+30 minutes">In 30 minutes</option>
        <option value="+1 hour">In 1 hour</option>
        <option value="+2 hours">In 2 hours</option>
    </select><br>
  
    <input type="submit" value="Call me back">
      
</form>
  
<div id="ClickToCallSuccessMessage" style="display: none;">Thank you! One of our staff will be calling you back.</div>
  
<div id="ClickToCallErrorMessage"></div>