Skip to main content
You can present options as a dropdown instead of buttons. This guide covers the built-in behaviour with Capture Information and an approach using code when you need a dropdown with fewer than six options.
You will need:
The approach and styling in this guide are designed to work with Webchat’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 section for more information.

​
Method 1: Automatic dropdown (Capture Information)

  1. Add a Capture Information Card to your Workflow. Set the field type to Single Choice or Multiple Choice
  2. Add your options inside the Card 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 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 build the option list in code, send a message with type: 'dropdown' from an Execute Code Card.

​
Send the dropdown message

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, a SKU). They can match or differ.
In an Execute Code Card, you can read context from the event object.

​
Complete the Workflow after the dropdown

After the dropdown is sent, the user will select an option. Here are some typical ways to handle this:
  1. Add a Wait for User Input Card so the Workflow pauses until the user interacts
  2. Use an Expression Card (or similar) to evaluate their response by checking event.payload.value
  3. Use an Execute Code Card to store their choice. For example: 
    workflow.varName = event.payload.value
    Remember to create a Workflow variable (for example varName, type String) and grant access in code as needed (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.

​
Customize the placeholder text (CSS)

Classes for styling dropdowns are listed under Use custom styles on the appearance settings page. To replace the default Select… style label with your own, add custom CSS under Bot Appearance → Styles in the Studio, for example: 
/* Hide the original "Select..." 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 an Execute Code Card whenever you need a dropdown with fewer options or custom label and value pairs.
Last modified on March 25, 2026