Adding a translation button to translate page

Need help
1

Hello,

Is there a way I could translate my website without using any plugin or API?

I want to add a button and have 2 options of languages. English and Arabic and based on what the user chooses, the website gets translated to that.

The reason why I dont want to use plugins, is because most plugins don’t really translate arabic properly, so I want to manually word the website, at least static things and some dynamic options.

Thanks

2

You don’t need any plugins or APIs for this — Bubble has built-in support for manual translations using App Texts. Here’s how you can set up English and Arabic, and let users switch between them with a button:

1. Add your languages

  • Go to Settings > Languages.
  • Add English and Arabic as supported languages.

2. Set up your translatable texts

  • Still in Settings > Languages, switch to the App texts tab.
  • For each static text you want to translate (like button labels, headings, etc.), create a new text key.
  • Enter the English version in the default column, and the Arabic version in the Arabic column.

3. Use App Texts in your design

  • Wherever you have static text on your pages, replace it with a dynamic expression: Insert dynamic data > Get an app text > pick your key.
  • This way, Bubble will automatically show the right translation based on the user’s language.

4. Let users pick their language

  • Add a button or dropdown for language selection.
  • When the user picks a language, run a workflow:
  • Action: Data (Things) > Make changes to current user
  • Field: Language → set to English or Arabic (the exact value must match the language code in Settings > Languages, e.g., “en_US” or “ar_SA”).
  • If you don’t want to require login, you can also use the URL parameter method:
  • When the user clicks a language, navigate to the same page with ?lang=en_US or ?lang=ar_SA in the URL.
  • Bubble will use this to override the language for that session.

5. For dynamic content

  • If you have dynamic content (like blog posts) that needs to be in both languages, you’ll need to add separate fields for each language in your database (e.g., Title EN, Title AR), and show the right one based on the current language.

6. RTL layout for Arabic

  • Bubble will swap the text, but it won’t flip your layout for right-to-left automatically. You’ll need to add custom CSS to handle RTL layouts if you want the whole UI to flip.

Summary:
You can do all your translations manually, no plugins needed. Use App Texts for static stuff, and database fields for dynamic content. Let users pick their language with a button that sets the language field or URL param. For Arabic, add custom CSS for RTL if you want the layout to flip.

If you want step-by-step on any part (like the CSS for RTL), let me know which part you want more detail on.