Internationalization
The widget supports 9 locales out of the box. The locale is selected with data-locale (auto-init) or config.locale.
Supported locales
| Code | Language | Loading |
|---|---|---|
es | Spanish | eager (in the main bundle) |
en | English | eager |
fr | French | lazy |
de | German | lazy |
it | Italian | lazy |
pt | Portuguese | lazy |
ca | Catalan | lazy |
eu | Basque | lazy |
gl | Galician | lazy |
es and en ship in the main bundle (widget/src/i18n/index.ts); the others are dynamically imported the first time they are used, keeping the initial bundle under 65 KB gzip.
Detection and fallback
- The widget reads
config.locale/data-locale. - If the value is not in
SUPPORTED_LOCALES, it emits aconsole.warnand falls back toes. - If a specific key is missing from the active locale bundle, the widget emits
console.warnand returns the key itself (there is no automatic English fallback). The official translations (widget/src/i18n/<locale>.ts) cover the full key set, so this only affects you if you provide a malformed partialtranslationsoverride.
Example
<script
src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
data-token="WIDGET_TOKEN"
data-container="#neuroon-search"
data-locale="ca"
async
></script>
window.NeuroonWidget.init({
container: '#neuroon-search',
token: 'WIDGET_TOKEN',
locale: 'eu',
})
Custom translations
You can override any subset of keys via config.translations. They are deep-merged on top of the active locale bundle:
window.NeuroonWidget.init({
container: '#neuroon-search',
token: 'WIDGET_TOKEN',
locale: 'es',
translations: {
search: {
placeholder: 'Buscar en nuestra ferretería…',
voiceButton: 'Buscar dictando',
},
results: {
empty: 'No tenemos eso. ¿Quieres que te avisemos cuando llegue?',
},
},
})
Switch locale at runtime
The current JavaScript API does not expose setLocale(). To change locale, destroy the instance and re-mount it:
const w = window.NeuroonWidget.getInstance('#neuroon-search')
w?.destroy()
window.NeuroonWidget.init({
container: '#neuroon-search',
token: 'WIDGET_TOKEN',
locale: 'fr',
})
Further reading
- Configuration —
translationsandlocale. - Accessibility — localized screen reader announcements.
- Widget events — lifecycle events.