Scheduler runtime developer guide
In addition to the Widget settings that can be configured in the Mindful Callback user interface, some Widget actions can also be customized at runtime 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 runtime developer guide covers the following components of the global vhtConversationBridgeClient object:
- Functions
- Properties
- Events
Functions
Function | Description |
---|---|
.initialize() | This function will re-scan the DOM for widget 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 elements are dynamically added to the DOM after script load. |
.destroy() | This function will remove all previously initialized Widgets 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() | This function will cause 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
Property | Data type | Description |
---|---|---|
.updateInterval | number | The amount of time in milliseconds that a Widget should wait between data refresh requests. The default is 5000 ms (5 seconds). |
.defaultSubmitErrorMessage | string |
|
.noFocusUpdateInterval | number |
|
.inactiveWidgetUpdateInterval | number |
|
.inactiveWidgetTimeout | number |
|
.widgetExpirationTimeout | number |
|
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:
Textconst 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 };
Event | Related function | Description | Arguments |
---|---|---|---|
.events.widgetInitialized | function(widgetElement, widgetInstance) |
|
|
.events.widgetDestroyed | function(widgetElement, widgetInstance) | Called when a Widget is destroyed (refer to the .destroy() function)? | |
.events.submitStart | function(widgetElement) | Called when the user clicks the Submit button in a Widget to request a callback |
|
.events.submitSuccess | function(widgetElement)
| Called when a callback request has been successfully submitted to Mindful | |
.events.setUserData | function(widgetId) |
| widgetId: The ID of the Widget |
Example
The following example uses the setUserData event to populate a user email and account number:
window.vhtConversationBridgeClient.events.setUserData = function() {
return {
userEmail: "customer@domain.com",
accountNumber: "123456"
};
}