Skip to contentSkip to navigationSkip to topbar
On this page

Localize a plugin (Public Beta)


(new)

Public Beta notice

Localization is currently available as a Public Beta product and the information contained in this document is subject to change. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Public Beta products are not covered by a SLA.


Overview

overview page anchor

Use this guide to localize your plugins so they display in the same language as the native Flex UI when a user changes their language setting.

To render plugin text in a different language, follow these steps:

  1. Add a file with localized static strings for each language that's available.
  2. In the same file, add localized dynamic strings.
  3. In your plugin file, add code to read Flex's current locale so the plugin can determine which language to use.
  4. Update your plugin components to use the localized strings.

Plugin directory structure

plugin-directory-structure page anchor

This guide assumes your plugin uses a file structure similar to this:

  • PluginName
    • src
      • components: directory that contains your plugin components.
      • locales: directory that contains your localization files.
        • es-MX.js: file that contains the localized strings for Español (México).
        • en-US.js: file that contains the localized strings for English (US).
        • pt-BR.js: file that contains the localized strings for Português (Brasil).
      • index.ts
      • PluginName.ts: file that contains the plugin code, including the code to read Flex's locale setting.

Step 1: Add your language files and localized static strings

step-1-add-your-language-files-and-localized-static-strings page anchor
  1. In your locales directory, add a file for each supported language.
  2. In each file, define your custom strings and their translations.

The code samples below show an example string for Español (México) and for English (US), respectively.

es-MX.js

es-mxjs page anchor
1
export const mexicanSpanishStrings = {
2
WelcomeButton: "Bienvenido"
3
};
1
export const usEnglishStrings = {
2
WelcomeButton: "Welcome"
3
};

Step 2: Add localized dynamic strings

step-2-add-localized-dynamic-strings page anchor

To localize dynamic strings, such as agent status, add strings and their translations to the localization file for each language using the following format. You can localize both default and custom strings.

1
if (manager.localization.localeTag === "es-MX") {
2
manager.strings = {
3
...manager.strings,
4
tr_activity_Available: "Disponible",
5
tr_activity_Offline: "Desconectado",
6
"tr_activity_On vacation": "De vacaciones"
7
};
8
}
1
if (manager.localization.localeTag === "pt-BR") {
2
manager.strings = {
3
...manager.strings,
4
tr_activity_Available: "Disponível",
5
tr_activity_Offline: "Desconectado",
6
"tr_activity_On vacation": "De férias"
7
};
8
}

Step 3: Read Flex's current locale

step-3-read-flexs-current-locale page anchor

Your plugin can read Flex's current locale setting from the manager object at manager.localization.localeTag. The localeTag property defines the Internet Engineering Task Force (IETF) language tag of the current UI locale. For example, en-US.

To read Flex's current locale:

  1. In your plugin file, add code to read the locale and apply the defined strings based on the localeTag value.
1
// Read Flex's locale setting
2
const localeTag = manager.localization.localeTag; // e.g. "en-US"
3
// Conditionally apply the relevant strings
4
switch (localeTag) {
5
case "en-US":
6
manager.strings = {...usEnglishStrings, ...manager.strings }
7
break;
8
case "es-MX":
9
manager.strings = {...mexicanSpanishStrings, ...manager.strings }
10
break;
11
}
  1. (Optional) If you want to make other locale-related customizations, see the Flex UI API reference(link takes you to an external page) for more information about these available properties:
    • availableLocales: The list of locales the user sees when setting their language. Currently, this list is read-only.
    • setLocalePreference: A method to save the user's locale preference without using the native language selector. You can use this for implementing a custom locale selection widget.

Step 4: Localize your plugin components

step-4-localize-your-plugin-components page anchor

In the definition for each component, add the custom string label you defined to localize that component. For example, step 1 shows how to define a string for WelcomeButton, and the code sample below shows how to add that string to the WelcomeButton component.

1
// Use your localized strings in a component
2
const WelcomeButton = ({strings}) => (<Button>{strings.WelcomeButton}</Button>));
3
...
4
<WelcomeButton strings={customStrings}/>

This lets Flex show the locale-specific string based on the current UI locale.