From ffae807fdabbc6fdc1a2084fa4e5ce148f810ada Mon Sep 17 00:00:00 2001 From: Chloe Quijano Date: Wed, 25 Mar 2026 11:28:58 -0400 Subject: [PATCH 01/14] add render dropdown guide --- docs.json | 1 + studio/concepts/cards/capture-information.mdx | 6 +- webchat/interact/dropdown-menus.mdx | 105 ++++++++++++++++++ 3 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 webchat/interact/dropdown-menus.mdx diff --git a/docs.json b/docs.json index d2382648..269b3326 100644 --- a/docs.json +++ b/docs.json @@ -407,6 +407,7 @@ "/webchat/interact/start-trigger", "/webchat/interact/webchat-notification", "/webchat/interact/send-message", + "/webchat/interact/dropdown-menus", { "group": "Send custom events", "pages": [ diff --git a/studio/concepts/cards/capture-information.mdx b/studio/concepts/cards/capture-information.mdx index 41f2c640..f6e8b74e 100644 --- a/studio/concepts/cards/capture-information.mdx +++ b/studio/concepts/cards/capture-information.mdx @@ -1377,12 +1377,16 @@ You could add fixed options or add variables to each choice to make them dynamic ``` -Limit + Limit If you add more than 5 choices, they will be rendered as a Dropdown/List instead of buttons. This number may vary by channel.\{' '} The choices labels shouldn't be longer than 20 characters otherwise they will get cut in some channels. + + To show a **dropdown** when you have **five or fewer** choices, or to control options entirely in code, see [Dropdown menus](/webchat/interact/dropdown-menus). + + Note diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx new file mode 100644 index 00000000..dbcf829d --- /dev/null +++ b/webchat/interact/dropdown-menus.mdx @@ -0,0 +1,105 @@ +--- +title: Dropdown menus +description: Use Capture Information for automatic dropdowns, or an Execute Code card to show a dropdown with any number of options, including fewer than six. +--- + +You can present options as a **dropdown** instead of buttons. This guide covers the built-in behaviour with [Capture Information](/studio/concepts/cards/capture-information) and an approach **using code** when you need a dropdown with **fewer than six** options. + + + You will need: + + 1. A [Workflow](/studio/concepts/workflows) in [Botpress Studio](/studio/introduction) + 2. Familiarity with the [Execute Code](/studio/concepts/cards/execute-code) card for the manual method + + + + Rendering and CSS in this guide apply to this channel. Other channels may use different widgets or limits. See your channel’s mapping docs (for example [WhatsApp](/integrations/integration-guides/whatsapp/mapping/botpress-to-whatsapp)) if applicable. + + +## Method 1: Automatic dropdown (Capture Information) + +For a [Single Choice](/studio/concepts/cards/capture-information#single-choice) or [Multiple Choice](/studio/concepts/cards/capture-information#multi-choice) prompt with **choices** configured: + +1. Add a **Capture Information** card and set the field type to **Single Choice** or **Multiple Choice**. +2. Add your options under **Choices**. + +If you add **more than five** options, they are shown as a **dropdown (list)** instead of buttons. (The exact threshold can vary slightly by channel; see [Choices](/studio/concepts/cards/capture-information#choices) on the Capture Information page.) + +This is the simplest approach when you have enough options to trigger the dropdown UI. + +## Method 2: Manual dropdown (Execute Code) + +To show a **dropdown even when you have five or fewer** options, or to fully control the payload, send a message with `type: 'dropdown'` from an [Execute Code](/studio/concepts/cards/execute-code) card. + +### Send the dropdown message + +```javascript +await client.createMessage({ + userId: event.botId, + conversationId: event.conversationId, + tags: {}, + type: 'dropdown', + payload: { + text: 'Select an item:', // Shown above the control + options: [ + { label: 'Dropdown 1', value: 'dd1' }, + { label: 'Dropdown 2', value: 'dd2' }, + ], + }, +}) +``` + +1. **`payload.text`**: Label or instruction shown with the control. +2. **`payload.options`**: Each entry is `{ label: string, value: string }`. + 1. **`label`**: Text the user sees (for example a product name). + 2. **`value`**: Value stored or matched in logic (for example an SKU). They can match or differ. + + + In Execute Code, you can read context from the [event object](/studio/guides/advanced/event-properties) (for example `event.conversationId`). If `createMessage` fails in your environment, confirm `userId` and `conversationId` match how your runtime expects bot-originated messages (see [Send reminders](/studio/guides/how-to/send-reminders) for another `createMessage` pattern). + + +### Complete the flow after the dropdown + +After the dropdown is sent, the user must select an option. Typical pieces: + +1. **Wait for input.** Add a **Wait for User Input** step so the workflow pauses until the user interacts. See [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) on the Capture Information page (or combine with your next card’s capture behaviour as you prefer). + +2. **If the user sends free text instead of using the dropdown**, use an [Expression](/studio/concepts/cards/flow-logic#expression) (or similar) **transition** so that: + 1. If there is **no** selection payload, **loop back** to the same node (or show a short reminder and stay on the prompt). + 2. Example condition for “no dropdown value”: `!event.payload.value` + +3. **Store the selection.** In an **Execute Code** card after a valid selection: + + ```javascript + workflow.skuNumber = event.payload.value + ``` + + [Create a workflow variable](/studio/concepts/variables/scopes/workflow) (for example `skuNumber`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). + +Wire these cards in order in the same or connected nodes so the bot always waits, validates, then saves before continuing. + +## Customize the placeholder text (CSS) + +Classes for styling dropdowns are listed under **Use custom styles** on the [appearance settings](/webchat/get-started/configure-your-webchat#use-custom-styles) page (for example `bpMessageBlocksDropdownButtonText` in the **CSS Classes** table). + +To replace the default **Select…** style label with your own, add custom CSS under **Bot Appearance** → **Styles** in the Studio, for example: + +```css +/* Hide the original placeholder text */ +.bpMessageBlocksDropdownButtonText { + font-size: 0; + color: transparent; +} + +.bpMessageBlocksDropdownButtonText::before { + content: "Choose an option..."; + font-size: 0.8rem; + color: #7e7c7c; +} +``` + +Adjust `content`, `font-size`, and `color` to match your brand. + + + You can rely on **Capture Information** for dropdowns when you have **more than five** choices, or use **`createMessage`** with **`type: 'dropdown'`** in **Execute Code** whenever you need a dropdown with **fewer options** or custom `label` and `value` pairs. + From 0e326945cca84346c56e40f030d719e91187c918 Mon Sep 17 00:00:00 2001 From: Chloe Quijano Date: Wed, 25 Mar 2026 12:19:06 -0400 Subject: [PATCH 02/14] update wording --- webchat/interact/dropdown-menus.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index dbcf829d..849f40e3 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -13,7 +13,7 @@ You can present options as a **dropdown** instead of buttons. This guide covers - Rendering and CSS in this guide apply to this channel. Other channels may use different widgets or limits. See your channel’s mapping docs (for example [WhatsApp](/integrations/integration-guides/whatsapp/mapping/botpress-to-whatsapp)) if applicable. + Rendering and CSS in this guide apply to this channel. Other channels may use different widgets or limits. See your channel’s mapping docs if applicable. ## Method 1: Automatic dropdown (Capture Information) @@ -23,7 +23,7 @@ For a [Single Choice](/studio/concepts/cards/capture-information#single-choice) 1. Add a **Capture Information** card and set the field type to **Single Choice** or **Multiple Choice**. 2. Add your options under **Choices**. -If you add **more than five** options, they are shown as a **dropdown (list)** instead of buttons. (The exact threshold can vary slightly by channel; see [Choices](/studio/concepts/cards/capture-information#choices) on the Capture Information page.) +If you add **more than five** options, they are shown as a **dropdown (list)** instead of buttons. (The exact threshold can vary slightly by channel. See [Choices](/studio/concepts/cards/capture-information#choices) on the Capture Information page.) This is the simplest approach when you have enough options to trigger the dropdown UI. @@ -55,10 +55,10 @@ await client.createMessage({ 2. **`value`**: Value stored or matched in logic (for example an SKU). They can match or differ. - In Execute Code, you can read context from the [event object](/studio/guides/advanced/event-properties) (for example `event.conversationId`). If `createMessage` fails in your environment, confirm `userId` and `conversationId` match how your runtime expects bot-originated messages (see [Send reminders](/studio/guides/how-to/send-reminders) for another `createMessage` pattern). + In Execute Code, you can read context from the [event object](/studio/guides/advanced/event-properties). -### Complete the flow after the dropdown +### Complete the workflow after the dropdown After the dropdown is sent, the user must select an option. Typical pieces: @@ -71,21 +71,21 @@ After the dropdown is sent, the user must select an option. Typical pieces: 3. **Store the selection.** In an **Execute Code** card after a valid selection: ```javascript - workflow.skuNumber = event.payload.value + workflow.varName = event.payload.value ``` - [Create a workflow variable](/studio/concepts/variables/scopes/workflow) (for example `skuNumber`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). + [Create a workflow variable](/studio/concepts/variables/scopes/workflow) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). Wire these cards in order in the same or connected nodes so the bot always waits, validates, then saves before continuing. ## Customize the placeholder text (CSS) -Classes for styling dropdowns are listed under **Use custom styles** on the [appearance settings](/webchat/get-started/configure-your-webchat#use-custom-styles) page (for example `bpMessageBlocksDropdownButtonText` in the **CSS Classes** table). +Classes for styling dropdowns are listed under **Use custom styles** on the [appearance settings](/webchat/get-started/configure-your-webchat#use-custom-styles) page. To replace the default **Select…** style label with your own, add custom CSS under **Bot Appearance** → **Styles** in the Studio, for example: ```css -/* Hide the original placeholder text */ +/* Hide the original "Select..." text */ .bpMessageBlocksDropdownButtonText { font-size: 0; color: transparent; From 24523dedad3cd7d8c9634c8239b0d94740d0aa7c Mon Sep 17 00:00:00 2001 From: Chloe Quijano Date: Wed, 25 Mar 2026 12:20:37 -0400 Subject: [PATCH 03/14] nit: workflow --- webchat/interact/dropdown-menus.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 849f40e3..70a88c2a 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -58,11 +58,11 @@ await client.createMessage({ In Execute Code, you can read context from the [event object](/studio/guides/advanced/event-properties). -### Complete the workflow after the dropdown +### Complete the Workflow after the dropdown After the dropdown is sent, the user must select an option. Typical pieces: -1. **Wait for input.** Add a **Wait for User Input** step so the workflow pauses until the user interacts. See [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) on the Capture Information page (or combine with your next card’s capture behaviour as you prefer). +1. **Wait for input.** Add a **Wait for User Input** step so the Workflow pauses until the user interacts. See [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) on the Capture Information page (or combine with your next card’s capture behaviour as you prefer). 2. **If the user sends free text instead of using the dropdown**, use an [Expression](/studio/concepts/cards/flow-logic#expression) (or similar) **transition** so that: 1. If there is **no** selection payload, **loop back** to the same node (or show a short reminder and stay on the prompt). @@ -74,7 +74,7 @@ After the dropdown is sent, the user must select an option. Typical pieces: workflow.varName = event.payload.value ``` - [Create a workflow variable](/studio/concepts/variables/scopes/workflow) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). + [Create a Workflow variable](/studio/concepts/variables/scopes/workflow) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). Wire these cards in order in the same or connected nodes so the bot always waits, validates, then saves before continuing. From ea5cb767a819577f9aac752af9bc76f9f8b6a94b Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:28:07 -0400 Subject: [PATCH 04/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 70a88c2a..4bb70cdd 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -8,8 +8,8 @@ You can present options as a **dropdown** instead of buttons. This guide covers You will need: - 1. A [Workflow](/studio/concepts/workflows) in [Botpress Studio](/studio/introduction) - 2. Familiarity with the [Execute Code](/studio/concepts/cards/execute-code) card for the manual method + - A [published bot](/get-started/quick-start) + - Familiarity with JavaScript (if you use [method 2](#method-2-manual-dropdown-execute-code) From 33966beee2c88e2847f6b32ea79d771f9d20f4de Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:29:04 -0400 Subject: [PATCH 05/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 4bb70cdd..c47f09e1 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -13,7 +13,7 @@ You can present options as a **dropdown** instead of buttons. This guide covers - Rendering and CSS in this guide apply to this channel. Other channels may use different widgets or limits. See your channel’s mapping docs if applicable. + The approach and styling in this guide are designed to work with [Webchat](/webchat/get-started/quick-start)'s choice components. If your bot is deployed on a different channel, you may need to modify the approach to work with that channel's components. Check out the [integrations](/integrations/get-started/introduction) section for more information. ## Method 1: Automatic dropdown (Capture Information) From 6e61c75339b8dcd9f44399d037549d133abbf8ba Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:29:21 -0400 Subject: [PATCH 06/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index c47f09e1..0e14064f 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -60,7 +60,7 @@ await client.createMessage({ ### Complete the Workflow after the dropdown -After the dropdown is sent, the user must select an option. Typical pieces: +After the dropdown is sent, the user must select an option. Here are some typical ways to handle this: 1. **Wait for input.** Add a **Wait for User Input** step so the Workflow pauses until the user interacts. See [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) on the Capture Information page (or combine with your next card’s capture behaviour as you prefer). From d5a7e64181d395efc8f713aa9308f3ede1521b09 Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:30:16 -0400 Subject: [PATCH 07/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 0e14064f..9fd0743c 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -76,7 +76,7 @@ After the dropdown is sent, the user must select an option. Here are some typica [Create a Workflow variable](/studio/concepts/variables/scopes/workflow) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). -Wire these cards in order in the same or connected nodes so the bot always waits, validates, then saves before continuing. +Wire these cards in order in the same Node (or connected Nodes) so the bot always waits, validates, then saves before continuing. ## Customize the placeholder text (CSS) From f338e8d25c46cd56517d5e90a8c36478c4c1c6d3 Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:30:35 -0400 Subject: [PATCH 08/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 9fd0743c..92a494a9 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -101,5 +101,5 @@ To replace the default **Select…** style label with your own, add custom CSS u Adjust `content`, `font-size`, and `color` to match your brand. - You can rely on **Capture Information** for dropdowns when you have **more than five** choices, or use **`createMessage`** with **`type: 'dropdown'`** in **Execute Code** whenever you need a dropdown with **fewer options** or custom `label` and `value` pairs. + You can rely on **Capture Information** for dropdowns when you have more than five choices, or use `createMessage` with `type: 'dropdown'` in an Execute Code Card whenever you need a dropdown with fewer options or custom `label` and `value` pairs. From 697e5a84bd3607dc232a89c92bf387d4f4fa84ea Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:30:46 -0400 Subject: [PATCH 09/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 92a494a9..55d35e16 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -3,7 +3,7 @@ title: Dropdown menus description: Use Capture Information for automatic dropdowns, or an Execute Code card to show a dropdown with any number of options, including fewer than six. --- -You can present options as a **dropdown** instead of buttons. This guide covers the built-in behaviour with [Capture Information](/studio/concepts/cards/capture-information) and an approach **using code** when you need a dropdown with **fewer than six** options. +You can present options as a dropdown instead of buttons. This guide covers the built-in behaviour with [Capture Information](/studio/concepts/cards/capture-information) and an approach using code when you need a dropdown with fewer than six options. You will need: From 64910d97770ae7d9cbce0f53efffa7d859babf0a Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:30:58 -0400 Subject: [PATCH 10/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index 55d35e16..bcd096fc 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -64,9 +64,8 @@ After the dropdown is sent, the user must select an option. Here are some typica 1. **Wait for input.** Add a **Wait for User Input** step so the Workflow pauses until the user interacts. See [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) on the Capture Information page (or combine with your next card’s capture behaviour as you prefer). -2. **If the user sends free text instead of using the dropdown**, use an [Expression](/studio/concepts/cards/flow-logic#expression) (or similar) **transition** so that: - 1. If there is **no** selection payload, **loop back** to the same node (or show a short reminder and stay on the prompt). - 2. Example condition for “no dropdown value”: `!event.payload.value` +2. If the user sends free text instead of using the dropdown, use an [Expression Card](/studio/concepts/cards/flow-logic#expression) (or similar) so you can loop back to the same Node and enforce that they pick an option. +Here's an example condition you can add to the Expression Card to evaluate that their response didn't contain a choice from the dropdown: `!event.payload.value` 3. **Store the selection.** In an **Execute Code** card after a valid selection: From d5760855b5caab2fa2a2be0b7deaa46b73d4fe0b Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:31:11 -0400 Subject: [PATCH 11/14] Update webchat/interact/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- webchat/interact/dropdown-menus.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webchat/interact/dropdown-menus.mdx b/webchat/interact/dropdown-menus.mdx index bcd096fc..383c0135 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/webchat/interact/dropdown-menus.mdx @@ -67,13 +67,13 @@ After the dropdown is sent, the user must select an option. Here are some typica 2. If the user sends free text instead of using the dropdown, use an [Expression Card](/studio/concepts/cards/flow-logic#expression) (or similar) so you can loop back to the same Node and enforce that they pick an option. Here's an example condition you can add to the Expression Card to evaluate that their response didn't contain a choice from the dropdown: `!event.payload.value` -3. **Store the selection.** In an **Execute Code** card after a valid selection: +3. Use an **Execute Code** Card to store their choice. For example: ```javascript workflow.varName = event.payload.value ``` - [Create a Workflow variable](/studio/concepts/variables/scopes/workflow) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). + Remember to [create a Workflow variable](/studio/concepts/variables/scopes/workflow) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](/studio/concepts/variables/in-code)). Wire these cards in order in the same Node (or connected Nodes) so the bot always waits, validates, then saves before continuing. From 6b1f22721ef4d8ba128839902f46dbea333a26e8 Mon Sep 17 00:00:00 2001 From: Chloe Quijano Date: Wed, 25 Mar 2026 14:41:53 -0400 Subject: [PATCH 12/14] move guide to studio + link, update header --- docs.json | 8 ++++++-- studio/concepts/cards/capture-information.mdx | 2 +- .../interact => studio/guides/how-to}/dropdown-menus.mdx | 5 ++--- 3 files changed, 9 insertions(+), 6 deletions(-) rename {webchat/interact => studio/guides/how-to}/dropdown-menus.mdx (94%) diff --git a/docs.json b/docs.json index 269b3326..028104d6 100644 --- a/docs.json +++ b/docs.json @@ -236,7 +236,8 @@ "/studio/guides/how-to/translate", "/studio/guides/how-to/send-reminders", "/studio/guides/how-to/different-an-models", - "/studio/guides/how-to/track-ai-spend-in-table" + "/studio/guides/how-to/track-ai-spend-in-table", + "/studio/guides/how-to/dropdown-menus" ] }, { @@ -407,7 +408,6 @@ "/webchat/interact/start-trigger", "/webchat/interact/webchat-notification", "/webchat/interact/send-message", - "/webchat/interact/dropdown-menus", { "group": "Send custom events", "pages": [ @@ -662,6 +662,10 @@ { "source": "/integrations/integration-guides/hitl", "destination": "/integrations/integration-guides/hitl/introduction" + }, + { + "source": "/webchat/interact/dropdown-menus", + "destination": "/studio/guides/how-to/dropdown-menus" } ], "integrations": { diff --git a/studio/concepts/cards/capture-information.mdx b/studio/concepts/cards/capture-information.mdx index f6e8b74e..82cf628c 100644 --- a/studio/concepts/cards/capture-information.mdx +++ b/studio/concepts/cards/capture-information.mdx @@ -1384,7 +1384,7 @@ If you add more than 5 choices, they will be rendered as a Dropdown/List instead - To show a **dropdown** when you have **five or fewer** choices, or to control options entirely in code, see [Dropdown menus](/webchat/interact/dropdown-menus). + To show a **dropdown** when you have **five or fewer** choices, or to control options entirely in code, see [Dropdown menus](/studio/guides/how-to/dropdown-menus). diff --git a/webchat/interact/dropdown-menus.mdx b/studio/guides/how-to/dropdown-menus.mdx similarity index 94% rename from webchat/interact/dropdown-menus.mdx rename to studio/guides/how-to/dropdown-menus.mdx index 383c0135..c881912a 100644 --- a/webchat/interact/dropdown-menus.mdx +++ b/studio/guides/how-to/dropdown-menus.mdx @@ -1,6 +1,5 @@ --- -title: Dropdown menus -description: Use Capture Information for automatic dropdowns, or an Execute Code card to show a dropdown with any number of options, including fewer than six. +title: Send options as a dropdown menu --- You can present options as a dropdown instead of buttons. This guide covers the built-in behaviour with [Capture Information](/studio/concepts/cards/capture-information) and an approach using code when you need a dropdown with fewer than six options. @@ -9,7 +8,7 @@ You can present options as a dropdown instead of buttons. This guide covers the You will need: - A [published bot](/get-started/quick-start) - - Familiarity with JavaScript (if you use [method 2](#method-2-manual-dropdown-execute-code) + - Familiarity with JavaScript if you use [method 2](#method-2-manual-dropdown-execute-code) From d46dd6f7dfce119941e35b71a4c7ca92b5667aee Mon Sep 17 00:00:00 2001 From: Chloe Date: Wed, 25 Mar 2026 14:50:53 -0400 Subject: [PATCH 13/14] Update studio/guides/how-to/dropdown-menus.mdx Co-authored-by: Adrian Kahali --- studio/guides/how-to/dropdown-menus.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/guides/how-to/dropdown-menus.mdx b/studio/guides/how-to/dropdown-menus.mdx index c881912a..99b4decb 100644 --- a/studio/guides/how-to/dropdown-menus.mdx +++ b/studio/guides/how-to/dropdown-menus.mdx @@ -17,7 +17,7 @@ You can present options as a dropdown instead of buttons. This guide covers the ## Method 1: Automatic dropdown (Capture Information) -For a [Single Choice](/studio/concepts/cards/capture-information#single-choice) or [Multiple Choice](/studio/concepts/cards/capture-information#multi-choice) prompt with **choices** configured: +For a [Single Choice](/studio/concepts/cards/capture-information#single-choice) or [Multiple Choice](/studio/concepts/cards/capture-information#multi-choice) prompt with choices configured: 1. Add a **Capture Information** card and set the field type to **Single Choice** or **Multiple Choice**. 2. Add your options under **Choices**. From 0d0dea7adf15661796a2da0497d5510fb8805e31 Mon Sep 17 00:00:00 2001 From: Chloe Quijano Date: Wed, 25 Mar 2026 15:08:50 -0400 Subject: [PATCH 14/14] update guide with feedback and other changes to wording --- studio/guides/how-to/dropdown-menus.mdx | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/studio/guides/how-to/dropdown-menus.mdx b/studio/guides/how-to/dropdown-menus.mdx index 99b4decb..2998f8a7 100644 --- a/studio/guides/how-to/dropdown-menus.mdx +++ b/studio/guides/how-to/dropdown-menus.mdx @@ -17,18 +17,16 @@ You can present options as a dropdown instead of buttons. This guide covers the ## Method 1: Automatic dropdown (Capture Information) -For a [Single Choice](/studio/concepts/cards/capture-information#single-choice) or [Multiple Choice](/studio/concepts/cards/capture-information#multi-choice) prompt with choices configured: +1. Add a [Capture Information](/studio/concepts/cards/capture-information) Card to your [Workflow](/studio/concepts/workflows). Set the field type to **Single Choice** or **Multiple Choice** +2. Add your options inside the Card under **Choices**. -1. Add a **Capture Information** card and set the field type to **Single Choice** or **Multiple Choice**. -2. Add your options under **Choices**. - -If you add **more than five** options, they are shown as a **dropdown (list)** instead of buttons. (The exact threshold can vary slightly by channel. See [Choices](/studio/concepts/cards/capture-information#choices) on the Capture Information page.) +If you add more than five options, they are shown as a dropdown (list) instead of buttons. (The exact threshold can vary slightly by channel. See [Choices](/studio/concepts/cards/capture-information#choices) on the Capture Information page.) This is the simplest approach when you have enough options to trigger the dropdown UI. ## Method 2: Manual dropdown (Execute Code) -To show a **dropdown even when you have five or fewer** options, or to fully control the payload, send a message with `type: 'dropdown'` from an [Execute Code](/studio/concepts/cards/execute-code) card. +To show a dropdown even when you have five or fewer options, or to build the option list in code, send a message with `type: 'dropdown'` from an [Execute Code](/studio/concepts/cards/execute-code) Card. ### Send the dropdown message @@ -50,21 +48,20 @@ await client.createMessage({ 1. **`payload.text`**: Label or instruction shown with the control. 2. **`payload.options`**: Each entry is `{ label: string, value: string }`. - 1. **`label`**: Text the user sees (for example a product name). - 2. **`value`**: Value stored or matched in logic (for example an SKU). They can match or differ. + 1. **`label`**: Text the user sees (for example, a product name). + 2. **`value`**: Value stored or matched in logic (for example, a SKU). They can match or differ. - In Execute Code, you can read context from the [event object](/studio/guides/advanced/event-properties). + In an Execute Code Card, you can read context from the [event object](/studio/guides/advanced/event-properties). ### Complete the Workflow after the dropdown -After the dropdown is sent, the user must select an option. Here are some typical ways to handle this: +After the dropdown is sent, the user will select an option. Here are some typical ways to handle this: -1. **Wait for input.** Add a **Wait for User Input** step so the Workflow pauses until the user interacts. See [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) on the Capture Information page (or combine with your next card’s capture behaviour as you prefer). +1. Add a [Wait for User Input](/studio/concepts/cards/capture-information#wait-for-user-input) Card so the Workflow pauses until the user interacts -2. If the user sends free text instead of using the dropdown, use an [Expression Card](/studio/concepts/cards/flow-logic#expression) (or similar) so you can loop back to the same Node and enforce that they pick an option. -Here's an example condition you can add to the Expression Card to evaluate that their response didn't contain a choice from the dropdown: `!event.payload.value` +2. Use an [Expression Card](/studio/concepts/cards/flow-logic#expression) (or similar) to evaluate their response by checking `event.payload.value` 3. Use an **Execute Code** Card to store their choice. For example: