List Component

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

{
  "type": "list",
  "payload": {
      "title": "Select you order",
      "description": "Some description",
      "closeMessage": "Ask something else",
      "closeButtonEnabled": true,
      "multiSelectEnabled": true,
      "options": [
          {
              "id": "#14215322532532",
              "text": "Order #14215322532532",
              "date": "2024-01-01T00:00:00.000Z",
              "images": ["image1.png", "image2.png"],
              "additionalInfo": [
                { "label": "Qty", "value": "4"},
                { "label": "Price", "value": "£10.99" }
              ]
          }
      ]
  },
  "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.
  • date: (optional) A date to display within the list item.
  • images: (optional) An array of optional images to display within the list item. Only the first 2 images are displayed, with a badge showing how many additional images there are.
  • additionalInfo: (optional) An array of optional additional information displayed within 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.