Hi everyone! I would love to have my app both in German + English (it’s a German and English Content Writing Service). What’s the best way to do it? I can’t seem to figure it out… Thank you!
Either you can store every bit of text you display in your database, or an option set, in both English and German and point to them (cumbersome) ever time you want to display text, or you can plug in Google Translate which tends to do a pretty good job on the usual buttons, labels, etc. an app uses (a little tricky to explain here in chat).
I personally recommend looking into one of the 3rd Party course providers to see if they have covered that in their materials. I happen to know that Gaby at CoachingNoCodeApps.com has a knowledge base she calls VIP that costs $25 a month and I think you would find it very helpful in your early days. I’m not sure I would ever have become really proficient in Bubble if I had not subscribed to it. She is an excellent teacher and does have a webinar that takes you step-by-step through setting GoogleTranslate up.
Bubble can also do this pretty well if its only two languages. Check this post out: [New Feature] Multi-language support improvements
I hope that helps. That’s the way I would do it.
Also, welcome to Bubble!
That’s good to know @J805 - I eventually worked out that you have to create a text and select dynamic data and App Data(?) then you can define the text and then go to the languages tab and insert the various translations. Shame they could not have put an [+Add Text] button on the Languages Tab - too obvious I guess 
@patrizia.barbera before you decide to go for the bubble translate (much easier and safer way to do it because no funny translations) you need to be aware that bubble’s approach does not translate the contents of a dropdown so you would need to create two dropdowns, one for each language and then hide/show based on the current language.
Wow, thank you! That’s super helpful. I’ll try it out with bubble and try to work my way around the dropdowns… I’ll keep you posted if it worked out!
If I’m not mistaken, you can actually use the same dropdown using conditions using one data type and 2 fields (1 for English and 1 for German). You can even make sure the placeholder and order is specific to German.
The condition would look something like this,
When: This language is German,
- Data source for German type
- Option caption for German type
- Placeholder for German type
PS. Don’t use Option sets as they cannot be sorted alphabetically (Although they load very fast). You would have to create 2 Options sets, one for each language, but that would result in other problems down the road.
1 Like
@mangooly thank you for this clarification. I never thought about the conditions.
Option Sets are a great start to something of great promise … if only Bubble take them forward in a timely manner and don’t adopt the ‘good enough’ approach. I’m using them everywhere I can.
No problems @patricia.
I agree Option sets are a great start but I have decided not to use them until they include more functionality. At the moment I find Data types better to use as they have more functionality which include sorting and filtering. Data types also give you the ability to use different fields, where as Option sets only allow you to use the “Display” field.
I stumbled on these videos that do an excellent job of showing you step-by-step how to do exactly what you want @patrizia.barbera it comes from one of the Bubble Templates, a particularly well documented one.
Thank you @patricia ! Looks super helpful.
Is there a way to integrate with a third party to get a better UI and workflow than the “app data” feature in bubble?
@philippe1i know some Bubblers use the API to connect to Google translate. That’s the only alternative I am aware of. I’ve heard many complain of the AppData approach. You could of course pull everything from a dB table which might be easier to populate than the AppData and Bubble languages section. I’ve no idea how that would impact performance however.
Thanks. I’m not looking to auto translate, just to have a manageable tool 
Another issue is once you got only “app texts”, your UI in the editor will look ridiculous and making the page responsive will be even more work. I hope @team could solve this, for example by toggling a specific language to be populated in the editor instead of “app text {{id}}”…
For example, how do I know the size of my text here to adjust the design?
I’m afraid you won’t know the size of your text @philippe1 - I tend to find the Bubble responsive not the best way to view anyway. I keep a separate browser window open with an simulator of different viewport sizes and I simply jump into the Bubble responsive editor to select a group I want to wrap or align or whatever. If you are using any sort of dynamic data like RGs or whatever you can’t see the data so AppData is no different. Who knows what this new editor that is rumoured might bring with it.
Hi @patricia. Thanks for all your insights here. I have a related question for the group: I’m currently building a single-page application that already relies heavily on URL routing (via @sudsy’s excellent Sudsy plugin) and conditional logic to pull in the appropriate UI components for each page.
I’m interested in implementing a multilingual strategy and have been considering the following approach:
- Create top-level domain folders for each target language
- Have a language toggle in header that would allow users to switch to their native language and redirect to appropriate URL
- For each text element: Have default text in english, custom state to store translated text and conditional logic based on URL language-folder to toggle between the two
- Translated text would be generated via a conditional workflow on page load that would call Google Translate’s API when the URL structure dictated
I like this strategy because it would allow us to activate new markets with almost zero incremental cost. The appropriate HREFlang tags would be added to our master template page — with the language, again, being populated dynamically. With that said, the biggest cost to us would be making duplicates of that base page for each language.
I imagine I’m overlooking some hurdles here so would love to hear your thoughts, as well as those of @romanmg and @AliFarahat.
Cheers!
I should add: My main concern with this approach is obviously performance-related. For a page with many elements, that’s a lot of API calls to be made before text could be rendered. Is there a way to do this browser-side? Please excuse the ignorance of the question.
the best approach in my opinion is the following:
you make custom state (yes/no) you call it IsGerman on the main page.
you store all your dynamic text in two text fields one in english one in german
for example
Name English
Name German
subject English
subject German
Then in every text or dynamic field you do condition check if IsGerman:formatted text then on yes
you display Subject German and for no you display Subject English.
you also can do that by adding conditions on same custom states.
and you will add button to change IsGerman from yes to No to change language from english to German and vice versa. i hope you get it.
It is super easy. and faster than all methods.
2 Likes
For drop-down menus there is also plugin to show whatever caption you want which is different than the value of drop-down menu.
1 Like
I have also notice for change language button you should have two copied workflows for same button and put your conditions ( if custom state IsGerman is yes)
Then change to No.
And the other workflow the opposite and set to Yes.
If you do one workflow it wouldn’t work.
Also do the same condtion with formatting to show text on button
German when english is displayed and English when german is displayed
1 Like
Can someone please explain this to me carefully. it seems to be the solution to my problem but I don’t understand when he says to store all dynamic text in two text fields. in the database or what? I don’t understand