The purpose of this feature is to make it easier to customize the User Interface of the chatbot. Use helpers to detect the DOM elements of the Chatbot, modify them, and set bindings to its elements. This allows you to add Chatbot SDK actions to these custom features.
The "Helpers" property of the Chatbot Instance is intended for use inside the subscriptions of the adapter. There are three different methods:
setListener method adds the events of the HTML DOM events to the selected target.
setListener uses JQuery on functionality internally to handle the event binding of the DOM elements.
It generates a unique identifier that you can use to remove the listener.
chatbot.helpers.setListener(<selector>, <event>, <callback>,<extraData>)
selector* String : JQuery selector to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
event * String : One or more space-separated event types, such as "click" or "mouseover".
elementExists: Use elementExists event when you expect the callback function to be triggered once the Chatbot SDK detects that the given selector DOM element exists. The chatbotSDK checks for this DOM elements every time the DOM element changes, in both the sideWindow and list of messages, and triggers the callback function when it detects that the element exists.
callback* String: Function that is called when the event is triggered. It receives the listenerID, the DOM element that triggered the listener, and the optional extraData parameter.
extraData Object: Optional parameter to get as parameter in the callback function. You can add the
chatbotInstance to have access to the chatbotSDK actions and helpers.
returnString: Unique identifier.
contactClickListenerID = chatBot.helpers.setListener('#contactButton', 'click',startContact, chatBot);
In this example, you set the
click event to the Dom element with the id
contactButton: When the user clicks on the button, the
startContact function is called with the following parameters:
startContact(contactClickListenerID, targetElement, extraData)
targetElement is the DOM element that triggered the element, in this case the contact button. In
extraData, you have the
chatbotInstance, as you used the
setListener to send this parameter.
This function returns the list of the current listeners with their data bindings.
return: Array of objects, where the keys are the
uniquelistenerID generated with the
This function removes the listener with its corresponding
uniquelistenerID. It removes the event binding and also removes the listener from the
listenerList of the
listenerID: * The unique identifier of the given listener. It is used to unbind the event.
Please see here an example of an adapter that uses the helpers functionality.