> ## Documentation Index
> Fetch the complete documentation index at: https://help.wotnot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons

> Display clickable buttons for users to interact with.

![Image](https://mintcdn.com/wotnot/zc_a16P1uDjl42Rz/images/image-252.png?fit=max\&auto=format\&n=zc_a16P1uDjl42Rz\&q=85\&s=3e3b8530049841c058833faf7c2cfcb2)

The buttons block offers a rich user experience by showing them a list of options to choose from. This makes the chat more conversational. Use them when you have a small number of clear choices, with each button creating its own path in the flow.

> [!NOTE]
>
> Buttons render natively on Web and Facebook Messenger. For WhatsApp, use [Reply buttons](https://help.wotnot.io/build/blocks/reply-buttons.md) instead. For longer flat lists, use [Options](https://help.wotnot.io/build/blocks/options.md). For grouped items on WhatsApp, use [List](https://help.wotnot.io/build/blocks/list.md).

# Using the Buttons block

Drag the **Buttons** action block onto the canvas and connect it to the required step in your flow. Add the buttons you want to display. Each Branch button creates its own output path on the canvas.

![Image](https://mintcdn.com/wotnot/zc_a16P1uDjl42Rz/images/image-253.png?fit=max\&auto=format\&n=zc_a16P1uDjl42Rz\&q=85\&s=b2374dcfca04c7ca4b1610172c9519c3)

## Configurations

### Message text

The **Message text** is the question or message displayed above the buttons.

Use it to tell the user what they need to choose. For example:

> What would you like to choose?

### Buttons

Add the predefined options that you want to display to the user.

Each button has its own label and can create a separate output path in the flow. You can reorder the buttons to control the order in which they are displayed.

You can add up to **10 buttons** in a Buttons action block.

> [!NOTE]
>
> If you need to display more than 10 buttons, use the [Dynamic data](https://help.wotnot.io/untitled-page-39) action block.

### Button action

Configure what happens when the user selects a button.

> [tab] Branch button
>
> A **Branch button** creates a separate output path on the canvas. When the user selects a button, the conversation continues through the corresponding branch.
>
> ![Branch buttons creating separate paths in the flow](https://mintcdn.com/wotnot/YfQKl2QOkXpO0Wk_/images/image-22.png?fit=max\&auto=format\&n=YfQKl2QOkXpO0Wk_\&q=85\&s=e58f0756d0739440f598115b15f17aa1)

> [tab] URL button
>
> A **URL button** opens the configured URL when a button is clicked.
>
> You can also use URL schemes such as:
>
> * `mailto:hello@example.com` — opens the email client.
> * `tel:+919999999999` — opens the phone dialer.
>
> ![URL button configuration](https://mintcdn.com/wotnot/YfQKl2QOkXpO0Wk_/images/image-23.png?fit=max\&auto=format\&n=YfQKl2QOkXpO0Wk_\&q=85\&s=464dbff52a137bf2474c934730da6d31)

### Save response

Save the button selected by the user to a variable so you can reference the selection later in the flow. Select an existing variable from the dropdown or create a new variable.

[Learn more about variables](https://app.mintlify.com/wotnot/wotnot/~/Variables-14ee193e-de52-4775-8c9d-34c7b7845d79)

## Other configurations

### Enable free-text

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://app.mintlify.com/wotnot/wotnot/~/AI-Agent-8c7995de-2959-4795-80f9-adb059fbaf44) 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.

![Free text setting in the Buttons action block](https://mintcdn.com/wotnot/YfQKl2QOkXpO0Wk_/images/image-26.png?fit=max\&auto=format\&n=YfQKl2QOkXpO0Wk_\&q=85\&s=4a6041cb908f09ee209c6dc3cb100600)

### Enable Search

Enabling it displays a **Search box** above the list of buttons. This allows users to quickly find the option they are looking for when the list contains several choices.

![Search setting in the Buttons action block](https://mintcdn.com/wotnot/YfQKl2QOkXpO0Wk_/images/image-24.png?fit=max\&auto=format\&n=YfQKl2QOkXpO0Wk_\&q=85\&s=1094700f4b1a4f13d0926e678ada9df5)

### Enable Multi-select

Enables users to select multiple buttons at the same time. After selecting the required options, the user must click **Send** to continue to the next step in the flow.

When Multi-select is enabled:

* The flow always routes to the **Default** branch.
* If a variable is configured, all selected values are stored as a comma-separated value.

For example, if the user selects **Fever** and **Cough**, the variable stores:

```text theme={null}
Fever, cough
```

![Image](https://mintcdn.com/wotnot/zc_a16P1uDjl42Rz/images/image-254.png?fit=max\&auto=format\&n=zc_a16P1uDjl42Rz\&q=85\&s=b04eb4b630c0238a2a36f08391df227b)

### **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.

![Image](https://mintcdn.com/wotnot/zc_a16P1uDjl42Rz/images/image-255.png?fit=max\&auto=format\&n=zc_a16P1uDjl42Rz\&q=85\&s=1d073b9e985a55cc167554bdfe245f86)

### **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.

## Output paths

Each **Branch button** creates its own output path on the canvas. Connect each path to the action block where you want the conversation to continue.

If a button's output path is not connected to another action block, there is no configured next step after the user selects that button.

When **Free text** is enabled, a separate **Free text** path is added to the canvas. This path handles responses entered by the user instead of selecting one of the predefined buttons.

Connect the **Free text** path to the action block that should handle unmatched or user-entered responses.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.