Forum Academy Marketplace Showcase Pricing Features

Building a multi-language app in Bubble

Hi guys,

I have been browsing the forum to find out how to support multiple languages in my app and the answers were not really that clear for me. It was also not clear from the support pages what to do.

I have finally figured out what I think is a streamlined solution (any comments appreciated) and wanted to share my approach.

  1. Automatically detecting browser language
    Here I am using a fantastic plugin from @keith to determine browser locale:
    https://bubble.io/plugin/browser-timezone-and-locale--1549403652951x881394512824893400

  2. Setting user language on page load
    Using the below workflow I am adding the lang parameter to the URL, as long as there is no lang parameter present.


    This allows overriding the language later in the app if needed.

You could also set the language as a parameter specific to the user.

  1. Showing different text based on the selected language
    This was a real breakthrough for me as I realized that I can use a dynamic variable called App(), to show different text. The trick here is to use the actual text value you want to display as the Text ID. This way you can see the text in blocks on the page and later use the ID as the exact text to be translated.

Note: I have not tested how long can the text ID be, but it seems to be accepting longer paragraphs.

  1. Getting the translation done
    Every Text ID that you have added in the App variable will show up in the Language tab.

You can input your translations there. If you set your Text ID in English you can download the CSV and just copy-paste the Text IDs to the English column. You can now use the CSV file to translate all the other languages needed.

  1. Mass translation for all languages
    Here finally there is another trick I have figured out for my project to translate to all languages available in Bubble using Google Translate API.
    a) Download CSV file
    b) Import CSV file to Airtable
    c) Run a Scripting App to automatically fetch all translations from Google Translate API
    d) Export Airtable table as CSV
    e) Upload to Bubble and enjoy the app with 60 different language versions!

Bonus - here is the code for the translation I have been using:


You will need your own Google API key to make it work. I will try to provide some more details on the script and how to customize it later, but it should be a good way to get you folks started.
8 Likes

I actually also made a longer article describing how to set up Airtable for various translations in case anyone needs additional info: