Localization

When building an application for use within many countries around the globe, it's essential to be able to translate your application to be localized to the user's location. Descope makes translating the text within your flows and messaging templates a breeze by offering translation via connectors or manual overrides. When using a connector to translate a Descope flow or messaging template, you can override the translation response from the third-party service to meet your needs.

This guide will cover an overview of localization configuration; however, we have dedicated knowledge base articles for utilizing connectors such as Google Cloud, AWS Translate, or Lokalise.

Configuration Overview

To configure the localization of a Descope flow or messaging template, navigate to the Localization section within the Descope console. Once here, you can select the applicable flow or messaging template you want to localize from the dropdown, then click Configure Localization.

Once you have clicked Configure Localization, you will be prompted to select the connector, source language, and target languages.

When you select the dropdown for Connector, you can choose manual or one of the connector instances if you have configured any per this connector guide.

After selecting Done, you will see a page similar to the one below. You can change the settings from the previous modal by clicking the settings icon at the top right. You can also import and export the translations via the arrows icon. You can also select the checkbox to View overrides only to show only the overridden items on the right-hand side for the selected language.

Manual Localization

After selecting the manual option for localization, you will see a screen like the example below. You can then manually override the translations per language.

Connector Based Localization

When configuring localization to utilize a connector like Google Cloud, AWS Translate, or Lokalise, the localization will automatically be generated for the flow or messaging template based on the returned translation. Below you can see an example configuration and the generated translation.

Manually Overriding Connector Translations

When you configure localization with a connector, you can manually override the translation. When you override the translation, you will see the override highlighted like the below example.

Localizing Errors

When it comes to translating errors, there are a few areas where you need to accomplish this.

Flow Components

Some Descope components have errors that are managed in the flow itself and can be localized within the localization section of the Descope console. Examples of these components would be the missing value messages or customized Validation Error Messages.

System Flow Errors

Descope system-level flow errors, such as OTP verification failures, must be translated using the Descope error transformer within the frontend SDK.

Below is an example of configuring the error transformer within the frontend SDK to localize system-level flow errors.

function errorTransformer(error) {
  const language = getClientLanguage(); // Function to get the client's language, e.g., 'en', 'es', 'de'
 
  const translationMap = {
    en: {
      OTPVerifyCodePhoneFailed: "Failed to verify OTP code",
    },
    es: {
      OTPVerifyCodePhoneFailed: "No se pudo verificar el código OTP",
    },
    de: {
      OTPVerifyCodePhoneFailed: "Der OTP-Code konnte nicht überprüft werden",
    },
    // Add more languages and translations as needed
  };
 
  const translations = translationMap[language] || translationMap['en']; // Default to 'en' if language not found
 
  return translations[error.type] || translations[error.text] || error.text;
}
 
function getClientLanguage() {
  // Logic to determine the client's language, e.g., from browser settings or user profile
  // For demonstration purposes, return 'en' (English) by default
  return navigator.language.split('-')[0] || 'en';
}

Custom Flow Errors

Descope allows you to generate customized error messages in conditions and actions. These custom errors must be translated using the Descope error transformer within the frontend SDK.

Below is an example of a configured flow error and how to configure the error transformer within the frontend SDK.

function errorTransformer(error) {
  const language = getClientLanguage(); // Function to get the client's language, e.g., 'en', 'es', 'de'
 
  const translationMap = {
    en: {
      "Trigger 404 failure": "I'm a pinecone",
    },
    es: {
      "Trigger 404 failure": "Soy una piña",
    },
    de: {
      "Trigger 404 failure": "Ich bin ein Pinienzapfen",
    },
    // Add more languages and translations as needed
  };
 
  const translations = translationMap[language] || translationMap['en']; // Default to 'en' if language not found
 
  return translations[error.type] || translations[error.text] || error.text;
}
 
function getClientLanguage() {
  // Logic to determine the client's language, e.g., from browser settings or user profile
  // For demonstration purposes, return 'en' (English) by default
  return navigator.language.split('-')[0] || 'en';
}

Language support

Descope currently supports the following languages:

• zh: Chinese
• nl: Dutch
• en: English
• fil: Filipino
• fr: French
• de: German
• he: Hebrew
• hi: Hindi
• it: Italian
• ja: Japanese
• ko: Korean
• pl: Polish
• pt: Portuguese
• ru: Russian
• es: Spanish
• sv: Swedish
• tl: Tagalog

Dialect support

Descope supports additional localization dialects to enhance your end user's experience further.

Supported extended dialects include:

• zh-TW: Chinese (Traditional) as used in Taiwan.
• en-GB: English as used in the United Kingdom.
• fr-CA: French as used in Canada.
• es-MX: Spanish as used in Mexico.

Dialects with connectors

The AWS Translate and Google Cloud Translate connectors don't support all of the Descope-supported dialects.

AWS Translate does not support en-GB. Google Cloud Translate does not support en-GB, fr-CA, or es-MX.