docs: in-app & link multi language surveys (#2350)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com> Co-authored-by: Johannes <johannes@formbricks.com>
2026-04-25 20:01:53 -05:00 · 2024-04-02 18:05:31 +05:30
parent ec5f6301d3
commit 98e0006f88
14 changed files with 179 additions and 1 deletions
@@ -0,0 +1,174 @@
+import { MdxImage } from "@/components/shared/MdxImage";
+
+import AddLanguageInSurvey from "./add-language-in-survey.webp";
+import AddLanguages from "./add-languages.webp";
+import EditMultiLang from "./edit-multi-lang.webp";
+import EnableMultiLang from "./enable-multi-lang.webp";
+import SeeSurveyInLanguage from "./see-survey-in-language.webp";
+import SurveyLanguagesFromHome from "./survey-languages-from-home.webp";
+import SurveyLanguageSettings from "./survey-languague-settings.webp";
+import SurveySharing from "./survey-sharing.webp";
+import SurveysHome from "./surveys-home.webp";
+import TranslateAsPerLanguage from "./translate-as-per-language.webp";
+
+export const metadata = {
+  title: "Multi-language Surveys | Formbricks",
+  description:
+    "Create multi-language link & in-app surveys with Formbricks. Get feedback from your users in their preferred language without writing a single line of code.",
+};
+
+#### Additional Features
+
+# Multi-language Surveys
+
+Multi-Language Surveys allow you to create surveys that support multiple languages using translations. This makes it easier to reach a diverse audience without creating separate surveys for each language. This feature simplifies the creation, delivery, and analysis of surveys for a multilingual audience.
+
+How to deliver a specific language depends on the survey type (in-app or link survey):
+
+- In-app survey: Set a `language` attribute for the user. [See the guide below for In-App Surveys](#in-app-surveys-configuration)
+- Link survey: Add a `lang` parameter in the survey URL. [See the guide below for Link Surveys](#link-surveys-configuration)
+
+<Note>
+  Multi-Language is feature of the Enterprise Edition. You can use it for **free** by adding your credit card details
+  on the Formbricks Cloud.
+</Note>
+
+<iframe
+  width="700"
+  height="450"
+  src="https://www.youtube.com/embed/Vol5zjYIoos?si=FOeDSqcy_OgtaUyM"
+  title="YouTube video player: Formbricks"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>
+
+---
+
+## Creating a Multi-language Survey
+
+1. Open the **Survey Languages** page in the Formbricks settings via the top-right menu:
+
+<MdxImage
+  src={SurveyLanguagesFromHome}
+  alt="Formbricks Home"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+2. Click on the **Edit Languages** button, to add a new language to your survey
+
+<MdxImage
+  src={SurveyLanguageSettings}
+  alt="Formbricks Home"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+3. Select the preferred language from the dropdown and assign an identifier Alias. Click the **Add Language** button to add the language to your product.
+
+<MdxImage
+  src={AddLanguages}
+  alt="Add Multiple Languages to your Product"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+You can come back to this page anytime to add more languages or remove existing ones.
+
+4. Now, return to the dashboard to create a new survey or edit an existing one.
+
+<MdxImage
+  src={SurveysHome}
+  alt="Add Multiple Languages to your Product"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+5. In the survey editor, scroll down to the **Multiple Languages** section at the bottom and enable the toggle next to it.
+
+<MdxImage
+  src={EnableMultiLang}
+  alt="Enable Multi-language for a survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+6. Now choose a **Default Language** for your survey. This is the language that will be shown to users who have not selected a preferred language.
+
+<Note>Changing the default language will reset all the translations you have made for the survey.</Note>
+
+7. Now, add the languages from the dropdown that you want to support in your survey.
+
+<MdxImage
+  src={AddLanguageInSurvey}
+  alt="Enable Multi-language for a survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+8. You can now see the survey in the selected language by clicking on the language dropdown in any of the questions.
+
+<MdxImage
+  src={SeeSurveyInLanguage}
+  alt="Enable Multi-language for a survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+9. You can now translate all survey content, including questions, options, and button placeholders, into the selected language.
+
+<MdxImage
+  src={TranslateAsPerLanguage}
+  alt="Enable Multi-language for a survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
+/>
+
+10. Once you are done, click on the **Publish** button to save the survey.
+
+## In-App Surveys Configuration
+
+1. When you initialise the Formbricks SDK for your user, you can pass a `language` attribute with the language code. This can be either the ISO identifier or the Alias you set when creating the language. The `language` attribute makes sure that this user only sees surveys with a translation in this specific language available.
+<Col>
+  <CodeGroup title="Configuring Formbricks SDK with Multi-language">
+
+```js
+Formbricks.init({
+  environmentId: "<environment-id>",
+  apiHost: "<api-host>",
+  userId: "<user_id>",
+  attributes: {
+    language: "de", // ISO identifier or Alias set when creating language
+  },
+});
+```
+
+  </CodeGroup>
+</Col>
+
+
+<Note>If a user has a language assigned, a survey has multi-language activate and it is missing a translation in the language of the user, the survey will not be displayed.</Note>
+
+
+2. That's it! Now, users with the language attribute set will see the survey in their preferred language. You can start collecting responses in multiple languages and filter them by language on the summary page.
+
+---
+
+## Link Surveys Configuration
+
+For link surveys, the translation delivery is dependent on the `land` URL parameter.
+
+After publishing the survey, just copy the survey link and append the `lang` query parameter with the language alias you have set.
+
+For example, if you have set the alias for French as `fr`, you can share the survey link as
+
+`https://your-survey-url.com?lang=fr`
+
+Here are two examples:
+
+- English: https://app.Formbricks.com/s/clptfos2i1pj516pvhxqyu3bn?lang=en
+- German: https://app.Formbricks.com/s/clptfos2i1pj516pvhxqyu3bn?lang=de
+
+Without the `lang` parameter, Formbricks will show the survey in the default language you have set.
+
+You can now start collecting responses in multiple languages! 
+
+Can’t figure it out? Join our [Discord](https://discord.com/invite/3YFcABF2Ts)!
@@ -212,6 +212,10 @@ export const navigation: Array<NavGroup> = [
      { title: "Start At Question", href: "/docs/link-surveys/start-at-question" },
    ],
  },
+  {
+    title: "Additional Features",
+    links: [{ title: "Multi Language Surveys", href: "/docs/additional-features/multi-language-surveys" }],
+  },
  {
    title: "Best Practices",
    links: [
@@ -66,7 +66,7 @@ export const PopoverPicker = ({
      />

      {isOpen && (
-        <div className="absolute right-0 z-20 mt-2 origin-top-right" ref={popover}>
+        <div className="absolute right-0 z-20 mt-2 origin-top-right bg-red-500" ref={popover}>
          <div className="rounded bg-white p-2 shadow-lg">
            <HexColorPicker color={color} onChange={onChange} />
          </div>