HTML / Vanilla JS Integration

1<!-- Widget container -->
2<ekoo-widget
3  data-ekoo="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
4  data-ekoo-product-id="my-product-123"
5  data-ekoo-locale="fr"
6></ekoo-widget>
7
8<!-- Ekoo script — load once per page -->
9<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

1<!-- Container — the ID will be injected by the script below -->
2<div id="ekoo-container"
3  data-ekoo="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
4  data-ekoo-locale="fr"
5></div>
6
7<script>
8  // Retrieve the product ID from the URL, e.g.: /products/my-product-123
9  function getProductId() {
10    const parts = window.location.pathname.split('/');
11    return parts[parts.length - 1];
12  }
13
14  const container = document.getElementById('ekoo-container');
15  if (container) {
16    container.setAttribute('data-ekoo-product-id', getProductId());
17  }
18</script>
19
20<!-- Ekoo script — AFTER the product ID injection -->
21<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

1<script>
2  // Declare the function BEFORE the Ekoo script
3  // The callback receives a single argument: the full stats body object
4  function onEkooEvent(data) {
5    console.log('Ekoo event:', data.stats.type, data);
6    // E.g.: send to Google Analytics, dataLayer, etc.
7  }
8</script>
9
10<ekoo-widget
11  data-ekoo="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
12  data-ekoo-on-event="onEkooEvent"
13  data-ekoo-product-id="my-product-123"
14  data-ekoo-locale="fr"
15></ekoo-widget>
16
17<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

1<script>
2  // Register listeners BEFORE loading the Ekoo widget script.
3  document.addEventListener('ekoovisible', (event) => {
4    const { productId, reviewId, review } = event.detail;
5    console.log('Selected audio:', { productId, reviewId, review });
6  });
7
8  document.addEventListener('ekoohidden', ({ detail }) => {
9    console.warn('Widget hidden:', detail.reason);
10  });
11</script>