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 a breeze by offering translation via connectors or manual overrides. When using a connector to translate a Descope flow, 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 or AWS Translate.

Configuration Overview

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 or AWS Translate, the localization will automatically be generated for the flow 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';
}