Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Language Switcher in Bubble.io without Weglot

Learn how to easily add a language switcher to your Bubble.io app without the need for third-party services like Weglot, using the built-in language capabilities of Bubble.

Adding a Language Switcher in Bubble App

Here's a really quick bubble tutorial about how to add a language switcher into your bubble app.

Bubble's Built-in Language Switching

First of all, did you know that Bubble has actually got language and language switching capabilities built in? You don't need to use a third party service like Weglot in order to achieve a language switcher.

Setting Up Language Field

So let me show you what I've got in here to begin with. First of all, if I go into settings, I have got under the language tabs, I've basically created a field and use it. It's just a text field and I've called it language.

Default Language and Toggle Option

I then have got a default language and I can toggle between different languages here. So for example, if I want to go to Spanish, I toggle to Spanish.

Adding Language Text

I've then created some text and I've given it the label register. Now, on design, when I come to printing that text, if I redo it here, I go for app text and then I choose my label register. And that just means it's basically a placeholder. And whatever the user's language is, it will put the right language in place there.

Considerations for Translation

Now, I should say, having said that, you don't need to use a service like Weglot if you are planning to manually do your translation so that they're all perfect, then yeah, bubble's got this built in. But if you want an automated translation service, then yeah, I'd go with a third party to do that.

Using Language Codes for Dropdown Menu

Then if we look at my drop down, I've got these codes here, and these codes each represent a language. And that's of course because English doesn't just come in English. Us, as someone in Britain, as a british person, I would speak, actually always frustrating as someone in Britain filling in drop down menus on the Internet, trying to look for what people call your country. And then I'm also binding that to language. So basically when a new drop down option is selected, it changes it.

Important Considerations for Code Match

And if I just go into the documentation, the important thing here is that you use an option set or text. I'm using text in this instance, and bubble needs an exact match on that two letter, underscore two letter code in order to work. So that's why in this demo I've got them written out like this.

Testing Language Switcher

So let me give you an example. So I go to French nothing happens. But if I refresh the page, I now get it in French. And if I change it to Spanish and refresh the page and I get it in Spanish.

Latest videos

menu