Articles on: Crisp Chatbot

How do I build a list of buttons with the Chatbot?

Using the Bot, you can create list of buttons for your customers and oriente them towards different branches of your scenario. This is a great way to identify leads, narrow-down their request, or perform various kinds of actions depending on the situation.

Just discovering the Bot plugin? Check out our Getting Started with the Bot plugin article first!

Creating a list of buttons and reacting to which button your users clicked is a 2 steps process. We will need:
Action block "Send Message: Button Picker" in order to send the list of buttons
Event block "Button/Field Action" in order to detect which button the user clicked

Looking to add an external or embedded link to your buttons? Check out this guide instead

Creating our list of Button Pickers

Inside of your scenario, you can open the Block Drawer from the left to drag a new Action block "Send Message: Button Picker" and start configuring the buttons you'll want to implement in your flow.
You will then need to add an Event block "Button/Field Action" for each of the button you created in the previous step. Each of this Event block should be added as a new child in order to split the scenario into multiple branches, to have individual flows for each of our buttons.

While you can drag/add individual Event blocks for each button, you also have a shortcut allowing you to quickly do so for buttons! Simply hover each of the buttons of your Action block to display a lightning icon enabling you to add a pre-configured Event block for each of your buttons.

Let's see an example right away to illustrate the setup!

Setup of a list of Buttons to offer choices to our users

Let's now review the details of the configuration:

This allows you to add more translations to your buttons, which will be displayed accordingly based on their language preferences. The "default locale" will be the default one if the user's language doesn't match one of the additional locale you configured.

The message attached to your picker message

This is where you can add/remove buttons and set their label (the text appearing on the button).
You can add more buttons and delete some if you wish. The "blue gear" icon will allow you to configure some additional properties, if you would like you to change the button's identifier (used to link a button's action block to the corresponding event block), or if you want your button to open a link when clicked instead.

This option can be toggled to turn a button mandatory. This means that the user will not be able to send message until a button has been clicked.

The type of "action" we want to detect. In our case, this is a "Button Click".

The Match value determines which of the previously created button this block should be detecting. You will be able to select a button from the ones you previously created, or input a different "identifier" if you have set a customized one during on step 3.

Allows you to memorize the value of that button inside of a key, which you can later use as a variable inside of a message, or to update a user's information.

And voilà ! Your list of button choices is now ready! You can try these directly from the "Test" area of the Scenario Editor.

Updated on: 11/03/2024

Was this article helpful?

Share your feedback


Thank you!