Product Comparison

The Product Comparison component displays a side-by-side comparison table for 2–3 products within the chat interface. Products are shown as columns and attributes as rows, with the attribute label column remaining sticky while the table scrolls horizontally.

Example

{
  "type": "productComparison",
  "payload": {
    "products": [
      {
        "id": 1,
        "title": "Atlas Multi Pant",
        "image": "https://example.com/image2.png",
        "url": "https://example.com/products/atlas-multi-pant",
        "price": "£100",
        "attributes": {
          "material": "77% recycled nylon, 23% spandex",
          "fit": "True to size",
          "stock": "In stock"
        }
      },
      {
        "id": 2,
        "title": "Braxton Pant",
        "image": "https://example.com/image1.png",
        "url": "https://example.com/products/braxton-pant",
        "price": "£215",
        "attributes": {
          "material": "Recycled polyester",
          "fit": "Relaxed",
          "stock": "Low stock"
        }
      }
    ],
    "attributes": [
      { "key": "material", "label": "Material" },
      { "key": "fit", "label": "Fit" },
      { "key": "stock", "label": "Availability" }
    ]
  }
}

Properties

payload

• products: Array of products to compare (columns). Designed for 2–3 products. Each product supports:
  • id: The unique identifier for the product.
  • title: The product name displayed in the column header.
  • image (optional): URL of the product image, displayed in a 3:4 thumbnail.
  • url (optional): Product page URL. When provided, the product image links to this URL (opened in a new tab, or the parent window when the openLinksInNewTab general setting is disabled).
  • price (optional): Display price (e.g., "£140").
  • attributes: Object mapping attribute keys to display values (e.g., "material": "Mesh"). Products missing a value for a displayed attribute show a "—" placeholder.
• attributes: Array defining which attribute rows to show, in order. Each item supports:
  • key: The key to look up in each product's attributes object.
  • label: The row label displayed in the sticky first column.

Localisation

The following language keys are used and can be overridden via the lang config:

• productComparisonHeaderText: The sticky column header (default: "Compare").