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
- Embed Code Attribute
- changeLocale SDK Method
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
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>
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();
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
- Specific Component
- Specific Locale
- Specific Component & Locale
Get the value for the resource named My Resource
.
const resource = window.wyng['_WYNG_ID_'].getTranslation('My Resource');
console.log(resource);
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);
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);
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);