Setting up the Azure AI Translator

• Create an Azure account if you don't have one already.
• Go to the Azure Portal and create a new resource by clicking on "Create a resource".
• Search for "Translator" and select "Translator Text" service.
• Complete the necessary information such as subscription, resource group, and location.
• Click "Review + create" and then "Create" to deploy the service.
• Once deployed, navigate to the resource and copy the "Key" and "Endpoint" found under the "Keys and Endpoint" section. You will need those for integration.

Setting up Bubble

• Create an account on Bubble (bubble.io).
• Start a new project or open an existing one.
• Navigate to the Plugins tab on the left sidebar and click "Add plugins".
• Search for and install the "API Connector" plugin.

Configuring Bubble API Connector

• After installing the API Connector, access it from the Plugins tab.
• Click "Add another API" and give it a name, for example, "Azure Translator".
• Click "Add a call" to set up your API call.
• Configure the API call with the following details:
• Method: POST
• Use as: Action
• URL: Paste the endpoint URL you obtained from Azure Translator. It should look something like: https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=YOUR_TARGET_LANGUAGE\_CODE
• Headers:
  • Content-Type : application/json
  • Ocp-Apim-Subscription-Key : YOUR_AZURE_TRANSLATOR\_KEY
• Body: Choose "JSON" and add the following code snippet:

        
        [
          {
            "text": ""
          }
        ]
        
        

  Replace <YOUR_TEXT_VARIABLE> with the dynamic variable you'll be sending from Bubble.
• Click "Initialize call" to test the API. You should see a response if everything is configured correctly.
• Save your changes.

Implementing the API Call in Your Bubble App

• Go to the Design tab to start placing elements into your Bubble UI.
• Add an input box for the user to enter text that needs translation.
• Add a button to trigger the translation API call.
• Add a text element to display the translated result.
• Go to the Workflow tab to create a new workflow for the button click.
• In the workflow editor, select "Plugins" > "Azure Translator - your API name".
• Configure the API call with the input text field's value.
• Store the API call response in a state or directly set it to the text element you've added.
• Preview your Bubble app to ensure everything works as expected.

By following these steps, you will have seamlessly integrated Bubble with the Azure AI Translator, enabling text translation through a simple interface on your Bubble application.