Adding Buttons to Your Flow

The button component in Studio allows you to create interactive choice options for users. To add buttons:

1. Navigate to your desired block in the conversation flow

2. Click the "Listen" option in the top toolbar

3. Select "Buttons" from the dropdown menu

4. You can now begin configuring your button options

5. We have two types of buttons: Static & dynamic

We have discussed them in detailed below:

How To Adding Static Buttons in Flow?

Static buttons are straightforward with fixed values:

1. In the right panel, click on the "Static"

2. Enter your button's "Label" - this is what users will see

3. Set the "Value" - this is what your flow will receive when clicked

4. Match Type can be Value or Intent for the Flow

5. Use "Add Button" to create more button as needed

6. Remove unwanted buttons using the "Remove Button" option

How To Add Dynamic Buttons in Flow?

For advanced use cases, you can make buttons dynamic:

1. Switch to "Dynamic" mode using the toggle in the right panel

2. Configure the Source Data Variable that will populate your buttons

3. Set up Label Expression using {{item.label}} syntax

4. Define Value Expression using {{item.value}} syntax

5. Optionally set a Store Into Variable to capture selections

Here's a practical example that demonstrates how to create dynamic buttons using code:

1. First, I have created a JavaScript code containing buttons. In this example, I have hardcoded the values; however, you can execute code to fetch them on real-time.

• Make sure to store your button data in a FLOW variable before referencing it in the dynamic button component.

Then in your Dynamic Button settings:

1. Set Source Data Variable to: FLOW.last_response

2. Set Label Expression to: {{label}}

3. Set Value Expression to: {{valueExpression}}

The variable names in the double curly braces {{}} must exactly match your JSON property names

This will create four buttons that match the image example exactly. The labels will be "1st Button", "2nd Button", "3rd Button", and "4th Button", with corresponding values of "1", "2", "3", and "4".