Skip to main content

Translate Your Bubble.io App

Add multilingual support to your Bubble.io application using Langbly's translation API. This guide covers setting up the API Connector, translating dynamic content, and building a language switcher.

Overview​

Bubble.io apps can call external APIs using the API Connector plugin. You'll configure Langbly as an API data source, then use it to translate text anywhere in your app: page content, database fields, user-generated content, or dynamic elements.

Prerequisites​

  • A Bubble.io account (free or paid)
  • A Langbly API key (sign up free, 500K chars/month included)

Step 1: Install the API Connector Plugin​

  1. In your Bubble editor, go to Plugins (left sidebar)
  2. Click Add plugins
  3. Search for API Connector
  4. Click Install (it's a free, official Bubble plugin)

Step 2: Configure the Langbly API​

  1. Go to Plugins → API Connector
  2. Click Add another API
  3. Configure the API:
SettingValue
API NameLangbly
AuthenticationPrivate key in header
Key nameX-API-Key
Key valueYour Langbly API key
  1. Click Add another call and configure:
SettingValue
NameTranslate
MethodPOST
URLhttps://api.langbly.com/language/translate/v2
Body typeJSON
BodySee below

Request Body​

{
  "q": "<text>",
  "target": "<target_lang>",
  "source": "<source_lang>",
  "format": "text"
}

Mark each parameter as dynamic by unchecking "Private" for <text>, <target_lang>, and <source_lang>.

  1. Click Initialize call to test. Use:
    • text: Hello world
    • target_lang: nl
    • source_lang: en

You should see a response with translatedText: "Hallo wereld".

Step 3: Use Translations in Your App​

Option A: Translate on Page Load​

  1. Add a Text element to your page
  2. Set its data source to: Get data from an external API → Langbly - Translate
  3. Configure the parameters:
    • text: The text you want to translate (can be dynamic, e.g., from your database)
    • target_lang: The user's preferred language (e.g., from a custom state or URL parameter)
    • source_lang: en (or leave empty for auto-detect)
  4. Set the element's text to: This Langbly - Translate's data's translations's first item's translatedText

Option B: Translate on Button Click​

  1. Add a Button element
  2. In the workflow, add action: Plugins → Langbly - Translate
  3. Set the parameters dynamically
  4. Store the result in a custom state or display it directly

Option C: Translate Database Content​

  1. Create a workflow triggered by database changes (e.g., new record created)
  2. Call Langbly API with the new content
  3. Store the translated text in a separate field (e.g., title_nl, title_de)

Step 4: Build a Language Switcher​

  1. Add a Dropdown element with language options:

    • English (en)
    • Dutch (nl)
    • German (de)
    • French (fr)
    • Spanish (es)

  2. Store the selected value in a custom state called current_language on the page

  3. Use this state as the target_lang parameter in your API calls

  4. Persist the choice: Save the selected language to the current user's profile so it persists across sessions

URL-Based Language Switching​

Alternatively, use URL parameters:

  • yourapp.com/page?lang=nl
  • Read with: Get data from page URL → parameter lang
  • Default to en if not set

Step 5: Translate HTML Content (Rich Text)​

For Bubble's Rich Text elements:

  1. Create a second API call in the API Connector:
SettingValue
NameTranslateHTML
MethodPOST
URLhttps://api.langbly.com/language/translate/v2
Body{"q": "<html>", "target": "<target_lang>", "format": "html"}
  1. Use this call for Rich Text content. Langbly preserves all HTML tags and attributes.

Performance Tips​

  • Cache translations: Store translated content in your database to avoid re-translating the same text
  • Translate in bulk: If you have multiple texts, combine them into the q array: {"q": ["Hello", "Goodbye"], "target": "nl"}
  • Use source language: Always specify source when you know it, since auto-detection adds a small overhead
  • Static content: For labels and navigation text that don't change, translate once and store the results

Example: Multilingual Blog​

  1. Database: Add title_nl, title_de, body_nl, body_de fields to your Blog Post type
  2. On create: Workflow triggers Langbly API for each target language, stores results
  3. On display: Conditional logic shows title_nl when current_language is nl, etc.
  4. Language switcher: Dropdown in the header, value stored in user profile

Pricing​

PlanPriceCharacters/moTypical Bubble Usage
Free$0500KSmall apps, testing
Starter$19/mo5MMedium apps with dynamic content
Growth$69/mo25MLarge apps, user-generated content
Scale$199/mo100MEnterprise Bubble apps

Troubleshooting​

"API call failed"​

  • Check your API key is correct in the API Connector settings
  • Ensure the key is set as X-API-Key header (not Authorization)
  • Test the call with the Initialize button

Slow translations​

  • Use caching (store translations in your database)
  • Specify the source language instead of auto-detecting
  • Keep individual translation requests under 5,000 characters

Missing translations​

  • Check that your target_lang parameter is a valid ISO 639-1 code
  • Ensure the text parameter isn't empty
  • Look at the API response for error messages

Next Steps​