Carousel Component

The Carousel component allows you to display a series of slides, such as products or images, in a horizontal or vertical scrollable UI. You can customise the carousel's appearance and functionality with several properties.

Key Properties:

• slideOrientation: Defines how the carousel slides are displayed. Use the following values:
  • horizontal: For landscape images.
  • vertical: For portrait images.
  • square: For square images.
  • none: No specific orientation.
• carouselType (optional): Defines the type of carousel which is used for analytics. Currently the only supported type is product-carousel
• multiSelectEnabled (optional): When enabled, multiple slides can be selected and submitted. The submitted payload becomes an array of slide ID's.
• payload: An array of objects where each object represents a single slide. The following properties can be included:
  • id: The unique identifier for the slide (e.g., a product).
  • trackingId (optional): Used for analytics tracking, must be a string.
  • image: A URL to the image displayed for the slide. Not required if variants are provided.
  • title: The name/title of the slide. Supports markdown.
  • description: A brief description of the slide. Supports markdown.
  • price (optional): Displays the price on the slide (overridden by variant prices, if any). Supports markdown.
  • externalLink (optional): A URL that opens in a new tab when the slide is clicked.
  • buttonText (optional): Text for the main action button (e.g., "Buy").
  • disabled (optional): Whether the slide is disabled.
  • variants (optional): If variants are provided, thumbnail images for each variant will be displayed. Variant-specific data, such as price, externalLink, and trackingId, override the top-level values when selected.
  • secondaryButton (optional): Properties for displaying a second action button.
    • text: The label for the secondary button.
    • callbackName: The name of a custom callback, triggered when the secondary button is clicked.
    • externalLink (optional): A URL that opens in a new tab when clicked.
    • disabled (optional): Disables the secondary button if set to true.

Example Carousel Configuration with Variants:

{
  "type": "carousel",
  "slideOrientation": "horizontal",
  "carouselType": "product-carousel",
  "payload": [
    {
      "id": 1,
      "trackingId": "apple",
      "image": "https://www.some-cdn/image1.jpg",
      "title": "Apple",
      "description": "Apple slide",
      "externalLink": "http://google.com",
      "price": "£10",
      "secondaryButton": {
        "text": "Add to cart",
        "callbackName": "onAddToCart",
        "disabled": false
      },
      "variants": [
        {
          "id": 8,
          "image": "https://www.some-cdn/image1.jpg", // Required
          "title": "Red apple",
          "description": "A red apple",
          "price": "£1",
          "externalLink": "http://google.com",
          "trackingId": "111"
        },
        {
          "id": 9,
          "image": "https://www.some-cdn/image2.jpg", // Required
          "title": "Green apple",
          "description": "A green apple",
          "price": "£2",
          "externalLink": "http://google.com",
          "trackingId": "222"
        }
      ]
    }
  ]
}

Carousel Variant Properties:

{
  id: string | number;       // Required
  image: string;             // Required
  title?: string;            // Optional
  description?: string;      // Optional
  name?: string;             // Optional
  price?: string;            // Optional
  externalLink?: string;     // Optional
  trackingId?: string; // Optional
}

Callbacks for Carousel Events:

onCarouselDisplay: Triggered when the carousel is displayed. The carouselType (if provided) is passed to the callback.

  <script>
    window.DG_CHAT_WIDGET_CONFIG = {
      callbacks: {
        onCarouselDisplay: (carouselType) => {
          console.log(carouselType);
        }
      }
    }
  </script>

onCarouselSelection: Triggered when a slide is selected. This callback receives the trackingId, slideData, carouselType, and carouselPayload as parameters.

<script>
  window.DG_CHAT_WIDGET_CONFIG = {
    callbacks: {
      onCarouselSelection: (trackingId, slideData, carouselType, carouselPayload) => {
        console.log(trackingId, slideData, carouselType, carouselPayload);
      }
    }
  }
</script>