In this article, we are going to talk about using input parameters in Teneo Web Chat (TWC). Teneo Web Chat is a chat widget that can be embedded in websites. It has built-in support for various message types like buttons, quick replies, images, audio, videos, and cards, and the powerful JavaScript API allows for easy live chat integration and extendability. You can click here for more information about Teneo Web chat.
Use case of buttons with input parameters
In Teneo Web Chat you can set up buttons by putting the json in an output parameter named teneowebclient (click here for the json format). A basic button contains a button text and a postback text. When the user clicks on the button, the postback text as the only information will be sent to the engine. However, in some cases you may need a specific button to carry more information to be sent back when it is clicked. Consider the following use case in which someone has developed a chatbot for online selling.
This is a Card with buttons in Teneo Web Chat frontend. When the user clicks the button Buy now, we do not only need to capture the intent, but also the item that the user is going to buy. This can be done by setting up input parameters in the buttons. Please note that if you cannot do this via Easy Message Type creation (click here for more info about Easy Message Types).
Setting up JSON of buttons with input parameters
The JSON for a button with input parameters should look as follows. For the full JSON for buttons to be included in the output parameter teneowebclient please click here.
Here is an example of setting up the JSON in Teneo Studio. The most common place to set it up is a script node in a flow (click here to see how to insert a script node). The script below will generate a JSON for two buttons Buy now and Return stored in a string variable named buttonJson , which should be defined as a flow variable or global variable. The button Buy now contains three input parameters: item_id , item_name and action , and the other button Return does not contain any input parameter.
def buttons = [:]
buttons.type = "buttons"
buttons.button_items = []
def button_buy = [:]
button_buy.title = "Buy now"
button_buy.postback = "Buy now"
button_buy.parameters = ["item_id":"0123456789","item_name":"Otamatone Deluxe","action":"purchase"]
buttons.button_items << button_buy
def button_return = [:]
button_return.title = "Return"
button_return.postback = "Return"
buttons.button_items << button_return
}
buttonJson = new groovy.json.JsonBuilder(buttons).toString()
After setting up this script node, you should use the variable buttonJson in an output parameter in the following way:
Please note that the name of the output parameter should always be teneowebclient , and you should use ${variable_name} as the parameter value.
Retrieve information from input parameters
In the Teneo Web Chat frontend, when the button Buy now is clicked, the engine will receive the three parameters mentioned above in addition to the postback text. The postback text will be treated as a text input by the engine. As for these parameters, you can retrieve the information from them using the following method:
engineEnvironment.getParameter("parameter_name")
This method is pre-defined in Teneo Studio and can be use either as Match Requirement or Data Action. Comparing with using language conditions, using this method as Match Requirement can ensure that the Bot correctly recognizes the user’s intent when clicking the button. Here is an example of using it as Match Requirement:
The trigger or transition with this Match Requirement will only be fired if the user clicks a button which contains input parameter action , and the value of this input parameter is purchase .
Using this method in Data Action is a common way to extract the information from input parameters. Here is an example of using it as Data Action:
This Data Action will extract the values of input parameters item_id and item_name , and then store them in two variables (could either be flow variable or global variable): sItemId and sItemName . You can also put the script in listeners or propagation scripts which are less intuitive than Data Action (click here for comparison between Listeners and Data Action).
Conclusion
As conclusion, comparing with simple buttons, buttons with Input Parameters carry more information which can be either used as match requirement or passed to global/flow variables. Besides buttons, you can also attach input parameters to clickable components such as clickable lists, quick replies and cards. They are very useful when you need to get more information than the postback text when the user clicks the button.
We hope you found this article useful, and feel free to ask here any questions you might have on the Teneo Web Chat!