Introduction

The purpose of this adapter is to explain and show helper functionalities, modifying the DOM elements and setting event bindings.

Suppose that you create a customMessage that offers three different payment methods in the conversationMessage: It uses the helpers to do so, to modify the styles and bind the click event in each of the payment method images.

Finally, you set a variable with the selected payment method, and display the final message:

Adapter code and public Github repository

This adapter can be found in the Github helpers adapter adapters repository.

How does it work?

1. The configuration adapter array calls the selectPayment function. This function uses the onDisplayChatbotMessage subscription to interrupt the welcomeMessage and replace it with a customAnswer message that contains the three payment method images.

2. The selectPayment function also has onReady. You use the helpers.setListener function on the given classes:

chat.helpers.setListener('.credit_card', 'elementExists', modifyStyling,bot); 

Call the modifyStyling function when the Chat SDK detects that the credit_card class exists. You also send the bot instance to extraData, as you need this to remove the listener inside the modifyStyling class: this way, the function only triggers once.

3. The onReady subscription also has the following setListeners for every payment option:

   paypalListener = chatbot.helpers.setListener('.paypal', 'click', clickPayment,bot);

   This function is binding the event click to the given DOM element. It calls the clickPayment function, and sends the bot instance so you can use Chat actions and helpers inside the clickPayment function.

4. On the clickPayment function, if applicable, you send the addVariable request with the value of the listenerID clicked. This stores the payment variable with the payment method that the user selected.

Actions and Subscriptions required

This adapter uses of the following actions:

• displayChatbotMessage to send the initial message.

In addition to the actions, it also uses the following subscriptions:

• onReady set the initial helpers.setListeners, setting the new event bindings once the Chat app is ready.

• onDisplayChatbotMessage to interrupt the initial message and send our customMessage

And finally the helpers functionality:

• setListener Lets you bind these two event in the given selectors:

elementExists: Used to detect when the given selector is rendered in the DOM, so you can modify the styles of this element using the modifyStyling function.

click: Clicking calls the clickPayment function. This allows you to detect which of the payment elements the user selected, and set a variable with the option.

• helpers.removeListener This function removes the event binding with the given ID. Use this in the clickPayment function, so that the user cannot select a different option after the first click.