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.
16 Likes

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

1 Like

@greg11 Hey, thanks for this! Do you know whether it’s possible to have some sort of “live/instant” translation? My app has users that post their listings, and I also want this dynamic data to be translated. Is that possible?

Hi

Above method will not work for live instant translation, as it still requires you to import translations as CSV file to Bubble. This will work for your UI elements where you are using text, but this will not be a choice for user posts.

What could work could be:
-user posts go to Airtable (if you have airtable integrated with Bubble)

  • via Airtable Automation, whenever there is a new post you start a script (could be adopted from my example in the article) and this way you get posts in other languages
  • to display it back in Bubble you would have to control what column users are shown based on the language in Airtable.

Hi. That makes sense, thanks!!

Hey @greg11, have you figured out how to add a language ‘folder’ inside of your url, such as bubbleapp.com/en/page ? If you have i would love to know how it was achieved.

Thanks,
Chris

@noyourbroker We are using DeepL to provide near instant translations; we use theirAPI service and store the result so we only do each translation once.

Thanks @james.puddicombe i’ll check that out. Have you run into any limitations of note?

Not yet Chris - but we’re not using it at high volume yet… :slight_smile:

Hi guys, I’m a newbie. I want my users to be able to press a button to switch between two languages using this app text method how can i achieve that? I have tried updaing the language field on the user type by using a ‘make changes to thing’ workflow, but it still doesn’t work.

How can i get this to work?

Hope this helps @lancegerarrd :+1:t2:

1 Like

Hi James, I’m curious how you are storing your translations. Could you elaborate on your method? Is it still functioning well for you? Thanks in advance for your time.