> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/en/build/tools/quick-menu.md).

# Quick Menu

Create a persistent quick menu in the Web Chat input bar so visitors can send messages, insert text, or open links with one click

Quick Menu is a type of Agent UI. It stays in the Web Chat input bar, allowing visitors to start with 2–6 menu items without typing first. Each item can send a message, insert text into the input field, or open an external link.

{% hint style="info" %}
Quick Menu is only displayed in Web Chat. It does not appear on other platforms, such as LINE, Microsoft Teams, or test conversations in the admin console.
{% endhint %}

## When to use it <a href="#use-case" id="use-case"></a>

An online retailer wants visitors to choose "Check order status," "Returns and exchanges," or "Contact support" as soon as they open the support chat. The administrator creates a quick menu, sets the first two items to send the corresponding questions, and sets the third to insert "I want to contact support" into the input field. Visitors can click an item to start the right service flow without having to figure out what to ask.

## Create a quick menu <a href="#create" id="create"></a>

{% stepper %}
{% step %}
Go to <mark style="color:blue;">AI Features</mark> → <mark style="color:blue;">Agent UI</mark>, click Add, and select <mark style="color:blue;">Quick Menu</mark>.

<figure><img src="https://1360999650-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6v6TNkkOQVfRYfcNirHL%2Fuploads%2Fgit-blob-228b5dbf7cbfe70339c1b2324c4e7ba2010b8bbf%2Fquick-menu-type-picker.png?alt=media" alt="Quick Menu card on the Agent UI type selection page"><figcaption><p>Select "Quick Menu" to start configuring it</p></figcaption></figure>
{% endstep %}

{% step %}
Enter the <mark style="color:blue;">Display Name</mark>, <mark style="color:blue;">Tool Name</mark>, and an optional description. The tool name is used by the AI, so use an English name that follows the naming rules.
{% endstep %}

{% step %}
Under <mark style="color:blue;">Appearance</mark>, select Grid or List. To show the full menu as soon as visitors enter the chat, enable <mark style="color:blue;">Expand by Default</mark>.
{% endstep %}

{% step %}
Configure 2–6 menu items and select an action for each. The <mark style="color:blue;">Preview</mark> on the right shows how the menu will appear in Web Chat in real time.

<figure><img src="https://1360999650-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6v6TNkkOQVfRYfcNirHL%2Fuploads%2Fgit-blob-4e19ed5e5d020b9243eb734e2d099b4052ac93b2%2Fquick-menu-editor.png?alt=media" alt="Quick Menu editor with basic information, appearance, and menu item settings on the left and a Web Chat preview on the right"><figcaption><p>Quick Menu editor and live preview</p></figcaption></figure>
{% endstep %}

{% step %}
Check the preview, then click <mark style="color:blue;">Save</mark> in the upper-right corner.
{% endstep %}
{% endstepper %}

## Add the quick menu to an Agent <a href="#attach-to-agent" id="attach-to-agent"></a>

Saving a quick menu does not automatically display it in Web Chat. You must also attach it to an Agent that uses Agent mode.

{% stepper %}
{% step %}
Go to <mark style="color:blue;">AI Features</mark> → <mark style="color:blue;">AI Assistants</mark> and open the Agent that will use the quick menu.
{% endstep %}

{% step %}
Make sure the Agent's response mode is <mark style="color:blue;">Agent Mode</mark>. If it is not, the "Agent UI" section will guide you to switch modes first.
{% endstep %}

{% step %}
In the Agent settings, click <mark style="color:blue;">Agent UI</mark>, then <mark style="color:blue;">Select Agent UI</mark>.
{% endstep %}

{% step %}
Select the quick menu you just created, confirm your selection, and save the Agent. Reopen this Agent's Web Chat to use the quick menu in the input bar.
{% endstep %}
{% endstepper %}

## Differences between the three actions <a href="#actions" id="actions"></a>

| Action               | What happens when clicked                                                                        | Best for                                                     |
| -------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ |
| **Send Message**     | Sends the configured prompt directly to the AI; the button text is displayed in the conversation | Frequently asked questions and predefined service flows      |
| **Fill Input Field** | Inserts text into the input field so visitors can edit it before sending                         | Requests that need an order number or additional details     |
| **Open Link**        | Opens the specified URL                                                                          | Visiting an official website, form, or external service page |

For "Send Message," the button text and the prompt sent to the AI can differ, but they should have the same meaning to avoid a mismatch between the option visitors see and the request the AI receives.

## Appearance and icons <a href="#appearance" id="appearance"></a>

A grid menu automatically arranges items based on their number, while a list is suitable for items with longer text. Each item can have no icon, use an Emoji, or use an uploaded image. If no icon is set, the menu uses the first character of the button text as an identifier.

{% hint style="warning" %}
If a menu item opens an external link, make sure the URL uses HTTPS and regularly check that the link is still accessible.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.maiagent.ai/maiagent-user-guide/en/build/tools/quick-menu.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.