Bubble Multi-Language App Build
UI translation, full content translation, and right-to-left language support for Arabic and Urdu — the complete guide to building multi-language Bubble apps that open new markets without building new products.
Why Multi-Language Support Opens New Markets Overnight
English-only SaaS products serve roughly 20% of the global internet population. Adding Arabic, French, Spanish, or Urdu to your Bubble app does not just add users — it doubles or triples your total addressable market with a fraction of the engineering effort of building a new product. This guide covers the two approaches to multi-language support in Bubble, the data model for each, and how to handle right-to-left languages like Arabic and Urdu.
Static Translation vs. Dynamic Content in Multiple Languages
What it covers: All button labels, navigation items, form placeholders, error messages, and static text are translated. User-generated content (the data your customers create) stays in whatever language they type it in.
How to build it: Create a Translation data type with one record per phrase per language. On page load, load all translations for the selected language into custom states. Every text element reads from the translation state instead of hardcoded text.
Best for: Apps where users create their own content (CRMs, project tools, SaaS dashboards). The app chrome speaks their language; their data stays as they enter it.
What it covers: Both UI text AND content data types have language-specific fields. A product description has an en field, an ar field, and a fr field. The page displays whichever matches the user’s selected language.
How to build it: Add language-specific fields to every data type that contains user-readable content. A content management system, e-commerce platform, or multi-language course platform needs this approach.
Best for: Content-heavy products (course platforms, CMS tools, e-commerce) where the actual content itself must be in the user’s language.
Building the Translation System
Translation:
key → text (e.g. “nav_dashboard”, “btn_save”, “error_required”)
language → option set (EN, AR, FR, ES, UR)
value → text (the translated string)
// User language preference
User:
preferred_language → Language (option set, default EN)
// On page load: fetch all translations for selected language
Page load workflow:
Set state “translations” =
Search for Translations [language = Current User’s preferred_language]
// Text elements: read from translation state
Button label:
translations state : filtered by key = “btn_save” : first item’s value
// Fallback to English if translation missing
: default “Save”
Right-to-Left (RTL) Language Support
// Apply RTL direction dynamically via Toolbox JS on page load
Only when: preferred_language is in [AR, UR]:
Run JavaScript: document.dir = “rtl”
Run JavaScript: document.body.style.fontFamily = “Noto Sans Arabic, sans-serif”
// Add Arabic/Urdu font to your Google Fonts link in page header
Noto Sans Arabic — covers Arabic and Urdu scripts
Noto Nastaliq Urdu — for traditional Urdu typography
// RTL-aware layout tips
// – Use “flex-direction: row-reverse” for horizontal layouts in RTL
// – Icons that indicate direction (arrows, chevrons) need to mirror
// – Text alignment switches from left to right automatically with dir=rtl
Launch With Two Languages, Not Ten
The urge to add every language at once leads to poor translations in all of them. Launch with English and one additional language that represents your highest-priority market. Get native speaker review on every string. Add a third language only after the first two are completely translated and verified. Quality in two languages beats mediocrity in ten.
Ready to Build on Bubble?
Data model design, Stripe billing, multi-tenant architecture, and full SaaS builds — done right from day one by Pakistan’s leading Bubble.io team.
