The Desktop.i18n module creates and maintains the localization bundles for lit-element based widgets (in case you considered Starter Widget as a base).

The localization module is built based on the i18next package and enables the widget developer to utilize the Agent Desktop internationalization mechanism and load additional localization bundles to it. For more information on i18next, refer the following resources:

• For Desktop.i18n instantiating object, see https://www.i18next.com/overview/api#instance-creation.

• For i18n instance back-end configuration, see https://github.com/i18next/i18next-http-backend.

• For i18n instance languageDetector configuration, see https://github.com/i18next/i18next-browser-languageDetector.

• For i18n instance init options, see https://www.i18next.com/overview/configuration-options.

Using this module implies that your widget has lit-element and lit-html libraries.

import {
    Desktop
} from "@wxcc-desktop/sdk";

...
// All CreateOptions for i18n are optional
type CreateOptions = {
    backend ? : Backend // import Backend from "i18next-http-backend";
    languageDetector ? : LanguageDetector // import LanguageDetector from "i18next-browser-languagedetector";
};

const i18n = Desktop.i18n.createInstance(createOptions ? : CreateOptions) // returns instance described in https://www.i18next.com/overview/api#instance-creation
const i18nMixin = Desktop.i18n.createMixin({
    i18n /*Injecting i18n service instance into lit-element mixin */
})

// FYI you can see default options like so
console.log(Desktop.i18n.DEFAULT_INIT_OPTIONS); // => i18n.init options that are using by Desktop by default

// To get started, Init i18n with options to be able call "t" function translations
if (!i18n.isInitialized) {
    // Here, you are adding (merging) your localization package with the Agent Desktop existing set of packages
    const initOptions = Desktop.i18n.getMergedInitOptions(Desktop.i18n.DEFAULT_INIT_OPTIONS || {}, {
        defaultNS: "my-ns", // "ns" here stands for the default JSON file name containing the localization
        ns: ["my-ns"],
        fallbackLng: "en",
        backend: {
            loadPath: "/.../path-to-locales/.../{{lng}}/{{ns}}.json"
        }
    });

    i18n.init(initOptions).catch(err => console.log(err));
}

When the service is initialized, create components with the mixing you created earlier:

import {
    customElement,
    LitElement
} from "lit-element";
import {
    html
} from "lit-html";

@customElement("my-awesome-component")
export class MyAwesomeComponent extends i18nMixin(LitElement) {
    render() {
        return html `
       <!-- i18nMixin will subscribe component tree updates on languages load & language change -->
       <!-- Component wrapped by i18nMixin can access t funcation via this.t(...) -->
       <p>${this.t("my-ns:key1")}</p>` <
            p > $ {
                this.t("my-ns:key2")
            } < /p>`
    }
}