The purpose of this feature is to make it easier to customize the user interface of the Chat app. Use helpers to detect the DOM elements of the Chat app, modify them, and set bindings to its elements. This allows you to add Chat SDK actions to these custom features.

The "Helpers" property of the Chat Instance is intended for use inside the subscriptions of the adapter. There are three different methods:

setListener

The 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".

  • Special mention to elementExists: Use elementExists event when you expect the callback function to be triggered once the Chat 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.

• return String: 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)

The 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.

getListeners

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 setListener function.

chatbot.helpers.getListeners()

removeListener

This function removes the listener with its corresponding uniquelistenerID. It removes the event binding and also removes the listener from the listenerList of the getListeners function.

chatbot.helpers.removeListener(listenerID)

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.