Customise the Form

We've put together a couple of customised Call Back examples if you want to get straight into some practical working code. The information below will explain how to use the NoveroJS API in a more generic manner.

NoveroJS

The Call Back javascript code is the first part of an extensive JavaScript API from TTNC called NoveroJS. We are planning to add more services to the NoveroJS library in the future, so stay tuned!

The library is loaded using the 'installation code' below (do make sure that your Identifier and Key are entered correctly otherwise it will not work). In order for your website to start (or schedule) a call for one of your visitors your website must have this installation code in the head tag of whichever pages you want to use it on.

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

Once the library installs, you can start to use it to make or schedule calls using your Click to Call profile.

Interacting with NoveroJS

NoveroJS is designed so that the syntax is very similar to another very popular JavaScript library; ga.js (Google Analytics). So if you're familiar with using ga.js then you're already a step ahead as the way you use it is very similar.

All actions are sent as Arrays to the NoveroJS Object using the .push function. The first two items in the Array will always be Strings indicating which NoveroJS method you want to invoke.

<script>
 
  _novero; //This is the global level variable for the NoveroJS object.
  _novero.push([
    'Some',
    'Method'
  ]);
 
</script>

The last two items in the Array are optionally reserved for asynchronous callback Functions.

<script>
 
  _novero.push([
      'Some',
      'Method',
      /* ... other arguments ... , */
      function() { /* Success */ },
      function() { /* Failure */ }
  ]);
 
</script>

Items between the Method Strings and the call back Functions are the data being sent to the method, which could be a single data object, or several strings, integers, etc.

<script>
 
  _novero.push([
      'Some',
      'Method',
      { Thing : 4 }
  ]);
 
  _novero.push([
      'Do',
      'Stuff',
      'Thing',
      4
  ]);
 
</script>

Actions can be queued in subsequent _novero.push commands such as above, or can be chained in a single push, like below:

<script>
 
  _novero.push(['Some', 'Method', { Thing : 4 }], ['Do', 'Stuff', 'Thing', 4]);
 
  // Also the same as
  var Command1 = ['Some', 'Method', { Thing : 4 }];
  var Command2 = ['Do', 'Stuff', 'Thing', 4];
 
  _novero.push(Command1, Command2);
 
  // Also the same as
  _novero.push(['Some', 'Method', { Thing : 4 }]);
  _novero.push(['Do', 'Stuff', 'Thing', 4]);
 
</script>

Using NoveroJS to initiate Callbacks

First of all, you must already have at least one Callback Profile set up in myTTNC. For details, please see our guide for Setting Up Callback Profiles .

NoveroJS:Set

To authenticate with the Callback service, you must have a Key and Identifier set in the NoveroJS object. This is already done for you in the Installation Code you can get from myTTNC.

<script>
 
  _novero.push(['NoveroJS', 'Set', 'Identifier', 'abcd']);
  _novero.push(['NoveroJS', 'Set', 'Key', 'wxyz']);
 
</script>

The Identifier and Key for each Callback can be found in the Installation Code, or by clicking the link in the Advanced Installation section of the Get Call Back installation code expander.

You can call the NoveroJS::set method at any point in your own JavaScript to dynamically change which Callback Profile you are using. For instance; if you have a Sales and a Support department, you may wish to provide two different Callbacks for your customers so that they can get to the correct department. Add additional form elements (select box or radio buttons) to your Callback form and add an event to these elements, which calls the NoveroJS::set method. Here is a small section of code as an example, using radio buttons;

<script>
 
  Sales:
  <input type="radio" onchange="if(this.checked) _novero.push(['NoveroJS', 'set', 'Identifier', 'abcd'], ['NoveroJS', 'set', 'Key', 'wxyz']);" id="Sales" name="CallbackType[]">
  Support:
  <input type="radio" onchange="if(this.checked) _novero.push(['NoveroJS', 'set', 'Identifier', '1234'], ['NoveroJS', 'set', 'Key', '7890']);" id="Support" name="CallbackType[]">
 
</script>

When a visitor on your website changes the radio button between Sales and Support, the onchange event is triggered, setting the Key and Identifier appropriately. When the NoveroCallback::NewCallback method is invoked, it will use the last set Identifier and Key.

NoveroCallback::NewCallback

To initiate the Callback, you'll need to invoke the NoveroCallback::NewCallback method, sending an Object of the data required to fulfil the Callback.

_novero.push(['NoveroCallback', 'NewCallback', { /* Data Object */ }]);

The data Object only requires one field to be sent (Destination), but there are several other fields you can take advantage of:


string Destination	This is the telephone number of your website visitor.
string CallbackDate `optional`	This is the time at which they wish to be called back. This can be sent as an offset from the current time ('+1 hour') or a specific time ('2014-05-16 14:45:00'). All specific times are assumed to be Local London Time (GMT/BST).
HtmlElement ResponseElement `optional`	This is a HtmlElement (such as a div/div or span/span) to act as a container for the Callback Response Text. On occasion, there may be errors encountered which will be feedback to the user if the Callback is not available at the time they are using it. Otherwise, the Callback Response Text will read; "Thanks, we'll call you back shortly".
Object AdditionalData `optional`	This is a Key-Value pair object of additional data which will be saved into the Callback Logs viewable on the myTTNC control panel. You may want to capture the caller's name or other tracking information. By default, 'Referrer' is always saved as the URL of the current page.

You can collect your additional data by any means you wish (see examples below) as long as the Object is built as a Key-Value pair and sent to NoveroCallback::NewCallback as shown;

<script>
 
  var AdditionalData = {
      CustomerFirstName : document.getElementById('NoveroCallbackCustomerFirstName').value,
      CustomerLastName : document.getElementById('NoveroCallbackCustomerLastName').value,
      CustomerAddress : document.getElementById('NoveroCallbackCustomerAddress').value
  };
 
  AdditionalData.Notes = 'WebsiteContactUsPage'
 
  _novero.push(['NoveroCallback', 'NewCallback', {
      Destination : document.getElementById('NoveroCallbackNumber').value,
      CallbackDate : '+1 hour', //Optional, defaults to the current time.
      ResponseElement : document.getElementById('NoveroCallbackResponse'), //Optional
      AdditionalData : AdditionalData //Optional
  }]);
 
</script>

Now that you've got to grips with how to use NoveroJS, you may want to take a look at our customised Call Back examples for some working code to get you started.