The Javascript Callback Widget gives you an easy to use method of providing customer call back functionality in your own web environment.
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.
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:
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:
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>
The LiveOps.callback.configure method has one parameter which is JSON object with the following elements:
For example:
LiveOps.callback.configure({ callback_id: 42, phone_fied: 'phone', enable_logging: true });
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}' })")