> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multilingual demos

> Learn how to translate your Navattic demos into multiple languages.

<Info>Enabled in workspaces on the Growth plan.</Info>

<Icon icon="languages" /> **Multilingual demos** are a powerful feature that allows you to translate
your demos into multiple languages. Use multilingual demos to reach a global audience and create a
more inclusive, localized experience for every viewer.

To translate a demo, open it in the **Build** tab > click the settings icon (gear) in the top-right toolbar > **Languages** > **Add language** > select a language from the dropdown > **Add**.

When you add a language, Navattic uses AI to automatically generate translations. These translations write into draft edit versions so they can be edited in the builder. If you make manual changes to your default language, you can click "Sync translations" to retranslate the selected languages.

<Note>
  Steps that contain only non-text content, such as a video-only modal, are copied to each language
  exactly as-is. The video plays correctly in every language version of your demo. If a previous
  translation sync replaced the video with placeholder text, re-syncing translations restores the
  correct content.
</Note>

### What updates on publish

When you publish a demo, all language versions that have a completed translation go live at the same time. Share links immediately serve whichever language matches a viewer's browser preference. Languages that were never translated, or whose translation is still in progress, do not appear as options. They appear once the translation is complete and you publish the demo again.

### Syncing translations

**Sync translations overwrites your manual edits.** When you click "Sync translations," Navattic re-translates the selected languages from your default language content from scratch. Any manual changes you made to those translations are replaced. Languages you do not select in the sync dialog are left untouched.

### Captures vs. text

When you translate a demo, Navattic can translate two things separately:

* **Demo text** includes tooltips, modals, buttons, and other text you've added in Navattic.
* **Captures** are the HTML capture of your application, behind any tooltips and modals.

By default, translations only change your demo text. Your captures stay the same across every language.

If you also want the text inside your captures translated, you can enable capture translation. This is an enterprise feature. Contact your account manager if you're interested in enabling it.

Once enabled, Navattic creates translated captures for each language when you publish your demo. Capture translation translates all visible text in your captured screens, including navigation labels and generic UI elements. Brand names and terms defined in your [Translation Glossary](/demos/multilingual#translation-glossary) are preserved as configured.

What each action updates:

* **Sync translations** updates your demo text.
* **Publish** updates your translated captures.

### Automatic language detection

Navattic automatically serves your demo in the viewer's preferred language. When a viewer opens a demo, Navattic checks their browser's language settings. If a matching completed translation exists, Navattic displays the demo in that language. Neither you nor the viewer needs to take any action.

Language priority:

1. **`?lang=` URL parameter**: If the share link includes a language parameter, that language is always used.
2. **Browser language preference**: If no `?lang=` parameter is set, Navattic reads the viewer's browser language and serves the closest matching translation.
3. **Demo default language**: If the viewer's browser language does not match any available translation, the demo's default language is shown.

No configuration is needed. Automatic detection works for any demo that has at least one completed translation.

### In-demo language selector

Allow visitors to switch between available languages directly within the demo. To enable it, open the demo in the **Build** tab and click the gear icon in the top-right toolbar. Go to **Languages** and turn on the **Language selector** toggle. A flag icon will appear in the demo player so viewers can switch languages.

### Translation glossary

Ensure consistent translation of brand names and specific terms across all your demos. Workspace Admins can manage the **Translation Glossary** in **Settings** > **Translation**.

Automatic demo translations to these languages are supported today:

<CardGroup columns={2}>
  <Card
    title="Afrikaans (af)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/za.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Arabic (ar)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/sa.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Bulgarian (bg)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/bg.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Cantonese (yue)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/hk.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Chinese - Simplified (zh-CN)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/cn.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Chinese - Traditional (zh-TW)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/tw.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Czech (cs)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/cz.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Danish (da)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/dk.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Dutch (nl)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/nl.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Filipino (tl)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/ph.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Finnish (fi)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/fi.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="French (fr)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/fr.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="German (de)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/de.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Greek (el)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/gr.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Hebrew (he)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/il.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Hindi (hi)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/in.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Hungarian (hu)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/hu.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Indonesian (id)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/id.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Italian (it)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/it.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Japanese (ja)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/jp.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Korean (ko)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/kr.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Lithuanian (lt)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/lt.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Malay (ms)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/my.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Norwegian (no)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/no.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Polish (pl)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/pl.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Portuguese (pt)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/pt.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Romanian (ro)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/ro.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Russian (ru)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/ru.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Slovak (sk)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/sk.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Spanish (es)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/es.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Swedish (sv)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/se.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Thai (th)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/th.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Turkish (tr)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/tr.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Ukrainian (uk)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/ua.svg" className="my-0 h-6 w-6" />
}
  />

  <Card
    title="Vietnamese (vi)"
    horizontal
    icon={
  <img src="https://hatscripts.github.io/circle-flags/flags/vn.svg" className="my-0 h-6 w-6" />
}
  />
</CardGroup>
