Flow languages

It is possible to upload or manually define a JSON file that manages language localization on the flow. The JSON is structured by two-digit language codes (e.g. en, it), each containing a set of key-value pairs. These localized values can then be referenced inside the flow by using variables in the format $t(variableName)t$, allowing dynamic language handling during execution.

Add flow languages

1. Click the settings button of the flow.

2. Select the dedicated button to upload a new language.

3. The localization JSON can be added to the flow either by importing it from a JSON file by clicking on the dedicated upload button or by manually writing it in the text area. You can find an example JSON below.

4. Select, in the dedicated area, the fallback language from those available in the JSON. This fallback language will be used whenever the user's country language is not present in the JSON.

5. Click Save.

Manage flow languages

In the pop-up for configuring the language section, the following options are also available:

• Upload a language by importing it from a JSON file.

• Download the current language configuration as a JSON file, allowing you to reuse it or upload it on other flows.

• Delete the uploaded language, removing it from the flow.

• Expand the language editor to full window for easier editing and readability.

• Change theme used to display the JSON in the text area with different syntax highlighting and colors with several predefined themes.

Example of localization JSON

{
  "en": {
    "words": {
      "credentials_form_title": "Please enter username and password to log in",
      "wrong_credentials": "Wrong credentials"
    }
  },
  "it": {
    "words": {
      "credentials_form_title": "Inserisci username e password per accedere",
      "wrong_credentials": "Credenziali errate"
    }
  }
}

Using localized values in flows

These values can be referenced within the flow using variables, for example:

$t(words.credentials_form_title)t$

During flow execution, IO will automatically replace this placeholder with the appropriate translated text based on the user's language preference.

Language detection

IO determines which language to use based on:

1. User preference: If explicitly set by the user

2. Browser locale: Detected from the user's browser settings

3. Fallback language: The default language configured in the flow

Best practices

• Always provide a fallback language for cases where the user's language is not available

• Use descriptive keys in your JSON structure (e.g., form.login.title instead of t1)

• Organize translations hierarchically for better maintainability

• Test flows with different language settings to ensure proper localization

• Keep translations consistent across flows for a uniform user experience

Next steps

• Design flows

• Edit flows

• Flow versioning