JavaScript Callback Widget

Overview

The Javascript Callback Widget gives you an easy to use method of providing customer call back functionality in your own web environment.

Details

This widget implements low-level callback APIs through a programmer friendly abstractions. To use the widget, add the following on your web callback page:

<script src="http://www.liveops.com/dataex/javascripts/liveops_callback.js">

In production you might want to use minified version:

<script src="http://www.liveops.com/dataex/javascripts/liveops_callback.min.js">

By design the widget is served from LiveOps servers and uses JSONP to handle cross-domain scripting.

Setting up the callback form

To implement the callback form it should follow certain conventions. The only mandatory form field is the callback phone number. In addition, the form might include other fields, such as first and last names, email address, etc. All extra fields get serialized and submitted as part of callback request. The callback form must be submitted using LiveOps.callback.request_callback method call.

To function properly the callback form has certain design requirements. First, the form must be enclosed in container <div> element. Second, it should have four hidden child elements which are as follows:

•     <form> element implementing the callback form and shown during open business hours.
•     </div> element with a message shown outside normal business hours.
•     </div> element with confirmation message shown after the callback gets scheduled.
•     </div> element with a message shown when callback requests gets denied (ex. blacklisted phone number).

The following example shows the generic callback form that follows the above requirements. The form uses default element IDs expected by the callback widget.

<!-- Callback form container -->
<div id="liveops_callback">
 
  <!-- Callback form, shown during open business hours. -->
  <form id="liveops_callback_open" style="display:none">
    <!-- The only mandatory field: callback phone number -->
    <input id="liveops_callback_phone">
 
    <!-- Use LiveOps.callback.request_callback() to submit the form and request the callback.-->
    <a href="javascript:LiveOps.callback.request_callback()">Call me back</a>>
  </form>
     
  <div id="liveops_callback_closed" style="display:none">
  <!-- Message shown outside normal business hours. -->
  </div>
    
  <div id="liveops_callback_scheduled" style="display:none">
  <!-- Message displayed when the callback gets scheduled. -->
  </div>
    
  <div id="liveops_callback_denied" style="display:none">
  <!-- Message displayed when the callback request gets denied. -->
  </div>
</div>

Invoking the callback widget consists of two steps:

•     Configure widget using LiveOps.callback.configure call.
•     Launch the widget by calling LiveOps.callback.run and passing the API token as a parameter.

The following code demonstrates the invocation:

<script>
  window.onload = function() {
    LiveOps.callback.configure({
      // <-- Specify callback widget configuration parameters here.
    });
    // Check business hours and display the callback form.
    LiveOps.callback.run({ api_token: ''api_token'' });
  };
</script>

Configuring the callback widget

The LiveOps.callback.configure method has one parameter which is JSON object with the following elements:

• campaign_id: specifies campaign ID used to process callback request. This is the only parameter that is required and does not have default value.
• phone_field: specifies the ID of form field where user enters the callback phone number. Default value is liveops_callback_phone.
• callback_container: specifies the ID of HTML element that serves as callback from container. Default value is liveops_callback.
• callback_closed: specifies the ID of HTML element that is shown outside normal business hours. Default value is liveops_callback_closed.
• callback_denied: specifies the ID of HTML element that is shown when the callback request gets denied. Default value is liveops_callback_denied.
• callback_open: specifies the ID of HTML element containing the actual callback form. The form gets displayed during normal business hours. Default value is liveops_callback_open.
• callback_scheduled: specifies the ID of HTML element that is shown when the callback request gets scheduled (ex. confirmation message). Default value is liveops_callback_scheduled.
• enable_logging: Controls whether to display debug logging in browser's JavaScript console. Default value is false.

For example:

LiveOps.callback.configure({
  callback_id:    42,
  phone_fied:     'phone',
  enable_logging: true
});

Obtaining callback API token

The backend that serves the callback form page should request the API token, and pass it in LiveOps.callback.run method call. The following Ruby code demonstrates the usage of the API token:

require "net/http"
require "json"

api_uri = URI.parse(API_TOKEN_URL)
api_response = Net::HTTP.get_response(api_uri)
json = JSON.parse(api_response.body)
api_token = json['returnObject']['api_token']
puts "api token  => #{api_token}"
#
# Load the callback form HTML template and inject
# the API token in LiveOps.callback.run() call.
#
html = IO.read('./callback_form.html')
html.sub!('LiveOps.callback.run()', "LiveOps.callback.run({ api_token: '#{api_token}' })")