I spent hours looking for the answer in the forum, but I am kind of lost regarding how to pass the browser language setting into bubble via “javascript to bubble”.
I am trying to selectively show an Sign-in screen that is appropriate for the “first time visitor(logged out)”. Say, the visitor is Japanese, I want the Sign-in written in Japanese.
This is the steps I want to take.
Get browser language setting.
Pass the data(1) into bubble.
Change custom state according to the data(2)
I need a solution on 2. Pass the data to bubble.
This is the code I found on the internet that is supposed to “Get browser language setting(1)”.
> window.onload = function() {
> var language;
>
> if (navigator.browserLanguage != null) {
> // Internet Explorer, Opera, etc
> language = navigator.browserLanguage.substr(0, 2);
> } else if(navigator.userLanguage != null) {
> // Internet Explorer
> language = navigator.userLanguage.substr(0, 2);
> } else if(navigator.language != null) {
> // Chrome, Firefox, Opera, etc
> language = navigator.language.substr(0, 2);
> } else {
> language = "en";
> }
>
> setLanguage(language);
> }
Anybody has an idea? Thanks.
Btw, I know how to show an appropriate language nicely via “App Text”. But this is good for the users “logged in”.
Thanks for the quick reply, @keith !
I assumed the plugin is made to get Time and Locale.
Can I use it to detect Language as well?? Let me try it anyway!
No, that’s not the problem. (And apologies: I guess I need to change my demo app for Browser Timezone & Locale. The Timezoner app has become a place where I test a whole bunch of stuff related to my Calendar Grid Pro plugin, which has Locale detection built-in, so I seem to have deleted BT&L from that project.)
The problem is that the Locale code for Japan is “ja”, not “ja-jp”. The one problem with Locales (which are an awesome concept) is that it can be hard to know what the codes are.
You basically need to test in a browser to know what the reported locales are for areas you are interested in.
A little more on Locales:
There is no “language” setting in the browser. Instead, there is this concept of “Locale”. A Locale (while primarily used for language preference detection) represents a broader set of cultural preferences beyond most-common language.
For example, Locale “en-us” (English, US) means (among other things):
The preferred language is English (US-style)
Preferred date format is month/day/year
The first day of the week is Sunday… etc.
In Locale “fr” (France) these are:
The preferred language is French
Preferred date format is day/month/year
The first day of the week is Mondays
The thing that’s a bit confusing is that the Locale attribute is generally set in a browser by selecting a “Language” preference (in Chrome for example), but language is a sub-type of Locale.
If you’re really into int8n and doing a commercial project you might be interested in my Calendar Grid Pro commercial plugin, which is (among many other things) an internationalized date picker/calendar generator. <— shameless plug!!!
Hey @keith and @rio , thanks for the explanation. How can we use the locale (once it’s saved as a state) to select a different language for the app? In settings, you can specify a user’s field to be used for languages, but if the visitor is not logged in (it’s not a user yet), how can we select the strings in English or a different translated language? Thanks a lot!
In my case, I created a different set of language group. Then, I made the group visible only when the browser locale match the group. This is the actual conditions for Sign-up.
One thing that bother me is the loading time. It takes a few seconds to complete displaying the correct language group. Need some experiments here.
Hey @rio! Thanks for sharing how you do it! Although it’s a good option, I see how your approach would impact negatively my app in 2 ways:
Bubble’s editor becomes very heavy and slower when having a lot of hidden groups. In the past, this brought me some problems.
As I want to build some serious SEO, I need the content to be loaded by default on page. Content that is initially hidden (e.g. a text within a hidden div) won’t be captured by Google as text to be taken into account for SEO purposes. The solution would be having visible the English version, at least, and then based on the locale, you hide it (and show other divs with the right language) or not.
Indeed the loading time is a bit of a pain. You can read in this post at Crazy Egg, loading speed is usually critical if you want to have a low bounce rate on your website. If that’s not super critical for your business, it’s OK though.
To be honest, I’m still waiting for some improvements in terms of multi-language easiness and SEO friendliness. Sure Bubble will be offering some improvements at this respect (I hope so!).
True, but that, in some cases, can kill the UX, thus conversion. For same examples, this can be perfectly valid, though!
Tip: Even if a visitor is not logged it (so there’s no real user in the User database), you can assign values to that user, as the language/locale. It seems like Bubble creates a virtual user using cookies, which is not saved on the database, but on a virtual table. So you can assign the value of the language without signing up the user (signing up a user without its consent doesn’t seem very GDPR compliant, so just in case! )
)