Localize journeys

Mosaic enables you to enhance user experience by adapting journeys to different languages and regional preferences. In the client-facing journey steps, like Login Form and Get Information from Client, the text fields can be translated into multiple languages to make your applications more accessible and user-friendly.

How localization works

Locale derives from the user's browser or mobile device settings. Locale is then provided to the Orchestration SDK upon its initialization. When running a journey, Mosaic dynamically resolves expressions and interpolated strings into a requested language if it's enabled; otherwise default language will be used (English). If using Mosaic-hosted UI (such as Mosaic-hosted SSO pages), static content also gets translated automatically by Mosaic.

Supported languages

In journeys, you can add support for the following languages:

• English (en)
• Spanish (es)
• Portuguese (pt)
• French (fr)
• Janapanese (jp)
• French - Canada (fr-CA)
• Chinese - Traditional (zh-Hant)
• Chinese - Simplified (zh-CN)

Step 1: Add language support

In the journey editor, you can add localization for content provided dynamically in:

• Fields containing expressions and interpolated strings, such as a form title or an email subject
• Schemas , such as those created using a form builder

Static content, such as button labels, can also be localized:

• If using Mosaic-hosted UI, static content gets localized automatically
• In applications leveraging your custom UI, you'll need to implement localization in your project

Localize fields

Provide multi-language translation for each field that needs it, one by one:

1. In a journey step settings, locate a field containing an expression or an interpolated string (denoted with ) and select Edit .
2. Select the language drop-down ( ) and specify the language you want to provide translation to.
3. Update the field value. Once you provide the localized value for the field, the green icon will appear in the drop-down next to the language name ( ) indicating that this language is supported.
4. If necessary, provide translation to other languages.

Localize schemas

Provide multi-language translation for schemas:

1. In a journey step settings, locate a schema you want to localize.
2. When editing a form for a schema, select the language drop-down ( ) and specify the language you want to provide translation to. This switches the language for the entire form.
3. Specify a field on the left and provide translation for its label and default value on the right.

4. Once you provide the localized values, the green icon will appear in the drop-down next to the language name ( ) indicating that this language is supported. If necessary, provide translation to other languages.

Step 2: Pass locale to SDK

During the SDK initialization, the client can pass locale as an optional parameter to enforce journey localization.

await window.tsPlatform.initialize({
  clientId: 'CLIENT_ID',  // Client ID from app settings in the Admin Portal
  ido: {
    serverPath: 'https://api.transmitsecurity.io/ido', // Base URL, default is for US region
	locale: navigator.language // Gets locale from the browser
    }
});

TSIdo.initialize(clientId: "[CLIENT_ID]",
                 options: .init(serverPath: "[BASE_URL]",
                                locale: Locale.current.identifier))

val locale = getCurrentLocale().toString()
TSIdo.initializeSDK(context, "[CLIENT_ID]", TSIdoInitOptions("[BASE_URL]", "[POLLING_TIMEOUT]", "[RESOURCE_URI]", locale))

...

fun getCurrentLocale(): Locale {
        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            // Get the primary locale from the current LocaleList
            LocaleList.getDefault().get(0)
        } else {
            // Fallback for older devices
            Locale.getDefault()
        }
    }

Example

Imagine a user onboarding form (see Get information from client step). The user is requested to provide their personal details such as their full name, email, and phone number. To provide better user experience, you can localize both the introductory text (title and description) and the hints on the input fields.