Building a multi-language app in Bubble

Tips
1

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.

    image
    image929Ɨ577 38.1 KB

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

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

image
image1341Ɨ473 31.6 KB

  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.

image
image946Ɨ476 26.5 KB

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.
    image
    image1281Ɨ688 47 KB

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.

26 Likes
2

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

1 Like
3

@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?

4

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.
5

Hi. That makes sense, thanks!!

6

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

7

@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.

8

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

9

Not yet Chris - but weā€™re not using it at high volume yetā€¦ :slight_smile:

10

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.

image
image887Ɨ522 31.5 KB

How can i get this to work?

11

Hope this helps @lancegerarrd :+1:t2:

image
image2160Ɨ1620 277 KB
image
image2160Ɨ1620 278 KB

1 Like
12

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.

1 Like
13

hi james can you please guide me how to translate whole website using deepl rest api, I already setup api connector using cURL code and api from deepl but now stucked on translating whole website using deepl

thanks in advance

14

Hey Guys,

Do you know if itā€™s possible to have a multi-language version of the site info and description so they appear in the right langage based on the search engine langage ?

Thanks !

image
image3182Ɨ596 22.7 KB

15

Hey everyone,

If it helps, I work at Weglot and we created a plugin to translate Bubble apps > Weglot Translate Plugin | Bubble.

If you want to give it a try! :slight_smile:

1 Like
16

Can vouch for Weglot. Used it in production apps for clients.

1 Like
17

This didnā€™t work for me. The page is half translated. Headers in repeating groups are not translated, and a lot of other componentā€¦

19

Thanksss Sharma! Thatā€™s awesome to hear. :star_struck:

20

Thanks for your message Renaud!
Please drop us a message at support@weglot.com, Iā€™m sure we will be able help. :slight_smile: