Localize Translations
How to offer clients multi-language controls over their app
Clients often want to support multiple languages with their app, so that users can toggle to their native language and see translated content.
Bubble has native support for this (manual here), built on top of the Localize tool. However, there are some challenges to using this approach with our client apps:
- We have to make every text across the app dynamic using the "App text" phrase, and setting the text in the Language tab. This slows down our development vs. hard coding terms.
- We need to provide the client with a spreadsheet of all terms, get their translations back in all languages, and then upload those ourselves. This means we need to be involved in the process or have the client use the Bubble editor
- The approach doesn't work with our homepage builder tool, since we can't insert dynamic App text references there and don't allow clients to submit multiple language entries for their templates. This means lots of extra work to build that in or restrict the homepage to one language.
In the past this meant we need to charge a lot and take a lot of time to support multiple languages. We no longer recommend this approach.
The better approach is usually to use Localize directly. This is something we can offer to clients for free, and it gives them both automatic translations by default and full control over manual translations if they choose.
You can find some guidance on the approach on Localize's website here. Below are the quick steps to get it up and running in 10 mins:
- 1.First, create an account using localizejs.com (you can pass credentials afterward). Note that you get a free 30-day trial, and afterward the client will need to pay monthly for the service (plans here -- the $50/mo starter plan supports default + 2 languages).
- 2.Create a project in Localize and give it a name to match your app
- 3.Add the Bubble plugin for Localize.js (free) to your app, and paste the "Project key" from the "Project overview" tab in your Localize dashboard into the input in the Bubble plugin
- 4.From the Localize "Languages" tab, add the languages you want to support (English is by default the main language, not counted in language count)
- 5.From the Localize "Widget" tab, you can enable the Localize-branded widget on your app, which lets users toggle their language (you can choose position and colors). This is easiest, but you can also use Bubble workflows to set the app language (this is something we'd charge capacity for).
- 6.From the Localize "Settings" tab, you can add the app URL and check the box for "Order machine translations" (Google is probably a good default). This will automatically translate each phrase by default (the client can manually override with their own phrase).
At this point, your app should be set up for the client. But it's not translated yet -- the client has some more work to do to get things across the line.
The way the system works is that whenever someone loads a page of the app, Localize will find different "phrases" on that page and log them in the master list of phrases for your app. This is everything from "Save" on a button to "Welcome to AirDev!" in a text box. The system only reads these when pages are loaded, so in order to build up the list to have full coverage, someone needs to navigate all parts of the website. You should instruct the client to do this and then click on the "Phrases" section of their Localize dashboard to review.
All phrases will show up as "Pending" to start -- Localize requires someone to approve translations before they will show up on the app (this is important since there may be some user-generated content or names that you don't want to translate). If you have set up machine translations (#6 above), each phrase will automatically have a default translation in it.
The client can click check boxes next to approved phrases, or click the checkbox at the top of the list in order to bulk approve all phrases. The client can also choose to edit the translated phrase manually before approving. Approved phrases go to the "Published" bucket and are live -- if you go to the app and select a different language, all approved phrases will translate!
