Best way to go about multiple languages

Need help App Organization
1

I was wondering how you guys think multi-language functionality is best implemented on Bubble. I want to offer two languages to my users, and the way I see it there are two main options:

Different pages for different users
This would mean a separate page for Language A and a separate page for language B. No conditionals required, but you end up having more pages. Would having more pages (probably around 35 in the end) slow the app down?

Conditionals
Another option is working with single pages, which have conditionals for all the elements. Therefore, if user’s language is A, the text element will show text AAA. If user’s language is B, then the element will show BBB. It is with this option that I’m really worried about the speed, because I have quite some elements on each page, and almost all of these elements will have multiple conditionals (not just the languages, but sometimes a count of items).

Both options would work equally well for my visitors in terms of ease of use. They don’t need to be able to switch quickly between languages, so the speedy use of conditionals doesn’t really offer an advantage compared to loading a new page. What do you think? Your ideas are greatly appreciated!

2 Likes
2

Hi,
I have similar needs, have you been working on a solution ?
Tks

3

Me too! I’m trying to create a portal that supports multiple languages, and the easier solution I find right now is making the user decide beforehand, and they either go through the English or Spanish flow, however, this isn’t very user-friendly.

What would be the best way for them to be able to choose at any moment in the portal (i.e. a basic language toggle)?

4

@tggrandia - welcome to Bubble. I have a few LearnTo tutorials that cover languages/localization.

There are two go-to methods for setting a language in the application:

  • A URL parameter (better for temporary, ex. visiting a marketing site)
  • Setting a language field on the user (ie. saving a language preference directly on the user)

Most readily, this tutorial video walks you through a toggle-based approach using URL parameters.

The basic concepts at play are a mix of URL parameters and conditional states. When you update the parameter in the URL, you have different state-based values for the text to show either the English version or Spanish version.

As well, when you have a defined language (either in a URL parameter or saved on the user), Bubble will automatically apply the alerts (ex. passwords don’t match), in the specified language.

Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)

2 Likes
5

Like the meme, says, why not both? One’s pages can essentially “default” to keying off of a previously-set user preference, but, if a language parameter is used in the URL (or say a handy dropdown is changed), the page elements can easily just display in that language.

The real issue is if one wants to enable a multi-lingual experience via essentially duplicating pages (this seems dumb to me in any but the simplest of sites) versus creating the equivalent of Bubble’s “app data” feature (data types representing translations of various interface components, including longer form content like descriptive text on landing pages, product info pages, etc.).

But if you do go the latter route, it’s quite easy to modify one’s pages to display as follows:

(1) current user has no language preference (display default language components as the page was originally designed.

(2) current user has some language preference set (display components in that target language, likely via a conditional on all translated elements)

(3) if a language keyword appears in the URL, override #2 and force the URL’s target language

(4) if an interface component allows language selection and user has used it, override all of the above.

This can all be accomplished in Bubble without anything like coding simply by the order of conditions from top to bottom.

Here’s an example of a page that basically does exactly what I describe above:

Visited from the link above, we get a calendar with default US English language components. But there is also a language selector dropdown. Changing it changes the language in the calendar to whatever is selected.

If we want to override the default language and force the page to start in German we can pass a lang parameter with value “de”:

This isn’t a very elaborate example as the page doesn’t have a lot of text on it, but you get the idea.

UPDATE: I recently published a free plugin, “Browser Timezone and Locale” that can be used to get Locale strings (like “en-US”, etc.) from the visitor’s browser — giving an automatic way to detect language preference.

5 Likes
6

Hi @dan1 thanks for your tutorial on using URL parameters. I have a follow-up question: your approach focuses on one page in the application, can we apply this approach to be valid for all pages in the app. Having the language toggle in a reusable header element? Thanks for your help.

7

Other than using Bubble’s native functionality to provide multiple languages in your app, which I recommend, this is another alternative that could be useful to some folks:

4 Likes