Cart Licenses Contact Support Online Creator Log in/Register
Try
Free
v 1.9.43
Try
Free
v 1.9.43

Localization & Globalization

This article describes how to localize UI elements and contents of your survey.

Localize UI Elements

Available Languages

Survey UI is translated into over 50 languages. We ship translated strings as dictionary files. They are supported by the community and may be incomplete. Feel free to add missing translations to existing dictionaries or create new dictionaries for other languages. You can use English as a base dictionary: copy the file, replace English translations in it, and submit a pull request with the resulting file to the survey-library repository.

Enable Localization and Switch Between Locales

The localization engine that works with dictionaries is available as a separate script/module. 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";

The default language for UI elements is English. To select another language, use the Survey's locale property. For example, the following code translates the survey UI to French:

import { Model } from "survey-core";
import "survey-core/survey.i18n";
const surveyJson = { ... };
const survey = new Model(surveyJson);

survey.locale = "fr";

Override Individual Translations

If you want to change individual translation strings, get an object with all translation strings for a specific locale and override the required properties in this object. Refer to the English dictionary for a full list of available properties.

import { surveyLocalization } from 'survey-core';

// Get the English locale. To get the default locale, pass an empty string.
const engLocale = surveyLocalization.locales["en"];
// Override individual translations
engLocale.pagePrevText = "Back";
engLocale.pageNextText = "Forward";

You can also create a custom locale to apply multiple translations in a batch. Declare an object with your translations and assign it to the locales["localeName"] property:

import { surveyLocalization } from 'survey-core';

const customLocaleStrings = {
  pagePrevText: "Back",
  pageNextText: "Forward",
  completeText: "Send"
};

surveyLocalization.locales["customlocale"] = customLocaleStrings;
// ...
// Activate the custom locale
survey.locale = "customlocale";

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:

surveyLocalization.defaultLocale = "fr";

View example

Localize Survey Contents

You can localize questions, choices, columns, rows, and other survey texts right in the survey JSON definition. Normally, properties that specify survey texts accept string values, like the title property does in the code below:

const surveyJson = {
  "elements": [{
    "type": "text",
    "name": "firstname"
    "title": "Enter your first name"
  }]
};

To localize survey texts, specify the properties with objects instead of string values. Each object field should indicate a locale and the field value—a translation for this locale:

const surveyJson = {
  "elements": [{
    "type": "text",
    "name": "firstname"
    "title": {
      "default": "Enter your first name",
      "de": "Geben Sie Ihren Vornamen ein",
      "fr": "Entrez votre prénom"
    }
  }]
};

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";

View example

Localize choicesByUrl

Checkbox, Dropdown, and Radiogroup questions can load choices from a RESTful service if you specify the choicesByUrl property. To localize choices, ensure that the RESTful service returns them in the following format:

[{
  "choiceId": 1,
  "choiceTitle": {
    "en": "En 1",
    "de": "De 1"
  }
}, {
  "choiceId": 2,
  "choiceTitle": {
    "en": "En 2",
    "de": "De 2"
  }
},
// ...
]

View example on Plunker

See Also

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.