Accessibird shows the widget's menus in the same language as the page it runs on. You don't need to set anything up.
How the language is chosen
The widget uses the first match in this list:
- The language the visitor picked in the widget (remembered per website, on that device).
data-langon the embed code, or?lang=in the loader address. If both are set,data-langwins.- The page's own language (
<html lang>). - The page's
content-languageorog:localemeta tag. - The visitor's browser languages.
- English.
The default language in your dashboard is only used when the page and the browser give no language.
Set a fixed language
<script src="https://widget.accessibird.com/loader.js" data-website-id="YOUR_WEBSITE_ID" data-lang="nl" async></script>Or put the language in the address:
<script src="https://widget.accessibird.com/loader.js?lang=zh-tw" data-website-id="YOUR_WEBSITE_ID" async></script>data-lang="auto" means the same as leaving it out.
Good to know
- Live changes: if your website switches language without reloading the page, for example with a language toggle, the widget switches with it, unless the visitor picked a language themselves.
- Right to left: languages such as Arabic and Hebrew show the widget right to left.
- Tip: make sure your page has the right language set, for example
<html lang="nl">. Most website builders do this for you. - Returning visitors: after this update, a language a visitor picked earlier is forgotten once. They can pick it again in the widget.
For developers
Accessibird.setLanguage('nl'); // set the language
Accessibird.getLanguage(); // read the current language
Accessibird.resetLanguage(); // go back to automatic
window.addEventListener('accessibird:languagechange', e => console.log(e.detail)); // { lang, source }
// Before the widget has loaded:
window.Accessibird = window.Accessibird || { q: [] };
Accessibird.q.push(['setLanguage', 'nl']);