# Buttons

Buttons offers a rich UX for users by showing them a list of predefined options to choose from. This makes the chat more conversational.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FSzV4DLIi8zoi3CDDy38a%2FCleanShot%202025-12-29%20at%2011.25.48.png?alt=media&#x26;token=a0a7b46f-6531-4889-98e4-edb53086c9cc" alt=""><figcaption></figcaption></figure>

The button action block is made up of 3 things:

1. Question to ask
2. Options to be displayed
3. Saving user input

## Question

A question that explains the user to choose from the list of buttons displayed.&#x20;

For example, “What do you need assistance in?”.

## Options

Along with the question, we show a list of pre-defined options that the user can choose from.&#x20;

These buttons are generally of two types:

### Branch buttons

Adding a branch button, adds a grey color node on the canvas. Using this node you can create different paths for each button in the chat flow.

For example, you can have a question like “How often do you shop online?” with the buttons,

* Every other day
* Once in a week
* Once in a month
* Rarely

{% hint style="info" %}
You can add a maximum of 10 buttons. To add more buttons, use the [Dynamic data](https://help.wotnot.io/build/action-blocks/dynamic-data) action block.
{% endhint %}

### URL buttons

Adding a URL button, allows you to open a webpage when that button is selected.&#x20;

For example, you can have a button which says “Read case study” which when clicked opens a webpage on a new tab.&#x20;

{% hint style="info" %}
You can also use 'mailto:<hello@example.com>' and 'tel:+919999999999' to open the email client or phone dialer when the button is clicked.&#x20;

![](https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2F6okw9weZ6RF9CUDFdOB4%2Fimage.png?alt=media\&token=2e174460-1aaa-4706-8afd-a6148f370916)

![](https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FdSoDOIOIspwXntI5B0uX%2Fimage.png?alt=media\&token=71718db7-4f02-4fa4-b2d5-3150a5be35cb)
{% endhint %}

### Variables

Variables are used to store the button selected by the user, so you can reference it for later use.&#x20;

You can either choose an existing variable from the dropdown or create a new one.

[Learn more](https://help.wotnot.io/build/interface/variables)<br>

## Some more button settings&#x20;

### Search

Enabling it shows a searchbox on top of the list of buttons, so that users can easily find the option they are looking for.&#x20;

This is really helpful when you have a huge list of buttons.

<div align="left"><figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FVv5e2S2Gj9LjmR2H4xFh%2FCleanShot%202024-05-04%20at%2018.54.36.png?alt=media&#x26;token=6f7401cd-6cf6-46cb-98f8-44772c38a11b" alt="" width="368"><figcaption></figcaption></figure></div>

### Multi-select

Allows the user to select multiple buttons at a time. After choosing the required buttons, user would need to hit “Send” to proceed to the next step in the chat flow.

When using multi-select, the flow will always route to the “Default” branch.

When using variables for multi-select, all values will be stored in a comma separated format i.e. “Fever, cough”.&#x20;

<div align="left"><figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FxfaQ1vy6bjlzdmh5nma8%2FCleanShot%202024-05-04%20at%2018.56.56.png?alt=media&#x26;token=1db3dd4d-bc40-403d-872b-3c953196338c" alt=""><figcaption></figcaption></figure></div>

### Buttons layout

Renders the button in the specified format:

* **Horizontal** – Horizontal placement of buttons as per available space.
* **Vertical** – Each item is displayed in a new line.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2FhBErbCulnpMu3dx3tmmX%2FGroup%201.png?alt=media&#x26;token=5b91f25f-5493-41af-9686-c6bbd2424bd3" alt=""><figcaption></figcaption></figure>

### Buttons sorting

You can choose to sort the list of buttons in the following order:

* A - Z – In an ascending order starting from A.
* Z - A – In a descending order starting from Z.
* Random – Button list will be randomized
* As defined – The order as displayed in the action panel.

### Free text input

By enabling "Enable free text" option, users can either choose from predefined buttons or type their own response in the chat input. Also, on the canvas a new "Free text" node will be added, which can be connected to an [AI agent](https://help.wotnot.io/build/action-blocks/agent) action block for AI-generated responses.

This allows for more natural, two-way conversations, and any free text entered can be handled by an AI agent for dynamic responses.

<figure><img src="https://360969599-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsrMxU8nO3RjusUiYuXBB%2Fuploads%2F6OT1s2KdElM5xkYSVRAx%2FCleanShot%202025-12-29%20at%2011.03.24.png?alt=media&#x26;token=ad2c067a-e7d7-4c53-8f10-4b07fad9c4be" alt=""><figcaption></figcaption></figure>
