The problem
As we all know, bubble makes it insanely hard to figure out how it handles languages. The international standard format is en-US, but bubble uses en_us. But even better, that doesn’t take into account oddities such as bs-ba where bubble has decided to use the - (likely because the IETF Langage Tags (related to iso3166 code) that bubble theoretically pulls from actually differentiates bs-Cyrl-BA and bs-Latn-Ba (bubble uses latin btw).
Anyway… all of that aside, in an ideal world we want a language picker that displays the language in the native language of the user. Someone who only reads Chinese is going to have a hell of a time reading the latin letters. Better to use 中文. Okay, but if you’re serious about this then you know there is a different between Simplified Chinese (mainland China zh_cn) and Traditional Chinese (Taiwan zh_tw). So you want to add the country as well 中国 for your language picker.
My gift to you
Well my bubble friends… do I have a treat for you today. I’ve made an option set of all the languages bubble offers localizations for along with their two digit iso codes, country codes, english/native language/country names! And for good measure I added continent, region, currency, and flags (sadly emoji flags don’t display for Windows users).
To add it to your own app, visit this link, right click the option set, select copy, go to your app and right click to paste.
https://bubble.io/page?id=localization-option-set&tab=Data&name=index
Recreating this on your own
Here is the spreadsheet with all of the languages.
Implementation
-
Download the spreadsheet I’ve linked above.
-
Create an option set in your app (I called mine “Localizations”)
-
Add all the inputs in the spreadsheet from left to right (don’t include “Bubble Display”). It should look like this:
The last row is a yes/no boolean for if you specifically are offering this language in your app. This way you can only load languages you’ve actually localized/translated into dropdowns or repeating groups for your users. (No need to load all 112 when your app only offers 5 or something). -
Then use a tools such as the chrome extension “option sets helper” to bulk upload the CSV to your bubble option sets and… TADA you are all good to go.
https://chromewebstore.google.com/detail/Bubble%20Helper%20Pro/onacjlnddimbddmideijnpgbjnpdlojk
Additional Tips
Need to test how your site handles new users arriving with different browser locales?
- Open Chrome DevTools (F12 or
Cmd+Option+I/Ctrl+Shift+I). - Navigate to the Sensors tool (under the Esc key menu > More tools).
- Override Location by selecting a city or choosing “Custom” to set a specific locale.
