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. L'attribut a trois comportements : omis ou vide, tous les audios publiés sont servis ; valeur auto, la langue du navigateur est utilisée ; tag inconnu d'Ekoo, aucun audio n'est servi.

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
`de`	Allemand
`da`	Danois
`sv`	Suédois
`fi`	Finnois
`no`	Norvégien
`it`	Italien
`nl`	Néerlandais
`pt`	Portugais
`ar`	Arabe
`uk`	UK
`bg`	BG
`ru`	Russe
`pl`	Polonais
`tr`	Turc
`zh-Hans`	Chinois (simplifié)
`zh-Hant`	Chinois (traditionnel)
`yue`	Chinois (Hong Kong)
`ja`	Japonais
`ko`	Coréen

Détection automatique

Avec data-ekoo-locale="auto", le widget envoie le tag complet de navigator.language, par exemple zh-Hant-HK, et Ekoo le résout un sous-tag à la fois. Un tag qu'Ekoo ne peut pas résoudre ne sert aucun audio plutôt que des audios dans une autre langue. Omettre l'attribut n'active pas la détection : cela désactive le filtrage.

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's language tag → Ekoo code
3// Add this BEFORE the Ekoo widget script
4(function() {
5  var lookup = {
6    'fr': 'fr',
7    'fr': 'fr',
8    'en': 'en',
9    'en': 'en',
10    'es': 'es',
11    'es': 'es',
12    'de': 'de',
13    'de': 'de',
14    'da': 'da',
15    'da': 'da',
16    'dk': 'da',
17    'sv': 'sv',
18    'sv': 'sv',
19    'fi': 'fi',
20    'fi': 'fi',
21    'no': 'no',
22    'no': 'no',
23    'nb': 'no',
24    'nn': 'no',
25    'it': 'it',
26    'it': 'it',
27    'nl': 'nl',
28    'nl': 'nl',
29    'vl': 'nl',
30    'pt': 'pt',
31    'pt': 'pt',
32    'ar': 'ar',
33    'ar': 'ar',
34    'uk': 'uk',
35    'uk': 'uk',
36    'bg': 'bg',
37    'bg': 'bg',
38    'ru': 'ru',
39    'ru': 'ru',
40    'pl': 'pl',
41    'pl': 'pl',
42    'tr': 'tr',
43    'tr': 'tr',
44    'cn': 'zh-Hans',
45    'zh-hans': 'zh-Hans',
46    'cn': 'zh-Hans',
47    'zh': 'zh-Hans',
48    'zh-cn': 'zh-Hans',
49    'tw': 'zh-Hant',
50    'zh-hant': 'zh-Hant',
51    'tw': 'zh-Hant',
52    'zh-tw': 'zh-Hant',
53    'zh-hk': 'zh-Hant',
54    'zh-mo': 'zh-Hant',
55    'hk': 'yue',
56    'yue': 'yue',
57    'hk': 'yue',
58    'yue-hk': 'yue',
59    'jp': 'ja',
60    'ja': 'ja',
61    'jp': 'ja',
62    'kr': 'ko',
63    'ko': 'ko',
64    'kr': 'ko'
65  };
66
67  window.ekooGetLocale = function() {
68    var lang = (document.documentElement.getAttribute('lang') || '').trim().toLowerCase();
69
70    // No lang attribute: no locale filter, the widget serves every audio.
71    if (!lang) return '';
72
73    // Drop one subtag at a time from the right, so zh-Hant-HK is tried before
74    // zh-Hant and zh, and the script subtag is never skipped over.
75    var subtags = lang.split(/[-_]/);
76    for (var n = subtags.length; n >= 1; n--) {
77      var candidate = subtags.slice(0, n).join('-');
78      if (lookup[candidate]) return lookup[candidate];
79    }
80
81    // Unknown language: pass the tag through unchanged. The server answers with
82    // an empty catalogue, which is the honest result. Never substitute another
83    // language here.
84    return lang;
85  };
86})();
87</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.