Localization

Nitro's built-in language support allows blocks, web components, and APIs to work in collaboration with user-facing content translations to achieve a fully translated program. Show me a diagram of the localization processClosed

Localization Process Diagram

To translate your program, you will need to:

  1. Enable localization

  2. Translate your program content such as missions, levels, and recognitions.

  3. Translate your front-end UI. This front-end may be blocks, web components, or a custom program created with APIs.

Note: Bunchball Go can be used globally but does not support localization in the front-end UI.

Enable Localization and Translate Program Content

Step 1: Enable localization in Nitro Studio. Show detailsClosed

  1. Open Nitro Studio > Configuration > Localization.
  2. In the Enable Locales list, select the locales your site is using.

 

Step 2: Translate your mission information, levels, exchanges, and other program content. Show detailsClosed

An Excel or XML translation file is used to localize program content. Each locale you choose to support has its own translation file which is managed in Nitro Studio. Translation text within the Excel or XML file must be in Ascii format.

  1. Open Nitro Studio > Configuration > Localization.

  2. In the Enable Locales list, select all the locales in your program.

  3. Under Translate Content:

    1. Select Excel or XML as your file type.

    2. In the Download Translation File list, select the language file you want to download.

    3. Click Download.

  1. Update the value field for every value you want to localize and save the file. Leaderboard translations only apply to Impact programs. You must translate leaderboard names separately when using web components.

  2. When you've finished translating your content, open the Localization page and click Upload Translation File.

  1. Repeat steps 3-5 for each language your program supports.

  2. As your program grows, you will need to repeat this process to translate the new content.

Note: If you upload a translation file and then download via the same browser, the file may not contain all translations until you refresh the cache.

 

Translate User Facing Elements

Nitro Impact and Blocks

Complete the following to translate your program. Note: Impact can be used globally but does not support localization of quizzes.

Step 1: Translate blocks. Show detailsClosed

Each block requires its own translation file which is managed in Nitro Studio. JSON is the only supported file type for blocks.

  1. Open Integrate > Blocks > click the block you want to localize.

  2. Click the Languages drawer and then click Download.

  3. Update the localization file to include all language codes and translations for each language in your program.

  4. Upload the updated localization file to the Languages drawer and click Save.

    The languages in your file will display in the drawer. Click a language in the list to preview the translations.

  5. Add the "language" attribute and the language code to the block embed code in the src URL.

Show me an example embed codeClosed

 

 

Web Components and Custom Programs

Nitro supports seven default languages for web components: English, French, Spanish, Italian, German, Mandarin (Simple), and Hindi. A translation schema in each default language is maintained by Nitro. Depending on your program configuration, you can reference the default language translation schemas to translate your program. However, any text overrides, quizzes, leaderboard names, and blocks will require additional translation. When translating into a non-default language, you must create your own translation schema(s).

Complete the following steps as needed to translate your program. Skip any steps that do not apply to your program configuration.

Step 1: Translate web components into a default language (English, French, Spanish, Italian, German, and Mandarin (Simple), and Hindi). Show detailsClosed

When translating your program into a default language, a Nitro translation schema exists for the text strings used in web components. You don't need to create your own translation schema or modify the default schema unless you have single text overrides or quizzes.

  1. Use the Localization view in Nitro Studio to find your language code. Use a 2-digit code to translate into the base language and a 4-digit code to translate into the locale.

  2. If your program uses the Missions web component, check the embed code for the "eligible-missions-tab-name" and "completed-missions-tab-name" parameters and remove them.

  3. Add the "data-language" attribute and the language code to the web component embed code.

Show me an example embed codeClosed

 

Step 2: Translate web components into a non-default language (any language other than English, French, Spanish, Italian, German, and Mandarin (Simple), and Hindi). Show detailsClosed

When translating your program into a non-default language, you must create a translation schema for all default text strings that are used in web components. You will need to translate every string in the translation key.

  1. Create a translation schema.

  2. Add the translation schema to the page containing your web component embed code.

  3. Use the Localization view in Nitro Studio to find your language code. Use a 2-digit code to translate into the base language and a 4-digit code to translate into the locale.

  4. Add the "data-translation-reference" attribute and the language code to the web component embed code to reference your translation schema.

Show me an example scriptClosed

 

Step 3: Translate web component single text string overrides. Show detailsClosed

If you customized text within a web component, such as the title, subtitle, or button name, you must translate that custom text into all your supported languages. You can use a single text override or translation schema to change the default text to your custom value.

  1. In your web component embed code, remove the value for parameters you want to override with a custom value. For example, you changed the title of the Events web component from Recent Achievements to Community Achievements. The title parameter for the Events web component is "title": "Recent Achievements". You would change that parameter to "title": "".

  2. If you're only translating into one language, add your translated text directly to the parameter in the embed code.

  3. If you're translating into multiple languages, add your custom values to your translation schema. Add a custom override for each language your program supports.

  4. Add the "data-translation-reference" attribute and the language code to the web component embed code to reference your translation schema.

Show me an example scriptClosed This example shows how you can use a translation schema to override the default (Spanish) translation within a Profile web component to use a different title. Rather than including a reference in the language file, you can specify a single key value pair that will be merged in to override the default.

 

Step 4: Translate custom web components created using APIs. Show detailsClosed

  1. Use the Localization view in Nitro Studio to find your language code. Use a 2-digit code to translate into the base language and a 4-digit code to translate into the locale.

  2. Add the "Accept-Language" header and language code to all your API calls.

The header is required on every API call as each is a single transaction and there is no session data.

 

Step 5: Translate quizzes. Show detailsClosed

Quiz content (quiz name, questions, and answers) is translated as flat text.

Translation overrides are EXACT matches on the quiz content including the quiz title and description, question text, and answer text. Matches are case-sensitive.

  1. Create a translation schema containing your quizzes, their questions, and their answers (or add quizzes to your existing translation schema). No quiz, question, or answer IDs are needed.

  2. If you're translating into multiple languages, add a custom override for each language your program supports.

  3. Add the "data-translation-reference" attribute to the web component embed code to reference your translation schema.

Show me an example scriptClosed

 

Step 6: Translate leaderboard names. Show detailsClosed

If your program does not use the Leaders web component to show multiple leaderboards, you do not need to translate leaderboard names.

  1. In your Leaders web component embed code, get the value in the "data-leaderboard-configs" parameter.

  2. Translate the "name" parameters within the string into the desired language(s).

  3. In your translation schema, add the full string, with translations, within the "leaderboardConfigs" text key.

Show me an example scriptClosed

 

Translation Schema

A translation schema is used to extend language support to additional languages, custom text strings, and quiz content. The translation schema is added to your web page using the following format. Web component's embed code should reference this schema.

Copy 
{
  <language code> : {
    translation: {
      "<component name>" : {
            "<text key>": "<translation of text key in the target language>"
      }
    }
  }

 

Show me an example translation schemaClosed

Translation Keys

Blocks

A separate translation key exists for each block and includes the strings needed for a full translation of the individual block. This information will change as a block is updated and text is added or changed. Not that tokens like "{{balance}}" should not be translated.

Download the current translation key in the Block Builder for the block you want to translate.

Show me a translation keyClosed

Show me a translated exampleClosed

Web Components

The translation key includes every string that's needed for a full translation of web components into a target language. This information will change as web components are updated and new text is introduced. Note that tokens like “{{count}}” should not be translated.

Work with your account team to ensure you have the current translation key.

Show me the translation keyClosed

Show me a translated exampleClosed

See also

Site settings