Survey Localization
Localization is the adaptation of a survey to the local language of your respondents. Localized surveys eliminate the language barrier and help you to poll larger groups of people. With SurveyJS, you can design multi-language surveys that support different countries and regions. To localize a survey, you need to localize its UI elements (buttons, menu items, messages) and survey contents (questions, choice options).
Localize UI Elements
Survey UI is translated into over 50 languages. Translated strings are shipped as dictionary files. The localization engine that works with the dictionaries is available as a separate script/module. This script/module imports dictionaries for all languages. Reference this script in the <head> tag of your page or import this module into the component that renders your survey:
<script src="https://unpkg.com/survey-core/survey.i18n.min.js"></script>
import "survey-core/survey.i18n";
Since SurveyJS v1.9.112, you may reference or import only the languages you need, as shown below:
<script src="https://unpkg.com/survey-core/i18n/french.js"></script>
<script src="https://unpkg.com/survey-core/i18n/german.js"></script>
<script src="https://unpkg.com/survey-core/i18n/italian.js"></script>
import "survey-core/i18n/french";
import "survey-core/i18n/german";
import "survey-core/i18n/italian";
The default language for UI elements is English. To select another language, set the Survey's locale property. In this demo, you can use the Locale drop-down menu to switch between languages at runtime.
If you want to change individual UI translations, get an object with all translation strings for a specific locale and override the required properties in this object. You can find a full list of available properties in the English dictionary. Refer to the JavaScript tab for a code example.
You can also introduce a custom locale to override multiple UI translations in a batch. Declare an object with your translations and assign it to the locales["localeName"] property. This demo shows how to override the Previous, Next, and Complete button captions. If any translation strings are missing in your custom locale, they will be taken from the default English locale. You can specify the defaultLocale property to use another locale as default:
import { surveyLocalization } from 'survey-core';
surveyLocalization.defaultLocale = "fr";
Localize Survey Contents
You can localize questions, choices, columns, rows, and other survey texts right in the survey JSON schema. Normally, properties that specify survey texts accept string values. Specify the properties with objects instead. Each object field should indicate a locale and the field value—a translation for this locale. This demo translates the title of each question into multiple languages.
You do not have to specify translations for all locales. If a translation is missing for the current locale, the survey takes the translation from the default field.
To apply your translations, set the current locale:
survey.locale = "de";
Implement a Language Selector
A custom language selector allows users to switch between survey locales. Follow the steps below to implement it:
Add a custom UI element that will switch between locales.
The choice of the UI element is up to you. For example, you can add a drop-down menu or a radio button group to an external navigation bar.Get an array of locales used in your survey.
Call thegetUsedLocales()method on aSurveyModelinstance to obtain an array of locale codes ("en","de","fr", etc.).Get human-readable locale names for display.
Locale names are stored in thesurveyLocalization.localeNamesobject under corresponding locale codes. Iterate over the array of used locales from step 2 and retrieve the locale names using the locale codes.
import { surveyLocalization } from "survey-core";
const availableLocales = [];
const surveyLocales = survey.getUsedLocales();
const localeNames = surveyLocalization.localeNames;
surveyLocales.forEach((localeCode) => {
const localeName = localeNames[localeCode];
availableLocales.push({
value: localeCode,
text: localeName
});
});
// ...
// Populate the UI element with available locales here
// ...