Support multilingue

Ekoo prend en charge le contenu audio multilingue, vous permettant de servir de l'audio dans la bonne langue en fonction de la locale de votre visiteur.

Comment ça fonctionne

Lorsque vous définissez l'attribut data-ekoo-localesur un widget, Ekoo filtre le contenu audio pour ne montrer que les pistes taguées avec cette locale. Si aucune locale n'est spécifiée, le widget utilise la détection automatique basée sur les paramètres de langue du navigateur.

Attribut de locale

Définissez la locale directement sur l'élément widget :

Locale française

html

1<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>
2
3<ekoo-widget
4  data-ekoo="YOUR_WEBSITE_ID"
5  data-ekoo-product-id="YOUR_PRODUCT_ID"
6  data-ekoo-locale="fr"
7></ekoo-widget>

Locale anglaise

html

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

Valeurs de locale supportées

⚠️

Ekoo utilise ses propres codes de locale

Les codes locale Ekoo peuvent différer des codes standard ISO/BCP47. Par exemple : le chinois simplifié est cn (pas zh-Hans), le japonais est jp (pas ja), le coréen est kr (pas ko). Voir la section Mapping de locale ci-dessous si votre site utilise des codes standard.

Valeur	Langue
`fr`	Français
`en`	Anglais
`es`	Espagnol
`it`	Italien
`de`	Allemand
`da`	Danois
`ar`	Arabe
`cn`	Chinois (simplifié)
`tw`	Chinois (traditionnel)
`hk`	Chinois (Hong Kong)
`jp`	Japonais
`kr`	Coréen
`nl`	Néerlandais
`tr`	Turc
`pl`	Polonais
`pt`	Portugais
`lu`	Luxembourgeois
`be`	Belge (Français)
`ru`	Russe

Détection automatique

Si l'attribut data-ekoo-localeest omis, Ekoo vérifie navigator.language et trouve l'audio disponible le mieux adapté. Si aucune correspondance n'est trouvée, il revient à l'affichage de tous les audios disponibles pour le produit.

Détection automatique de la langue

html

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

Sans filtrage (toutes langues)

En omettant l'attribut data-ekoo-locale, tous les audios publiés du produit seront accessibles, indépendamment de leur locale :

Pas de filtrage de locale

html

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

Configuration JavaScript

La locale peut aussi être définie via window.ekooOptions. La locale se place dans le tableau widgets (et non en propriété de premier niveau) :

Locale via ekooOptions

javascript

1// window.ekooOptions sets the locale for programmatic widget creation
2window.ekooOptions = {
3  websiteId: "YOUR_WEBSITE_ID",
4  widgets: [
5    {
6      nodeId: "my-container",
7      productId: "my-product",
8      locale: "fr"
9    }
10  ]
11};

Définition dynamique de la locale

Vous pouvez changer la locale à l'exécution en mettant à jour l'attribut et en rechargeant le widget :

Changement dynamique de locale

javascript

1const widget = document.querySelector('[data-ekoo]');
2widget.setAttribute('data-ekoo-locale', getUserLocale());
3window.ekooReload();

Exemple React

Dans une application React, vous pouvez passer la locale en tant que prop et déclencher un rechargement quand elle change :

Intégration locale React

tsx

1import { useEffect } from 'react';
2
3interface EkooWidgetProps {
4  websiteId: string;
5  productId: string;
6  locale?: string;
7}
8
9export function EkooWidget({ websiteId, productId, locale }: EkooWidgetProps) {
10  useEffect(() => {
11    window.ekooReload();
12  }, [locale]);
13
14  return (
15    <ekoo-widget
16      data-ekoo={websiteId}
17      data-ekoo-product-id={productId}
18      data-ekoo-locale={locale}
19    ></ekoo-widget>
20  );
21}

Mapping de locale

Si votre site utilise des codes de langue standard BCP47 ou ISO (ex : zh-Hans, ja, ko), vous aurez peut-être besoin d'un script de mapping pour les convertir en codes locale Ekoo. Ajoutez ce script avant le script du widget Ekoo :

Script de mapping de locale

html

1<script>
2// Locale mapping: your site codes → Ekoo codes
3// Add this BEFORE the Ekoo widget script
4(function() {
5  var mapping = {
6    // BCP47 / ISO  →  Ekoo code
7    'zh-hans': 'cn',  // Chinese Simplified → cn
8    'zh-hant': 'tw',  // Chinese Traditional → tw
9    'ko':      'kr',  // Korean → kr
10    'ja':      'jp',  // Japanese → jp
11  };
12
13  var ekooLocales = [
14    'fr', 'en', 'es', 'it', 'de', 'ar',
15    'cn', 'tw', 'hk', 'jp', 'kr',
16    'nl', 'tr', 'pl', 'pt', 'lu', 'be', 'ru'
17  ];
18
19  window.ekooGetLocale = function() {
20    var lang = (document.documentElement.getAttribute('lang') || '').trim().toLowerCase();
21    if (!lang) return 'fr'; // default fallback
22
23    // Check full tag first (e.g., zh-hans)
24    if (mapping[lang]) return mapping[lang];
25
26    // Check primary subtag (e.g., fr from fr-FR)
27    var primary = lang.split('-')[0];
28    if (mapping[primary]) return mapping[primary];
29
30    // Direct match against Ekoo locales
31    if (ekooLocales.indexOf(primary) !== -1) return primary;
32
33    return 'fr'; // fallback
34  };
35})();
36</script>

Puis utilisez la fonction utilitaire pour définir la locale dynamiquement :

Utilisation du mapping

html

1<div
2  data-ekoo="YOUR_WEBSITE_ID"
3  data-ekoo-product-id="YOUR_PRODUCT_ID"
4></div>
5
6<script>
7  // Après le chargement du DOM, définir la locale à partir du mapping
8  var widget = document.querySelector('[data-ekoo]');
9  if (widget && window.ekooGetLocale) {
10    widget.setAttribute('data-ekoo-locale', window.ekooGetLocale());
11  }
12</script>

💡

Taguez votre contenu audio

Assurez-vous que votre contenu audio dans le backoffice est tagué avec la bonne locale. Si vous oubliez de taguer l'audio, il n'apparaîtra pas quand un filtre de locale est actif.

ℹ️

La langue de l'UI n'est pas affectée

L'attribut locale filtre seulement quel audio est affiché — il ne traduit pas les éléments UI du widget.