> ## 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, click into a demo > select the three dots next to the black Share button > Languages > + Add Languages > 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.

### 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 and — if a matching completed translation exists — displays the demo in that language without any action required from the viewer or you.

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. Enable the **Language selector** toggle in the Languages menu to show a flag icon in the demo player.

### 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="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="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="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>
