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:

URL Parameter

The locale can be changed by adding a wyng_locale parameter to the URL of the Experience. The value of the wyng_locale parameter must be the code of the locale you want to use.

https://app.wyng.com/64555d89f4718e98342f26dd?wyng_locale=fr_FR

Embed Code Attribute

The locale can be changed by adding a data-wyng-locale attribute to the embed code of the Experience. The value of the data-wyng-locale attribute must be the code of the locale you want to use.

<div class="wyng-experience" data-wyng-locale="fr_FR" data-wyng-id="64555d89f4718e98342f26dd" data-wyng-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"></div>

changeLocale SDK Method

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

Argument	Type	Description
locale	string - optional	Name 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

Argument	Type	Description
resourceName	string - required	Name of the resource that needs to be returned.
componentId	string - optional	Component Id of the Question component.
locale	string - optional	The 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

Resource Name

Get the value for the resource named My Resource.

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

Specific Component

Get the value for the resource named Submit Form for the component with id sign_up_436366175206.

const resource = window.wyng['_WYNG_ID_'].getTranslation('Submit Form', 'sign_up_436366175206');
console.log(resource);

Specific Locale

Get the value for the resource named My Resource in Spanish.

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

Specific Component & Locale

Get the value for the resource named Submit Form for the component with id sign_up_436366175206 in Spanish.

const resource = window.wyng['_WYNG_ID_'].getTranslation('Submit Form', 'sign_up_436366175206', 'es_ES');
console.log(resource);