Carousel Widget

The carousel widget displays multiple audio tracks in a scrollable player, perfect for products with several audio reviews or descriptions.

⚠️

Required script version

The carousel widget is not available in widget-4.0.0-standalone.js. It requires widget-3.1.0.js. Make sure to use the correct script in your integration.

When to Use

Product pages with multiple audio clips
Collection pages showcasing several products
Testimonial sections with multiple audio reviews

Basic Usage

Add the widget element with the data-ekoo-type attribute set to "carousel":

1<!-- ⚠️ Carousel requires widget-3.1.0.js — NOT available in 4.0.0-standalone -->
2<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"</script>
3
4<ekoo-widget
5  data-ekoo="YOUR_WEBSITE_ID"
6  data-ekoo-product-id="YOUR_PRODUCT_ID"
7  data-ekoo-type="carousel"
8></ekoo-widget>

Parameters

Attribute	Status	Description
`data-ekoo-type`	Required	Must be set to "carousel" to enable the carousel layout.
`data-ekoo`	Required	Your Ekoo website ID. Found in your backoffice under website settings.
`data-ekoo-product-id`	Required	The product identifier. Must match the product ID configured in the Ekoo backoffice.
`data-ekoo-locale`	Optional	Language code (e.g. "fr", "en") to filter audio content by locale.

How It Works

The carousel automatically loads all published audio content associated with the specified product. Users can swipe or click through tracks using the built-in navigation controls.

Each track displays its title, speaker name, and a play button. The carousel handles audio playback state — when a user starts a new track, the previous one pauses automatically.

Complete Example

Carousel widget integration

html

1<!-- ⚠️ Carousel requires widget-3.1.0.js — NOT available in 4.0.0-standalone -->
2<script src="https://app.ekoo.co/widgets/widget-3.1.0.js"</script>
3
4<ekoo-widget
5  data-ekoo="YOUR_WEBSITE_ID"
6  data-ekoo-product-id="YOUR_PRODUCT_ID"
7  data-ekoo-type="carousel"
8  data-ekoo-locale="fr"
9></ekoo-widget>

ℹ️

Single audio fallback

If only one audio exists for the product, the carousel will display a single track — it won't show navigation arrows.

Differences from Standalone

The standalone widget displays a single audio track, while the carousel shows all published audio for the product. The carousel adds navigation controls (arrows and indicators) so users can browse through all available content.

Choose standalone when you want a focused, single-track experience. Choose carousel when your product has multiple audio clips and you want visitors to explore them all.

Next Steps

Standalone Widget — Display a single audio player for a product.
Widget Lifecycle — Control widgets programmatically with lifecycle functions.