Language Switcher in Bubble.io without Weglot

Introduction to Bubble's Built-in Language Switching Capabilities

Here's a really quick Bubble tutorial about how to add a language switcher into your Bubble app. 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. But before I launch into it, if you're learning Bubble, there's no better place to go than planetnocode.com where you can access all of our Bubble tutorial videos, literally hundreds of videos to help accelerate your Bubble app development.

Setting Up Language Options in Bubble

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 used it. It's just a text field and I've called it "language". 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. I've then created some text and I've given it the label "register".

Implementing Dynamic Text Translation

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. 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.

Creating a Language Dropdown

Then if we look at my dropdown, 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 English, "en/gb" or "en/uk". Don't ask why. Ah, yeah. Always frustrating as someone in Britain filling in dropdown menus on the internet, trying to look for what people call your country.

Binding Language Selection to User Preference

And then I'm autobinding that to language. So basically when a new dropdown option is selected, it changes it. And if I just go into the documentation, the important thing here is that you use a 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.

Demonstrating Language Switching

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. So that is the immensely easy and quick way to add a language switcher into your Bubble app.