Widget Carousel

Le widget carousel affiche plusieurs pistes audio dans un lecteur défilable, parfait pour les produits avec plusieurs avis audio ou descriptions.

⚠️

Version du script requise

Le widget carousel n'est pas disponible dans widget-4.0.0-standalone.js. Il nécessite widget-3.1.0.js. Assurez-vous d'utiliser le bon script dans votre intégration.

Quand l'utiliser

Pages produit avec plusieurs clips audio
Pages de collection présentant plusieurs produits
Sections de témoignages avec plusieurs avis audio

Utilisation de base

Ajoutez l'élément widget avec l'attribut data-ekoo-type défini à "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>

Paramètres

Attribut	Statut	Description
`data-ekoo-type`	Obligatoire	Doit être défini à "carousel" pour activer la mise en page carousel.
`data-ekoo`	Obligatoire	Votre ID de site web Ekoo. Trouvé dans votre backoffice sous les paramètres du site web.
`data-ekoo-product-id`	Obligatoire	L'identifiant du produit. Doit correspondre à l'ID produit configuré dans le backoffice Ekoo.
`data-ekoo-locale`	Optionnel	Code de langue (ex. "fr", "en") pour filtrer le contenu audio par locale.

Fonctionnement

Le carousel charge automatiquement tout le contenu audio publié associé au produit spécifié. Les utilisateurs peuvent faire défiler ou cliquer sur les pistes en utilisant les contrôles de navigation intégrés.

Chaque piste affiche son titre, le nom du locuteur, et un bouton de lecture. Le carousel gère l'état de lecture audio — quand un utilisateur démarre une nouvelle piste, la précédente se met automatiquement en pause.

Exemple complet

Intégration widget carousel

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>

ℹ️

Fallback audio unique

Si un seul audio existe pour le produit, le carousel affichera une seule piste — il n'affichera pas les flèches de navigation.

Différences avec Standalone

Le widget standalone affiche une seule piste audio, tandis que le carousel affiche tous les audios publiés pour le produit. Le carousel ajoute des contrôles de navigation (flèches et indicateurs) pour que les utilisateurs puissent parcourir tout le contenu disponible.

Choisissez standalone quand vous voulez une expérience focalisée, sur une seule piste. Choisissez carousel quand votre produit a plusieurs clips audio et que vous voulez que les visiteurs les explorent tous.

Étapes suivantes

Widget Standalone — Afficher un lecteur audio unique pour un produit.
Cycle de vie des widgets — Contrôler les widgets de manière programmatique avec les fonctions du cycle de vie.