List Component

The Lists feature allows you to display a list of items in a popup, perfect for things like showing return reasons or selection options. Here's an example of how to use it:

{
  "type": "list",
  "payload": {
      "title": "Reason for return",
      "description": "GIVENCHY Black Box Chain Minidress IT 38",
      "closeButtonEnabled": true,
      "closeMessage": "Ask something else",
      "multiSelectEnabled": true,
      "options": [
          {
              "id": "Does not fit properly",
              "text": "Does not fit properly"
          },
          {
              "id": "Order more than one size",
              "text": "Order more than one size"
          }
      ]
  },
  "prefixMessage": "Select an option"
}

Properties

payload

• title (optional): The title displayed at the top of the list.
• description (optional): A brief description of the list or the item it's related to.
• closeButtonEnabled (optional): If true, an 'X' icon will be shown, allowing users to close the popup and resume the flow.
• closeMessage (optional): If provided, this message will appear as a clickable option to close the popup.
• multiSelectEnabled (optional): If true, users can select multiple items from the list.
• options: An array of selectable items:
  • id: A unique identifier for each option.
  • text: The label or text displayed for the list item.

How it Works

If multiSelectEnabled is set to true, each list item will display a checkbox next to it, and a 'Confirm' button will appear at the bottom. The Confirm button becomes active once at least one item is selected. When the button is clicked, the widget sends an array of the selected options to continue the conversation flow.