Personnalisation CSS du Widget Standalone

Le widget autonome (widget-4.0.0-standalone.js) est un Web Component encapsulé dans un Shadow DOM (mode: 'open'). Cette isolation protège le lecteur des styles de votre boutique et garantit qu'aucun style Ekoo ne déborde sur votre site.

ℹ️

Où appliquer votre CSS personnalisé ?

Ajoutez vos styles dans le champ « CSS personnalisé » du Backoffice Ekoo (Branding > Widgets > Standalone > Options avancées).

Le code est injecté directement dans la balise <style> à l'intérieur du Shadow DOM : vous avez un accès direct à toutes les classes internes du widget sans barrière d'encapsulation.

Anatomie visuelle & Sélecteurs CSS

Repérez chaque zone stylisable du widget. Cliquez sur un badge pour copier son sélecteur CSS, ou sur +CSS pour copier un extrait de règle prêt à l'emploi.

Anatomie visuelle & Sélecteurs CSSÉtat replié

Bac à sable interactif (Live CSS Playground)

Expérimentez vos styles en direct sur une instance isolée du widget 4.0.0. Vous pouvez partir du thème standard, tester un exemple (Minimaliste, Terracotta), basculer entre la vue produit et le widget seul, ajuster vos règles CSS et copier le code final.

Recettes CSS courantes

Sélectionnez une recette ci-dessous pour copier le snippet adapté à votre besoin :

Le script applique dynamiquement des classes d'état sur l'élément Custom Element <ekoo-widget>. Vous pouvez les cibler dans votre CSS via :host(...) :

:host(.playing) — Audio en cours de lecture
:host(.paused) — Lecture en pause
:host(.ekoo-touch-preview) — Touch sur mobile
:host(.ekoo-transcript-open) — Transcription ouverte
:host(:hover) / :host(:focus-within) — Déploiement au survol ou focus

Ciblage des états d'interaction

css

1/* Agrandissement subtil du bouton pendant la lecture */
2:host(.playing) .ekoo-widget-picture {
3  transform: scale(1.05);
4  transition: transform 0.2s ease;
5}
6
7/* Légère atténuation en pause */
8:host(.paused) .ekoo-widget-picture {
9  opacity: 0.95;
10}
11
12/* Changement de curseur au survol */
13:host(:hover) .ekoo-widget-container-picture-button {
14  cursor: pointer;
15}
16
17/* Accentuation de l'icône quand la modale de transcription est ouverte */
18:host(.ekoo-transcript-open) .ekoo-icon-book-open {
19  color: var(--my-brand-accent, #8b1538);
20}
21
22/* Variante inversée (ouverture vers la gauche) */
23.ekoo-standalone-container.ekoo-reverse {
24  /* Ajustements spécifiques pour alignement à droite */
25}

💡

Astuce : masquer le volet au repos

Au repos, le volet .ekoo-widget-container-player a une largeur de 0px. Si vous lui ajoutez des bordures ou des ombres, masquez-les au repos avec :

:host(:not(:hover):not(.playing):not(.paused):not(.ekoo-transcript-open):not(.ekoo-touch-preview):not(:focus-within)) .ekoo-widget-container-player { opacity: 0 !important; border: none !important; box-shadow: none !important; }

Bonnes pratiques

Utilisez !important si nécessaire : Le widget calcule certains styles par défaut (largeurs dynamiques, thèmes initiaux). Ajouter !important garantit que vos couleurs et arrondis s'appliquent en priorité.
Polices personnalisées : Vos polices définies par font-family doivent être chargées dans le <head> de votre site web.
Accessibilité (WCAG) : Conservez un contraste d'au moins 4.5:1 entre texte et arrière-plan, et préservez les styles de focus clavier (:focus-visible).
Variantes inversées : Si votre widget s'ouvre vers la gauche (data-ekoo-direction="reverse"), ciblez .ekoo-standalone-container.ekoo-reverse.

ℹ️

Besoin d'une configuration par gabarit ?

Vous pouvez créer plusieurs configurations dans le Backoffice et les affecter à des pages spécifiques avec l'attribut data-ekoo-variant. Consultez la page Widget Standalone pour plus de détails.