Scheduler run-time developer guide
Customize Scheduler widget behavior at run-time.
In addition to the widget settings that can be configured in the Mindful user interface, some widget actions can also be customized at run-time on your website.
When the required vht-conversation-bridge-runtime.js script has been executed on your website, it will automatically scan for HTML elements that define widgets. It will then initialize each widget it finds. The script also adds a new JavaScript object named vhtConversationBridgeClient to the global scope (window.vhtConversationBridgeClient). The properties and functions of this object can be used to further refine the behavior of your widgets.
Overview
This run-time developer guide covers the following components of the global vhtConversationBridgeClient object:
- Functions
- Properties
- Events
Functions
- initializeWidgets(rootNode)
Re-scan the DOM for widget elements only (not Intents) and initialize them.
This function is called automatically when the vht-conversation-bridge-runtime.js script is finished loading and can be called manually if widget elements are dynamically added to the DOM after script load.
- init(rootNode)
Re-scan the DOM for widget and Intent elements and initialize them.
This function is called automatically when the vht-conversation-bridge-runtime.js script is finished loading and can be called manually if widget or Intent elements are dynamically added to the DOM after script load.
- destroyWidgets(rootNode)
Remove all previously initialized widgets only (not Intents) from the DOM and unregister their event handlers.
Its primary use is to ensure that a view is properly cleaned up in a single-page application.
- destroy(rootNode)
Remove all previously initialized widgets and Intents from the DOM and unregister their event handlers.
Its primary use is to ensure that a view is properly cleaned up in a single-page application.
- .update()
Force all initialized widgets to request an update of their data.
Normally a widget will reload its own data periodically (see the .updateInterval property) and this function would not need to be called manually.
Properties
- .updateInterval
number
The amount of time in milliseconds that a widget should wait between data refresh requests
Default — 5000 ms (5 seconds)
- .defaultSubmitErrorMessage
string
This message is shown to the user if the widget cannot communicate with the Scheduler API while attempting to submit a callback request.
Communication failures can occur if there is a network connectivity error or if the API is momentarily unresponsive.
Default — "Unable to submit request. Please try again later."
- .noFocusUpdateInterval
number
The interval at which the widget will request updates from the server when the host page does not have focus or is otherwise running in the background
Default — 60000 ms (60 seconds)
- .inactiveWidgetUpdateInterval
number
The interval at which the widget will request updates from the server after a period of inactivity
Default — 60000 ms (60 seconds)
- .inactiveWidgetTimeout
number
The amount of time with no activity on the page before the widget is declared inactive and it starts updating at the rate specified by .inactiveWidgetUpdateInterval
Default — 3600000 ms (1 hour)
- .widgetExpirationTimeout
number
Once a widget reaches this age, it is disabled.
The server-generated widget content is removed from the page and replaced with whatever fallback widget content was served with the page (if any). The widget also stops making requests to the server.
Default — 86400000 ms (24 hours)
Events
By assigning a function to the following event properties, you can customize the way widgets operate.
Assigning a function as an event handler will replace the existing default handler. To preserve the default behavior, you can assign a handler function that calls the original function.
Consider the following example, which performs the default action in addition to a custom action when a widget submits a callback request:
const defaultSubmitStartHandler = window.vhtConversationBridgeClient.events.submitStart;
window.vhtConversationBridgeClient.events.submitStart = function() {
console.log("Submitting a callback request");
// custom action
defaultSubmitStartHandler.apply(this, arguments);
// also call default action
};- .events.widgetInitialized
Related function —
function(widgetElement, widgetInstance)Description — Called when a widget is initialized
The initial request for data will have been made asynchronously before this event was triggered, but may not have been completed. Thus, widget data may not yet be visible.
Arguments:
- widgetElement —The DOM element that represents the widget
- widgetInstance — The widget instance
- .events.widgetDestroyed
Related function —
function(widgetElement, widgetInstance)Description — Called when a widget is destroyed (refer to the
destroyWidgets(rootNode)anddestroy(rootNode)functions)- .events.submitStart
Related function —
function(widgetElement)Description — Called when the user clicks the Submit button in a widget to request a callback
Arguments:
- widgetElement — The DOM element that represents the widget
- XMLHttpRequest — The XMLHttpRequest object that was used to make the request
- .events.submitSuccess
Related functions:
function(widgetElement)
function(widgetElement, XMLHttpRequest)
Description — Called when a callback request has been successfully submitted to Mindful
- .events.setUserData
Related function —
function(widgetId)Description:
Called when the user clicks the Submit button in a widget to request a callback
Override this function and return a JavaScript hash of key-value pairs to include as custom user data for the callback request. The user data will be attached to the callback request and can be used as an input to your telephony platform to populate screenpop displays or affect call routing.
Arguments:
widgetId — The ID of the widget
Example
The following example uses the setUserData event to populate a user email address and account number:
window.vhtConversationBridgeClient.events.setUserData = function() {
return {
userEmail: "customer@domain.com",
accountNumber: "123456"
};
}