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

# Menu Designer: Add Interactive Menus to Your Flow

> Build fully customizable button menus with background images, speech prompts, voice triggers, and conditional visibility in your Plural flow.

The Menu Designer element presents users with a set of tappable buttons on the robot's display or the Avatar screen. Each button can lead to a different branch of your flow, letting you build rich, multi-path interactions. Users can select a button by tapping it or by speaking the button text (or any voice trigger variation you define). The Menu Designer also supports a companion robot speech prompt so the Avatar can guide users toward making a choice.

## Create a Menu Designer element

Right-click on an empty area of your canvas and select **Menu Designer**, or drag the blue output circle from an existing element onto the canvas and select **Menu Designer** from the menu that appears. Plural creates the element and automatically draws a connection from the previous element.

## Open the Design Editor

<Steps>
  <Step title="Click the element once">
    A single click on the Menu Designer element opens the configuration sidebar on the right.
  </Step>

  <Step title="Click the element preview in the sidebar">
    Click the Menu Designer preview inside the sidebar to launch the full-screen Design Editor where you can visually style the layout.
  </Step>
</Steps>

## Configure buttons

### Add and reorder buttons

In the sidebar, type a label into each button's text field. Add more buttons with the **+** icon. Drag and drop buttons in the sidebar list to reorder them — the on-screen layout reflects the new order.

### Style individual buttons

Click a button in the Design Editor to open its styling panel. From there you can:

* **Change shape** — adjust the border radius from rectangular to fully rounded.
* **Add a background color** — pick from the color palette or enter a hex value.
* **Add a background image** — upload an image from your computer or choose from the Plural Media Library.
* **Add a border** — set border color and width.
* **Apply to all** — propagate the current button's style to every button in the menu.

### Style button text

Click the button label in the Design Editor to access text options:

1. Change the font family.
2. Change the text color.
3. Adjust horizontal alignment (left / right).
4. Adjust vertical alignment (top / bottom).

### Add a title, subtitle, and QR code

Use the title and subtitle fields at the top of the Design Editor to add a heading above the buttons. You can also enable a QR code placeholder and enter a URL to generate a scannable code directly on the menu screen.

### Set a background image or video

Click **Add BG Image/Video** at the bottom of the Design Editor to upload a background image or video, or paste in a direct URL. After adding a background, use **Add BG Overlay** to layer a semi-transparent color over it for better text contrast.

## Delete and hide buttons

Hover over any button in the Design Editor to reveal two icons:

* **Eye icon** (left) — hides the button visually. A hidden button still occupies its grid space and can still be triggered by voice if it has a label.
* **X icon** (right) — permanently deletes the button.

<Tip>
  Use hidden buttons to create invisible spacers and control menu layout, or to expose voice-only options that don't clutter the visual interface.
</Tip>

## Add robot speech

<Steps>
  <Step title="Save the Design Editor">
    Click **Save** in the Design Editor to return to the sidebar view.
  </Step>

  <Step title="Click the speech input field">
    In the sidebar, click **Enter text for robot to say** to open the speech input panel.
  </Step>

  <Step title="Enter text and variations">
    Type the call-to-action text (for example, *"Which topic would you like to explore?"*). Press **Enter** to add variations — Plural plays one at random each time.
  </Step>
</Steps>

## Add voice triggers

Each button responds to its visible label text by default. To expand voice recognition to synonyms and alternative phrasings, click on a button (in the sidebar or Design Editor) and add trigger phrases under the **Voice triggers** section.

For example, a button labeled **Start** could also respond to *"Let's go"*, *"Please start"*, or *"Begin"*.

## Save the user's selection

If you want to record which button the user tapped for use later in the flow, click a button and open the **Save answer** tab. Enter:

* **Variable name** — the name of the attribute to create or update (for example, `userInterest`).
* **Value** — the value to store when this button is selected (for example, `Technology`).

Reference the saved value anywhere in the flow with `#ATTRI/userInterest`.

## Conditional button visibility

Show or hide individual buttons based on flow variables or system attributes. Click a button and open the **Condition to show** tab, then set a variable, operator, and value. For example, to show a **Sunday Offer** button only on Sundays:

* **Variable:** `WeekdayNumber`
* **Operator:** equals
* **Value:** `7`

<Note>
  Connect every button output to a downstream element. Any button without a connection leads to a dead end in your flow.
</Note>