Bubble's built-in language feature under Settings lets you add translations for static text, while dynamic content requires a translation Data Type and user language detection. This tutorial shows you how to set up multilingual support for help articles, auto-detect user language, and route support requests to the right agents.
Overview: Multilingual Support in Bubble
This tutorial walks you through building multilingual support into your Bubble app. You will learn how to translate static UI text using Bubble's Languages feature, create a database-driven translation system for dynamic content like help articles, detect user language preferences, and route support requests to agents who speak the right language. This guide is ideal for non-technical founders building apps that serve international audiences.
Prerequisites
- A Bubble account with an existing app
- Basic understanding of Bubble's Data tab and Data Types
- Familiarity with Bubble's Workflow tab
- Content translated into your target languages (or a translation service ready)
Step-by-step guide
Enable the built-in Languages feature for static text
Enable the built-in Languages feature for static text
Open your Bubble editor and go to Settings in the left sidebar. Click the Languages tab. Click Add a new language and select each language you want to support (for example, Spanish, French, German). Bubble will generate a list of every static text string in your app. For each language row, click the empty field and type the translated version. This covers button labels, placeholder text, and error messages. You can also export the language CSV, send it to a translator, and re-import the completed file.
Pro tip: Use the CSV export/import workflow to handle large translation batches efficiently rather than typing each one manually.
Expected result: Your app has additional languages configured in Settings with translations for all static text elements.
Create a Translation Data Type for dynamic content
Create a Translation Data Type for dynamic content
Go to the Data tab and click Data types. Create a new Data Type called Translation with the following fields: key (text) — a unique identifier like 'help_article_billing', language_code (text) — such as 'en', 'es', 'fr', translated_text (text) — the actual content, and content_type (text) — such as 'help_article', 'faq', or 'email_template'. This structure lets you store and retrieve translated versions of dynamic content like help articles and support responses.
Expected result: A Translation Data Type appears in your Data tab with fields for key, language_code, translated_text, and content_type.
Add a language preference field to the User Data Type
Add a language preference field to the User Data Type
In the Data tab, click on the User Data Type. Add a new field called preferred_language with type text. Set a default value of 'en' (or your primary language). Then go to the Design tab and create a dropdown element on your settings or profile page. Set the dropdown choices to your supported languages (English, Spanish, French, etc.). Create a workflow: when the dropdown value changes, use Make changes to Current User and set preferred_language to the dropdown's value.
Pro tip: Use an Option Set called Supported Languages with attributes for language_code and display_name for a cleaner dropdown implementation.
Expected result: Users can select their preferred language from a dropdown, and the choice is saved to their User record.
Auto-detect user language on first visit
Auto-detect user language on first visit
Go to the Workflow tab and create a new workflow with the event Page is loaded. Add an Only when condition: Current User's preferred_language is empty. Add a Plugin action using the Detect Language plugin (search for it in the Plugins tab and install it) or use a free IP geolocation API via the API Connector to detect the user's country. Then add a Make changes to Current User action, setting preferred_language to the detected language code. This ensures first-time visitors see content in their likely language automatically.
Expected result: New users automatically get a language preference assigned based on their browser or location, without manual selection.
Display translated content using dynamic expressions
Display translated content using dynamic expressions
On any page where you display dynamic content (like help articles), replace static text elements with dynamic ones. Set the text source to Do a Search for Translation where key = the article key AND language_code = Current User's preferred_language, then use :first item's translated_text. If no translation exists, add a default value by using the :default operator with the English version. For Repeating Groups displaying lists of articles, add the language_code constraint to the data source search.
Pro tip: Create a reusable element for translated text blocks so you do not have to rebuild the search logic on every page.
Expected result: Help articles and dynamic content display in the user's preferred language, with English as a fallback.
Route support requests to language-appropriate agents
Route support requests to language-appropriate agents
Create a Data Type called Support Agent with fields: name (text), email (text), languages_supported (list of text), and is_available (yes/no). When a user submits a support request, add a backend workflow that searches for a Support Agent where languages_supported contains Current User's preferred_language AND is_available is yes. Use the :first item result to assign the ticket. Add the Send Email action to notify the matched agent. If no agent is found for that language, fall back to a default English-speaking agent.
Expected result: Support requests are automatically assigned to an agent who speaks the user's preferred language.
Complete working example
1MULTILINGUAL SUPPORT WORKFLOW SUMMARY2=====================================34DATA TYPES:5 Translation6 - key (text): unique content identifier7 - language_code (text): 'en', 'es', 'fr', etc.8 - translated_text (text): translated content9 - content_type (text): 'help_article', 'faq', 'email'1011 User (modified)12 - preferred_language (text): default 'en'1314 Support Agent15 - name (text)16 - email (text)17 - languages_supported (list of text)18 - is_available (yes/no)1920WORKFLOWS:21 Page Load — Auto-detect language22 Event: Page is loaded23 Only when: Current User's preferred_language is empty24 Action 1: Detect user language (plugin or API)25 Action 2: Make changes to Current User26 → preferred_language = detected language code2728 Dropdown Change — Manual language selection29 Event: Dropdown Language's value is changed30 Action: Make changes to Current User31 → preferred_language = Dropdown Language's value3233 Support Ticket — Route to agent34 Event: Button Submit Ticket is clicked35 Action 1: Create a new Ticket36 → user = Current User37 → language = Current User's preferred_language38 Action 2: Schedule Backend Workflow 'assign-agent'39 → ticket = Result of step 14041 Backend Workflow: assign-agent42 Action 1: Search for Support Agents43 → languages_supported contains ticket's language44 → is_available = yes45 Action 2: Make changes to Ticket46 → assigned_agent = Result of step 1:first item47 Action 3: Send Email to assigned agent4849DYNAMIC CONTENT DISPLAY:50 Text element data source:51 Do a Search for Translation52 → key = 'article_billing'53 → language_code = Current User's preferred_language54 :first item's translated_text55 :default = English fallback textCommon mistakes when creating multilingual support in Bubble.io: Step-by-Step Guide
Why it's a problem: Only translating static text and forgetting dynamic database content
How to avoid: Create a Translation Data Type to store translated versions of all dynamic content and filter by the user's preferred language
Why it's a problem: Hardcoding language strings instead of using an Option Set
How to avoid: Create a Supported Languages Option Set with language_code and display_name attributes, then reference it everywhere
Why it's a problem: Not providing a fallback language when translations are missing
How to avoid: Always use the :default operator or an OR condition to fall back to English when a translation search returns empty
Best practices
- Use Bubble's built-in Languages feature for all static UI text like buttons, labels, and error messages
- Store dynamic content translations in a dedicated Translation Data Type with key and language_code fields
- Create a Supported Languages Option Set to maintain a single source of truth for available languages
- Always provide English as a fallback language when translations are missing
- Use CSV export/import in the Languages tab to manage large-scale translation projects efficiently
- Test your app in each supported language to verify layouts handle longer text strings gracefully
- Add the language preference selector to a visible location like the header or footer for easy switching
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Bubble app that needs to support English, Spanish, and French. I have help articles stored as database records. Can you help me design a data structure and workflow for displaying content in the user's preferred language with automatic language detection?
Help me add multilingual support to my app. I need to translate my help articles into Spanish and French, detect the user's language automatically, and route support tickets to agents who speak that language.
Frequently asked questions
Does Bubble have built-in multilingual support?
Yes. Bubble has a Languages feature under Settings that lets you add translations for static text like button labels and error messages. However, dynamic content stored in your database needs a separate translation system using Data Types.
How do I translate dynamic database content in Bubble?
Create a Translation Data Type with fields for a unique key, language code, and translated text. When displaying content, search for the Translation where the key matches and the language code matches the user's preference.
Can I auto-detect a user's language in Bubble?
Yes. Use a browser language detection plugin from the Bubble marketplace, or call a geolocation API via the API Connector to detect the user's country and infer their language on first visit.
How many languages can I add to a Bubble app?
There is no hard limit on the number of languages in Bubble's Languages feature. You can add as many as you need, though managing translations becomes more complex with each additional language.
Will translations affect my app's performance?
Static text translations through the Languages feature have no performance impact. Database-driven translations add one search per displayed text block, so use caching strategies like storing results in custom states for frequently accessed pages.
Can RapidDev help set up multilingual support for complex apps?
Yes. RapidDev can help design and implement a scalable multilingual architecture including translation management dashboards, automated translation API integrations, and language-based routing for support workflows.
How do I handle right-to-left languages like Arabic or Hebrew?
Bubble does not have native RTL support. You can use conditional formatting to change text alignment and layout direction based on the user's language, or inject custom CSS via an HTML element to apply RTL styles.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation