Bubble app translation

Title - How to localize (Translate) your Bubble App

Category - Tips


Hey, bubblers!

I want to share my experience of translating bubble apps. Hope this saves you a lot of time.

First of all - if you’re wondering whether it’s worth localizing your Bubble app, the answer is “yes.”

Our experience with our own and clients apps proved that it works - we really boosted visits, DAU/MAU, and revenue after localizing the content.

Yes, it can be challenging, but planning for it from the beginning will save you time and money.

There are several ways to translate and localize an application manually and automatically.

Automatic localization using plugins is the fastest and most accessible method. It involves installing a plugin that translates the content using online translators.

The most popular localization plugins are:

  1. Google translate API
  2. Bubble Weglot
  3. LocalizeJS

This method is time-efficient, but the quality of the translation could be better. It is a good solution for simple phrases and words, and common languages. At the same time, translations into some languages will be a problem, even if the plugin supports them.

Localization using the built-in Bubble function (App Text)

The built-in Bubble translation feature is one of our tops, even though you should translate all your app’s content manually. If you choose this method, put localization into an estimate at the beginning of development. Translation for an already completed application will take a lot of time.

Warning! This method is unsuitable for localizing application databases. It is intended solely for translating static texts, buttons, etc.

To use the built-in Bubble function, follow the steps below:

  1. Create an Option Set for languages with the following parameters:
  • Language name - to show the user’s language in the relevant item,
  • Language code - to switch between languages (e.g., en_us). You can find all language codes on the Languages tab in the application settings.

  1. Map this field to the User entity and the default language for the user.

  2. Specify the field used for language selection and select the default language.

  1. Create a translation for each unique element of your app; specify the item’s name, a unique item ID (assigned automatically), and the translation text. For easy search, I recommend you use text, a short description, or a page name when creating the item name.
  1. Translate elements using the “AppText” function.

  1. Place a language switch on the page.

Important: The AppText function requires a page reload after each switch.

  1. Export the language file by pressing the “Export” button and selecting the required languages.

  1. Fill in the translation text.

  1. Upload the file back using the “Import” button.

Localization using the “Split by:” feature

This method is suitable for both localizing static texts and database content (except for content entered by a regular user). It is time-consuming, but does not require a page reload (unlike “AppText”), and allows you to avoid a lot of “Custom States” and unnecessary fields in the database.

Steps to localize your app with the “Split by:” feature:

  1. Create an Option Set for languages with the following parameters:
  • Language name - to show the user’s language in the relevant item
  • Language serial number - to switch between languages. For example, our Bubble application is localized into 2 languages, English and German, numbered 1 and 2, respectively.

  1. Localize the database content. Enter the text in different languages in the corresponding fields. Use a separator to have the “Split by:” function split the text and convert it to a list.

  1. Apply the “Split by:” in one of the ways:

a. Apply the command to the text and then select the serial number of the language:

b. The second option also takes into account that the text may be untranslated, in which case we need to show the contents of our field without using the “Split By:” command. This is done as follows:

We also have two alternative ideas how to localize static content using the "Split By:” feature.

The first one is pretty much the same as the one above. You need to create a database of translations and load it into an item from the database using “Split by:” to select the language.

Another method allows you to change the language without reloading the page, but it will take more time to translate all the elements since you cannot reuse existing translations. For this method, I also recommend you test the application’s performance.

In general, I recommend you follow these rules to get localization done quickly and reap all the benefits.

  1. Keep localization in mind from the initial app development stage. Design an app to accommodate different languages right from the beginning. This principle will make the translation and localization process simpler later.

  1. Think beyond translation. Content includes the entire app—images, colors, fonts, and more. Don’t embed text into images. You can set the app to show and hide images easily if that’s impossible.

  1. Remember word order and different ways to pluralize. For example, there are several ways people worldwide enter their names in form fields.

  1. You must conduct localization testing on various devices with different screen sizes specific to those prevalent in a particular region.