How to build a language translation system in Bubble.io: Step-by-Step Guide

Go to the Data tab and click New type. Create a data type called Content with fields: key (text, a unique identifier like homepage_hero_title), default_text (text, the original language content). Then create a second data type called Translation with fields: content (type: Content), language_code (text, e.g., es, fr, de), translated_text (text), and is_approved (yes/no). This separates your source content from its translations and supports unlimited languages.

Go to the Design tab and create a new page called admin-translations. Add a Repeating Group with data source Do a search for Contents. In each cell, display the Content's key and default_text. Add a Dropdown for target language populated with an Option Set called Languages (with options like en, es, fr, de, ja). Add a Translate button in each cell. Below the default text, add a Text element to show the existing translation if one exists: Search for Translations (content = Current cell's Content, language_code = Dropdown's value):first item's translated_text.

Go to the Workflow tab. Create a workflow: When Button Translate is clicked. First, check for an existing translation: Do a search for Translations (content = Current cell's Content, language_code = Dropdown Language's value). Add the API call action with Only when the search count is 0: call your translation API with q = Current cell's Content's default_text and target = Dropdown Language's value. Then Create a new Translation with content = Current cell's Content, language_code = Dropdown's value, translated_text = Result of API step's translatedText, and is_approved = no.

In the Repeating Group cell on the admin page, add a Multiline Input pre-filled with the existing translation text. Add an Approve button next to it. Create a workflow: When Button Approve is clicked — Make changes to the Translation (search for the matching Translation record), set translated_text = Multiline Input's value and is_approved = yes. This lets translators review and correct machine translations before they go live.

On your public-facing pages, add a Dropdown or set of flag icons in the header. When the user selects a language, set a Custom State on the page called current_language (type: text) to the selected language code. Alternatively, use a URL parameter called lang so the language persists across page navigation. For each text element that needs translation, set its content to: Search for Translations (content = [the Content entry for this element], language_code = Page's current_language, is_approved = yes):first item's translated_text. Add a fallback: if empty, show the Content's default_text.

Go to the Workflow tab and access Backend workflows from the Pages dropdown. Create a backend workflow called bulk_translate with parameters content_id (text) and target_lang (text). In it, look up the Content by ID, call the translation API, and save the result. Then create a frontend workflow that loops through all Content records: use Schedule API workflow on a list with the list of Content IDs and the target language. This lets you translate all content to a new language in one click.