Carousel Component
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): Used to trigger the
onCarouselDisplay
callback. This property is passed to the callback when the carousel is shown. - 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.
- 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").
- 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 | number; // 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 = {
widgetId: 'f0c07546-af4c-4963-9e23-3e9343eaf13b',
env: 'dev.us',
version: '2.1.0',
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 = {
widgetId: 'f0c07546-af4c-4963-9e23-3e9343eaf13b',
env: 'dev.us',
version: '2.1.0',
callbacks: {
onCarouselSelection: (trackingId, slideData, carouselType, carouselPayload) => {
console.log(trackingId, slideData, carouselType, carouselPayload);
}
}
}
</script>
Updated 9 days ago