Getting Started

Everything you need to integrate Ekoo audio widgets into your website.

Prerequisites

Before you begin, make sure you have the following:

  • An Ekoo account — sign up or log in at the Ekoo backoffice.
  • A website ID — found in your Ekoo backoffice under your website settings.
  • Published audio content linked to at least one product in your catalog.

Integration Overview

Step 1 — Include the Ekoo Script

Add the following script tag to your HTML. Place it in the <head> section or just before the closing <body> tag. The defer attribute ensures the script loads without blocking page rendering.

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

Step 2 — Add Widget Elements

Place an <ekoo-widget> element wherever you want an audio player to appear. Set data-ekoo="YOUR_WEBSITE_ID" to your Ekoo website identifier and data-ekoo-product-id to the product you want to display audio for.

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

Step 3 — Publish Audio Content

In the Ekoo backoffice, create audio content and link it to your products. Once the audio is published, the widget will automatically display it on your page — no additional code changes required.

Next Steps

Ready to dive in? Follow our step-by-step quickstart guide to get an audio widget running on your page in under 5 minutes.

Go to Quickstart →
💡

Testing in Development

You can test widgets in development using your real website ID — widgets only render when published audio content exists for the given product.
ℹ️

Remote configuration

The Ekoo widget automatically fetches its full visual configuration from the Ekoo backoffice based on your websiteId and productId. This includes: theme, colors, CTA texts, animation settings, position, and custom CSS. You don't need to set appearance attributes in your HTML — the backoffice configuration is applied automatically. Data attributes are only needed to override the backoffice configuration for a specific widget instance.
Overview — Documentation — Ekoo