Skip to main content

Translations and Customization

Wyng Experiences are customizable using the Customize and Translate text feature which can be found in the Settings tab of the Experience Builder.

Handling Locales

Wyng Experiences support multiple languages. By default, all experiences have a default locale. You can add new locales in the Customize and Translate settings panel.

A locale consists of a code and a name:

  • The code identifies the locale when setting the language of an experience. This cannot be edited.
  • The name labels the locale in the settings panel. You can edit this name.

You can change an experience's locale in 3 ways:

The locale can be changed by using the changeLocale SDK method. changeLocale accepts a single argument, the code of the locale you want to use. If no locale is passed, the default one will be used.

Arguments

ArgumentTypeDescription
localestring - optionalName of the locale to set.
// Set the locale to French.
window.wyng['_WYNG_ID_'].changeLocale('fr_FR');

//Set the locale to the default locale.
window.wyng['_WYNG_ID_'].changeLocale();
info

changeLocale will not re-run custom Javascript code from the experience-level Javascript or the HTML component, as it can have unexpected side effects. If you need to execute custom Javascript code when the locale changes, you can programatically reload the page and use the wyng_locale parameter:

    const urlSearchParams = new URLSearchParams(window.location.search);
urlSearchParams.set('wyng_locale', l.key);
window.location.replace(`${window.location.pathname}?${urlSearchParams.toString()}`);

getTranslation

Arguments

ArgumentTypeDescription
resourceNamestring - requiredName of the resource that needs to be returned.
componentIdstring - optionalComponent Id of the Question component.
localestring - optionalThe locale to be used for the translation, the active locale will be used otherwise.

To get the value for a specific resource, use the getTranslation method. getTranslation takes two arguments: the resourceName which can be found in the customization and translation tables in the customization panel, and an optional argument componentId when trying to target a specific component's resource.

Examples

Get the value for the resource named My Resource.

const resource = window.wyng['_WYNG_ID_'].getTranslation('My Resource');
console.log(resource);