Localization: changing languages in WebViewer UI

WebViewer leverages the i18next library for languages and internationalization support.

Default languages

Out of the box, WebViewer supports the following languages:

• English (en)
• French (fr)
• German (de)
• Dutch (nl)
• Russian (ru)
• Chinese (Simplified) (zh_cn)

These will come with WebViewer automatically when you download the package. To always find the available languages supported by WebViewer, you can visit the GitHub project here.

Adding languages

It is possible to add additional languages to your WebViewer in a few easy steps. Most of the on-screen text values are stored as JSON language files which you can edit in any text editor. Follow the steps below to start:

1. Begin by creating a copy of any of the language files. They can be found under the lib/ui/build/i18n directory. WebViewer will also use the files from this directory.
2. Rename the new file prefixed with translation- followed by the desired language code (ex. translation-es.json). The language code can be anything and does not have to match an ISO language code.
3. Open the new file and edit the string values for your new language.
4. Save the file and try out the new language in WebViewer!

{
  "action": {
    "apply": "Apply",
    "applyAll": "Apply all",
    "cancel": "Cancel",
    "clear": "Clear",
    "close": "Close",
...

Changing languages

To change languages in WebViewer, simply call setLanguage on the instance while passing in the language code defined in the file name. This is without the translation- prefix.

WebViewer(...)
  .then(instance => {
    instance.setLanguage('es');
  });

WebViewer(...)
  .then(instance => {
    instance.UI.setLanguage('es');
  });