# 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](/guides/orchestration/journeys/login_form) and [Collect information](/guides/orchestration/journeys/get_info_from_client), the text fields can be translated into multiple languages to make your applications more accessible and user-friendly.

Note
Applies only to client SDK journeys, mobile approve journeys, and SSO journeys.

## 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.

Note
Mosaic journeys don't handle localization of dynamic content automatically. Make sure to provide translation as described [here](#step-1-add-language-support).

## 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](#localize-fields) containing expressions and interpolated strings, such as a form title or an email subject
- [Schemas](#localize-schemas), such as those created using a [form builder](/guides/orchestration/getting-started/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


Note
If using Mosaic-hosted SSO pages, to allow localization make sure to enable all the required languages in the SSO Experience Management (see details [here](/guides/user/sso_orchestration/sso_config_service#sso-login-page-hosting-branding-and-localization)).

### 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 the form title](/assets/localization_form_title.efc78d14ff9066760e7aa75b3bd661972b76f2fa6b4ced5163be753f3e1b5310.9ad24d97.gif)

### 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.


Note
Don't not update the field name when localizing the schema since it is considered an internal identifier and has to stay same across all languages.

1. 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.


![Localize the form](/assets/localization_form_builder.cc72ce3837b28f178c768f04d3e7bf62b8d7c255da985b4ec82fca7cb4e61f99.9ad24d97.gif)

## Step 2: Pass locale to SDK

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


```js
  // If SDK was loaded via script tag, invoke functions inside 'window.tsPlatform'
  import { initialize } from "@transmitsecurity/platform-web-sdk";

  // If SDK was loaded via script tag, invoke functions inside 'window.tsPlatform'
  initialize({
    clientId: "my-client-id", // Client ID from app settings in the Admin Portal
    ido: {
      serverPath: "https://api.transmitsecurity.io/ido", // Required: Set serverPath based on your region or custom domain
      locale: navigator.language // Gets locale automatically from the browser
    }
  });
```


```kotlin
  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 [Collect information](/guides/orchestration/journeys/get_info_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.

![](/assets/localization_ex1.413013cfcdc7ae70f95efcf965a9df73b92bed473a56a5c89c855325a49bd3d8.9ad24d97.png)