🌐Multilingual apps
Upgrade your free account to the Bravo Solo plan to use this feature.
Enable the multi-language feature to add various translations to your app texts! This ensures the app's texts will match the device's language settings.
There are two types of text content in an app.
Static texts. These texts are set in the design tool (Figma or Adobe XD), and not connected to API data.
Dynamic texts. These texts are defined in a backend tool, and fetched by the Bravo app via API request.
You can see below how to set up multiple languages for both text content types.
📓 Multi-language for static text
As explained above, the static text is defined in the design file, and not connected to API data. This means the text will always be the same. Some examples can be the title of an app page, the app sections, and so on.
To set up multiple languages for the static texts (defined in the design file) in your app:
Navigate to
Integrations->Multi-language.Under
Language settings, select the app's original language: the language in which the design file texts are written.Then, you can add as many translated languages as you wish.
After specifying the original and translated languages, go to
Translations. Insert the translations for all the static texts in the app for all the previously indicated translated languages. As shown below, each language will have an associated file.
You'll need to edit the language files. There are several ways to do it:
Upload a JSON file containing translations for a specific language. You can refer to the format of the JSON by reviewing one of the existing files. If you see the red cross icon, it means the file for that language has been created, but it's missing the translated texts. You can also download the file, edit it on your computer, and upload it again.
Edit the file inside the platform. To do this, click on the
pencil iconon the corresponding language file, and edit the translations in the right column.
Once your translations are set, your app will display text in the phone's language settings. Test it with Bravo Vision!
It's a good practice to add information with the languages your app supports (i. e. the translations you have included), for instance in the app intro flow.
🔌 Multi-language for dynamic text (API data)
Multilingual support for dynamic text requires a different setup. This support relies on the use of the built-in device.lang variable. This variable will allow to send the language code of the device language via API request.
To support multiple languages for dynamic texts (e.g., texts from a backend tool), the backend needs to be set up to handle requests with specific language codes, returning texts in the corresponding language. Below is an example using Airtable, but the necessary backend setup will vary depending on the tool being used.
Backend setup for multiple languages
To support multiple languages on the backend, ensure that texts in different languages are already stored in your database.
For example, you can create separate tables for each language, as illustrated below.
The table names now include language codes at the end, indicating support for English (EN) and Spanish (SP). This setup enables a single API request to target different tables based on the device.lang variable, which we’ll cover shortly. This approach allows us to bind the same data items to app UI elements, showing different values depending on the device language.
After gathering all the supported translations for the app text content, proceed to create the required API requests in the Data Collections section.
Create the API requests using device.lang
We'll need to create a single API request for all the languages for a specific table type. In our example, we'll have a single list request (and detail request) for the Places and the Journal tables, which will target the corresponding language table depending on the device language (by setting the device.lang variable in the URL).
To match the naming we defined on Airtable for the language-specific tables, our GET requests will look like this:
After setting up the request URL, you can test it by specifying a test value for the device.lang variable.
Once you have managed to send a test request, you can bind the data items to the app UI elements as usual. Remember that the same data item will have a different value on the app (i. e. the text in different languages), depending on the value of device.lang.
As you might have guessed, in case a device language is not defined on your backend, the request will throw an API error like 400 or 404. In this case, it might be useful to create error pages where you indicate which languages your app supports.
Last updated
