Démarrage rapide

Tout ce qu'il faut pour intégrer les widgets audio Ekoo dans votre site web.

Prérequis

Avant de commencer, assurez-vous de disposer des éléments suivants :

Un compte Ekoo — inscrivez-vous ou connectez-vous au backoffice Ekoo.
Un identifiant de site web — disponible dans le backoffice Ekoo sous les paramètres de votre site web.
Du contenu audio publié lié à au moins un produit de votre catalogue.

Aperçu de l'intégration

Étape 1 — Inclure le script Ekoo

Ajoutez la balise script suivante à votre HTML. Placez-la dans la section <head> ou juste avant la balise de fermeture <body> . L'attribut defer garantit que le script se charge sans bloquer le rendu de la page.

Ajouter le script

html

1<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

Étape 2 — Ajouter les éléments widget

Placez un élément <ekoo-widget> partout où vous voulez qu'un lecteur audio apparaisse. Définissez data-ekoo="YOUR_WEBSITE_ID" avec votre identifiant de site web Ekoo et data-ekoo-product-id avec le produit pour lequel vous voulez afficher de l'audio.

Ajouter un widget

html

1<ekoo-widget
2  data-ekoo="YOUR_WEBSITE_ID"
3  data-ekoo-product-id="YOUR_PRODUCT_ID"
4></ekoo-widget>

Étape 3 — Publier le contenu audio

Dans le backoffice Ekoo, créez du contenu audio et liez-le à vos produits. Une fois que l'audio est publié, le widget l'affichera automatiquement sur votre page — aucun changement de code supplémentaire n'est requis.

Prochaines étapes

Prêt à vous lancer ? Suivez notre guide quickstart étape par étape pour avoir un widget audio fonctionnel sur votre page en moins de 5 minutes.

Aller au Quickstart →

💡

Test en développement

Vous pouvez tester les widgets en développement en utilisant votre vrai identifiant de site web — les widgets ne s'affichent que lorsque du contenu audio publié existe pour le produit donné.

ℹ️

Configuration distante

Le widget Ekoo récupère automatiquement sa configuration visuelle complète depuis le backoffice Ekoo en se basant sur votre websiteId et productId. Cela inclut : le thème, les couleurs, les textes CTA, les paramètres d'animation, la position, et le CSS personnalisé. Vous n'avez pas besoin de définir des attributs d'apparence dans votre HTML — la configuration du backoffice est appliquée automatiquement. Les attributs data ne sont nécessaires que pour surcharger la configuration du backoffice pour une instance spécifique du widget.