How to set up API calls with Google's translation service in Bubble.io: Step-by-

Go to console.cloud.google.com and create a new project or select an existing one. Navigate to APIs & Services → Library. Search for Cloud Translation API and click Enable. Then go to APIs & Services → Credentials. Click Create Credentials → API key. Copy the generated API key. For security, click Restrict Key and limit it to the Cloud Translation API only. Note: Google charges approximately $20 per million characters translated.

In your Bubble editor, go to the Plugins tab and open the API Connector. Click Add another API and name it Google Translate. Add a new call named Translate Text. Set the method to POST. Set the URL to https://translation.googleapis.com/language/translate/v2?key=[api_key]. Add a parameter api_key marked as Private (so it stays server-side). For the body, set it to JSON and enter the request body with dynamic parameters for the text to translate, target language, and optional source language.

1POST https://translation.googleapis.com/language/translate/v2?key=[api_key]
2
3Headers:
4  Content-Type: application/json
5
6Body (JSON):
7{
8  "q": "[text_to_translate]",
9  "target": "[target_language]",
10  "source": "[source_language]",
11  "format": "text"
12}
13
14Sample Response:
15{
16  "data": {
17    "translations": [
18      {
19        "translatedText": "Bonjour le monde",
20        "detectedSourceLanguage": "en"
21      }
22    ]
23  }
24}

In the API Connector, set the parameter values for initialization: api_key to your Google Cloud API key, text_to_translate to Hello world, target_language to fr (French), and source_language to en (English). Click Initialize call. Bubble will send the request and display the response structure. You should see data → translations → translatedText with the value Bonjour le monde. Click Save after successful initialization. Set the call's Use as setting to Action (so you can call it from workflows).

On a new or existing page, add the following elements: a Multiline Input for the source text, a Dropdown for the source language (with Option Set values like en-English, fr-French, es-Spanish, de-German, etc.), a Dropdown for the target language (same options), a Translate Button, and a Text element or Multiline Input (read-only) for displaying the translated result. Add a Custom State on the page called translated_text (type text) to store the translation result.

Go to the Workflow tab and create a workflow for When Button Translate is clicked. Add the action Plugins → Google Translate - Translate Text. Set text_to_translate to Multiline Input Source's value, target_language to Dropdown Target Language's value (the language code like fr or es), and source_language to Dropdown Source Language's value. After the API call, add Set state of page with translated_text = Result of step 1's data translations first item translatedText. Then set the output Text element's data source to the page's translated_text custom state.

Create a second API call in the API Connector named Detect Language. Set the method to POST and the URL to https://translation.googleapis.com/language/translate/v2/detect?key=[api_key]. The body should be {"q": "[text_to_detect]"}. Initialize it with sample text. On your page, add a Detect Language button. Create a workflow that calls this API, reads the response's language code, and automatically sets the Source Language dropdown to the detected language. This is a great convenience feature for users who do not know the source language.

1POST https://translation.googleapis.com/language/translate/v2/detect?key=[api_key]
2
3Body:
4{
5  "q": "[text_to_detect]"
6}
7
8Response:
9{
10  "data": {
11    "detections": [
12      [
13        {
14          "language": "en",
15          "confidence": 1.0
16        }
17      ]
18    ]
19  }
20}