Cycle de vie du widget

Le widget Ekoo expose trois méthodes JavaScript pour contrôler son cycle de vie : ekooLoad, ekooUnload et ekooReload. Ces méthodes sont essentielles pour les applications monopage (SPA) et les intégrations dynamiques.

window.ekooLoad()

Initialise le widget et scanne le DOM à la recherche de conteneurs Ekoo. Cette méthode est appelée automatiquement au chargement de la page. Vous n'avez besoin de l'appeler manuellement que dans les cas suivants :

• Votre application est une SPA (React, Vue, Angular, Svelte…) et le conteneur est ajouté dynamiquement au DOM.
• Vous injectez le widget après le chargement initial de la page (ex. : via un script tiers ou GTM).

1// Initialize all widgets on the page
2window.ekooLoad();

window.ekooUnload()

Nettoie tous les widgets Ekoo du DOM et libère les ressources associées (écouteurs d'événements, lecteurs audio, connexions réseau). Indispensable pour éviter les fuites mémoire dans les SPA.

1// Remove all widgets (call before leaving the page/component)
2window.ekooUnload();

window.ekooReload()

Force le rechargement complet du widget. Équivalent à un ekooUnload() suivi d'un ekooLoad(). Nouveau dans la v4, cette méthode est particulièrement utile pour les changements dynamiques de produit.

1// When the displayed product changes dynamically
2document.querySelector('[data-ekoo-product-id]')
3  .setAttribute('data-ekoo-product-id', 'new-product-456');
4
5// Unload then re-initialize
6window.ekooReload();

Conditions d'affichage

Le widget ne s'affiche que si toutes les conditions suivantes sont remplies :

• Le script Ekoo est chargé et exécuté.
• Un conteneur avec l'attribut data-ekoo (ou un élément <ekoo-widget>) est présent dans le DOM.
• Le websiteId est valide.
• Un productId est défini et correspond à un produit existant dans le backoffice.
• Au moins un audio publié est associé au produit.
• La locale demandée correspond à une locale disponible (si spécifiée).

Résolution de la configuration

Le widget récupère automatiquement la configuration depuis le backoffice Ekoo en fonction du websiteId et du productId. Les attributs data-* définis localement dans le HTML sont prioritaires sur la configuration distante du backoffice.

Pattern SPA complet

Voici le pattern recommandé pour intégrer le widget Ekoo dans une application monopage :

1// 1. On product page mount
2function onProductPageMount(productId) {
3  // Make sure no residual widget exists
4  window.ekooUnload();
5
6  // Update the product ID in the DOM
7  const container = document.querySelector('[data-ekoo]');
8  if (container) {
9    container.setAttribute('data-ekoo-product-id', productId);
10  }
11
12  // Load the widget
13  window.ekooLoad();
14}
15
16// 2. On product change (without unmounting)
17function onProductChange(newProductId) {
18  const container = document.querySelector('[data-ekoo]');
19  if (container) {
20    container.setAttribute('data-ekoo-product-id', newProductId);
21  }
22  window.ekooReload();
23}
24
25// 3. On component unmount
26function onProductPageUnmount() {
27  window.ekooUnload();
28}