Languages & localization

Discover how to add multiple languages to your project.

PandaSuite does not automatically translate your content, but the tool greatly facilitates the integration of your content in multiple languages.

PandaSuite manages languages at two complementary levels:

• Static interface — texts, images, and videos placed directly in screens. You edit each element language by language from the editor.
• Dynamic data (Datastore) — content driven by collections (catalog, articles, points of interest…). The Datastore automatically generates a version per language for each text property.

Depending on your project, you will use one, the other, or both combined.

Prerequisite: add a language

By default, your project is built in a single language. Before editing content in another language, it is necessary to add this language to your project.

Here are the steps to add the new language:

1. Go to the Project properties.
2. In the Languages section, click on + Add.
3. Declare the initial language of the project, the one in which you have worked until now.

4. Add one or more other languages. You can add as many languages as necessary.
5. Use the pin icon to set the default language, which will automatically apply when the project is opened.

Approach 1: Static interface (manual elements)

This approach covers all content placed directly in your screens: manually entered texts, images, videos, and component properties.

Edit a language

When you want to edit a specific language:

1. Click on the flag located at the bottom right of your workspace.
2. Select the flag corresponding to the desired language.

You can modify:

• Texts, images, audio/video content (Video Player and Fullscreen Video). Ensure that images maintain the same ratio to avoid distortion.
• Specific properties of certain components, such as the URL Media Player or the Web component (e.g., modify a URL per language). It is not yet possible to change actions (e.g., Open an external URL) by language, but you can add a data binding on this URL to a variable per language.
• Dynamic display using the Flexbox component, which adjusts the size of a block according to the language.

Limits: The reference layout is that of the initial language. Therefore, it is not possible to modify the layout for a specific language. Changing the size of a block for a specific language affects all other versions.

Create a language switch menu

You can customize the language switch menu:

• Select the trigger element (flags, FR/EN, etc.).
• Add a new action.
• Select the action Change language and define the desired language.

Your application will automatically adapt.

Automatic localization based on device language

You can synchronize your application with the user’s device language.

1. Add a Condition component and create a condition per language.
2. Activate the Automatic evaluation option so that the condition is automatically evaluated.
3. In the If field, choose the data Project > Context > locale, then use the Starts with function.
   • Define the desired language value (e.g., “fr” for French, “en” for English, etc.). To find the corresponding language code, refer to: Language designators with region.
4. Define an action: if the condition is met (i.e., if the device language matches the defined value), use the Change language action and select the appropriate language.
5. Repeat these steps for each integrated language.

Automatic localization based on a URL parameter

It is possible to define the application language via a URL parameter.

Add a parameter for the language in the project properties

1. Go to your Project properties and add a custom parameter named lang.
2. Set a default value (e.g., fr for French).

Create a condition to evaluate the lang parameter

1. Add a Condition component at the project level.
2. Configure a condition to check the value of the lang parameter.

Configure the language change action

1. In the If field, select the data Project > Context > Launch > Parameter(s) > lang.
2. Add a rule to evaluate the parameter value (e.g., lang = en for English).
3. Define the Change language action.

Repeat for each supported language

Repeat the previous steps for each language in your project by adding a specific condition for each.

Approach 2: Dynamic data (Datastore)

For content driven by collections — catalogs, articles, points of interest, product pages — the Datastore provides built-in CMS translation management.

How it works

Datastore languages are independent from interface languages: they must be added separately, directly inside the Datastore.

In your Datastore, add the desired languages. For each Text property, an entry per language then becomes available. For example, a title property can be filled in French, English, German, etc.

Enter the translations for each item in the collection. When the user switches languages in the application, Collection / List components and data bindings automatically display the corresponding version — with no extra work on your part.

When to use this approach

• Your content is structured as a collection (catalog, article database, POIs…).
• Translations are updated regularly.
• You want to centralize all translations in one place, without modifying screens.

With an external source (Airtable, API…)

If your data comes from an external source, manage translations directly at the source (for example title_fr and title_en columns in Airtable). Then use the Transform component to expose the correct value based on the active language, using the Project > Context > locale data.