# Langues & localisation

> Découvrez comment ajouter plusieurs langues à votre projet PandaSuite. Cette publication explique les étapes nécessaires pour intégrer plusieurs langues, personnaliser les menus de changement de langue, et synchroniser votre application avec la langue de l'appareil de l'utilisateur.

https://docs.pandasuite.com/fr/essentials/project-properties/languages-and-localization/

**Découvrez comment ajouter plusieurs langues au sein de votre projet.**

PandaSuite ne traduit pas automatiquement votre contenu, mais l'outil facilite grandement l'intégration de votre contenu en plusieurs langues.

[Vidéo : Tutoriel PandaSuite : ajouter plusieurs langues à votre application et éditer vos contenus langue par langue](https://www.youtube.com/embed/WdRLhK8ima0?&hl=fr&cc_lang_pref=fr&cc_load_policy=1)

PandaSuite gère les langues à deux niveaux complémentaires :

- **Interface statique** : textes, images et vidéos placés directement dans les écrans. Vous éditez chaque élément langue par langue depuis l'éditeur.
- **Données dynamiques (Datastore)** : contenu piloté par des collections (catalogue, articles, points d'intérêt…). Le Datastore génère automatiquement une version par langue pour chaque propriété de type Texte.

Selon votre projet, vous utiliserez l'un, l'autre, ou les deux combinés.

## Approche 1 : Interface statique (éléments manuels)

Cette approche couvre tous les contenus placés directement dans vos écrans : textes saisis manuellement, images, vidéos, propriétés de composants.

### Ajouter une langue

Par défaut, votre projet est construit en une seule langue. Avant d'éditer les contenus dans une autre langue, il est nécessaire d'ajouter cette langue dans votre projet.

Voici les étapes pour ajouter la nouvelle langue :

1. Rendez-vous dans les propriétés du **Projet**.
2. Dans la section **Langues**, cliquez sur **+ Ajouter.**
3. Déclarez la **langue initiale du projet**, celle dans laquelle vous avez travaillé jusqu'à présent.

> **Info**
>
> Il est essentiel de bien sélectionner cette langue initiale, car elle sert de
> référence pour toutes les autres. Toutes les modifications de mise en page
> dans cette langue seront automatiquement déclinées sur les autres langues. Une
> fois définie, la langue initiale ne peut être modifiée sans supprimer tout le
> contenu associé.

> **Info**
>
> Les langues indiquées dans PandaSuite Studio sont là qu'à titre indicatif pour
> vous aider dans votre configuration. Si la langue de votre choix n'est pas
> présente dans PandaSuite Studio, contactez notre équipe ou utilisez une autre
> langue comme référence.

4. Ajoutez une ou plusieurs autres langues. Vous pouvez ajouter autant de langues que nécessaire.
5. Utilisez l'icône **punaise** pour définir la **langue par défaut**, celle qui s'appliquera automatiquement à l'ouverture du projet.

[Image : Propriétés du projet : la section Langues, encadrée en rouge, liste l'anglais, langue initiale avec sa punaise, puis le français]

### Éditer une langue

Lorsque vous souhaitez modifier une langue spécifique :

1. Cliquez sur le **drapeau** situé en bas à droite de votre espace de travail.
2. Sélectionnez le drapeau correspondant à la langue souhaitée.

[Image : Le drapeau en bas à droite de l'espace de travail, encadré en rouge, ouvre la liste des langues : anglais (langue initiale) et français]

Vous pouvez modifier :

- Les textes, images, contenus audios/vidéos ([Lecteur Vidéo](https://docs.pandasuite.com/fr/essentials/components/video-player/) et [Vidéo plein écran](https://docs.pandasuite.com/fr/essentials/components/fullscreen-video/)). Assurez-vous que les images respectent le même ratio pour éviter toute distorsion.
- Les propriétés spécifiques de certains composants comme le composant [URL Media Player](https://docs.pandasuite.com/fr/essentials/components/url-media-player/) ou le [composant Web](https://docs.pandasuite.com/fr/essentials/components/web/) (exemple : modifier une URL par langue). Il n'est pas encore possible de changer les actions (par exemple, **Ouvrir une URL externe**) par langue, mais vous pouvez ajouter un [data binding](https://docs.pandasuite.com/fr/essentials/data/data-binding/) sur cette URL vers une variable par langue.
- L'affichage dynamique grâce au [composant Flexbox](https://docs.pandasuite.com/fr/essentials/components/flexbox/) qui ajuste la taille d'un bloc selon la langue.

Limites : la mise en page de référence est celle de la langue initiale. Il n'est donc pas possible de modifier la mise en page pour une langue spécifique. Modifier la taille d'un bloc pour une langue spécifique impacte toutes les autres versions.

### Créer un menu de changement de langue

Vous pouvez personnaliser le menu de changement de langue :

- Sélectionnez l'élément déclencheur (drapeaux, FR/EN, etc.)
- Ajoutez une nouvelle action.
- Sélectionnez l'action **Changer de langue** et définissez la langue souhaitée.

Votre application s'adaptera automatiquement.

[Image : Fenêtre Action : l'action Changer de langue, encadrée en rouge, propose de choisir entre anglais (langue initiale) et français]

### Localisation automatique selon la langue de l'appareil

Vous pouvez synchroniser votre application avec la langue de l'appareil de l'utilisateur.

Voici comment procéder :

- Ajoutez un composant [Condition](https://docs.pandasuite.com/fr/essentials/components/condition/) et créez une condition par langue
- Activez l'option **Évaluation automatique** pour que la condition soit automatiquement évaluée
- Dans le champ **Cible**, choisissez la donnée **Projet** > **Context** > **locale,** puis utilisez la fonction **Débute par.**
- Définissez la valeur de la langue souhaitée (par exemple, "fr" pour le français, "en" pour l'anglais, etc.). Pour connaître le code correspondant à la langue : [Language designators with region](https://lingohub.com/developers/supported-locales/language-designators-with-regions)
- Définissez une action : si la condition est remplie (c'est-à-dire si la langue de l'appareil correspond à la valeur définie), utilisez l'action **Changer de langue** et sélectionnez la langue appropriée.
- Répétez ces étapes pour chaque langue intégrée.

[Image : Fenêtre de la condition « Language is French », évaluation automatique sur Oui : Projet > Contexte > Locale débute par fr]

### Localisation automatique selon un paramètre de l'URL

Il est possible de définir la langue de l'application via un paramètre d'URL.

> **Info**
>
> Cette méthode permet une personnalisation dynamique et une meilleure
> intégration avec des liens externes.

#### Ajouter un paramètre pour la langue dans les propriétés du projet

1. Accédez aux **propriétés de votre projet** et ajoutez un **paramètre personnalisé** nommé `lang`.
2. Définissez une valeur par défaut (par exemple, `fr` pour le français).

#### Créer une condition pour évaluer le paramètre `lang`

1. Ajoutez un composant **Condition** au niveau du projet.
2. Configurez une condition pour vérifier la valeur du paramètre `lang`.

#### Configurer l'action de changement de langue

1. Dans le champ **Cible**, sélectionnez la donnée **Projet > Contexte > Launch > Parameter(s) > lang**.
2. Ajoutez une règle pour évaluer la valeur du paramètre (par exemple, `lang = en` pour l'anglais).
3. Définissez l'action **Changer de langue**

#### Répéter pour chaque langue prise en charge

Reproduisez les étapes précédentes pour chaque langue de votre projet en ajoutant une condition spécifique pour chacune.

## Approche 2 : Données dynamiques (Datastore)

Pour le contenu piloté par des collections — catalogues, articles, points d'intérêt, fiches produits — le [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/) offre une gestion CMS intégrée des traductions.

### Comment ça fonctionne

Les langues du Datastore sont **indépendantes** des langues de l'interface : elles doivent être ajoutées séparément, directement dans le Datastore.

Dans votre [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/), ajoutez les langues souhaitées. Pour chaque propriété de type Texte, une entrée par langue devient alors disponible. Par exemple, une propriété `titre` peut être renseignée en français, en anglais, en allemand, etc.

Renseignez les traductions pour chaque élément de la collection. Lorsque l'utilisateur change de langue dans l'application, les **Collection / Liste** et les liaisons de données affichent automatiquement la version correspondante — sans aucune action supplémentaire de votre part.

[Image : Datastore d'un audioguide de musée : la description d'un tableau en langue par défaut, allemand et anglais]

### Quand utiliser cette approche

- Votre contenu est structuré en collection (catalogue, base d'articles, POI…).
- Les traductions sont mises à jour régulièrement.
- Vous souhaitez centraliser toutes les traductions dans un seul endroit, sans modifier les écrans.

### Avec une source externe (Airtable, API…)

Si vos données proviennent d'une source externe, gérez les traductions directement à la source (par exemple des colonnes `titre_fr` et `titre_en` dans Airtable). Utilisez ensuite le composant **Transform** pour exposer la bonne valeur selon la langue active, en vous appuyant sur la donnée **Projet > Contexte > locale**.

[Modèle : Audioguide multi-langues musée](https://pandasuite.com/fr/templates/audioguide-multi-langues-mus%C3%A9e/)