How to Connect External APIs Using API Connector in Bubble

Go to the Plugins tab in your Bubble editor and click on API Connector. Click the 'Add another API' button. Give it a clear name matching the service (e.g., 'OpenWeather API', 'Stripe', 'OpenAI'). Under Authentication, choose the type that matches your API's documentation. For most modern APIs, select 'Private key in header'. Set the Key name to 'Authorization' and the Key value to 'Bearer YOUR_API_KEY' (replacing YOUR_API_KEY with your actual key). Check the 'Private' checkbox next to the key value -- this ensures the key is never sent to the browser and stays server-side only. If the API uses query-string authentication instead, choose 'Private key in URL' and enter the parameter name and value. Click the blue header area to collapse the auth section and save.

Under your new API, click 'Add another call'. Name it descriptively (e.g., 'Get Current Weather'). Select GET as the HTTP method. In the URL field, enter the full endpoint URL. For dynamic path segments, use square brackets: https://api.openweathermap.org/data/2.5/weather?q=[city]&units=metric. Bubble automatically creates a parameter called 'city' from the brackets. You can add more parameters by clicking 'Add parameter' -- useful for optional query strings like limit or page. Set the 'Use as' dropdown to 'Data' if you want to display the response in page elements (like a Text or Repeating Group), or 'Action' if you will call it from a workflow. For fetching and displaying data, Data is almost always the right choice. Leave Data type as JSON.

Click 'Add another call' again. Name it (e.g., 'Create Contact'). Select POST as the method. Enter the endpoint URL. Under Headers, add a new header: Key = 'Content-Type', Value = 'application/json'. In the Body section, toggle to 'Raw' and construct a JSON payload with dynamic parameters in square brackets. For example: {"name": "[contact_name]", "email": "[contact_email]", "phone": "[phone_number]"}. Bubble creates a parameter for each bracketed value. Make sure 'Querystring' is unchecked for body parameters (checked = sent as URL query string, unchecked = sent in the request body). Set 'Use as' to 'Action' since POST requests are typically triggered by user actions like button clicks. If any parameter contains sensitive data, check its 'Private' box.

This is the most important step. For each call, enter real test values in the parameter fields. For the GET weather call, type an actual city name like 'London'. For the POST contact call, enter sample values like 'Jane Doe' and 'jane@example.com'. Click the 'Initialize call' button. Bubble sends the actual HTTP request to the API and displays the JSON response. If initialization succeeds, you see a green checkmark and Bubble lists every field from the response (e.g., temp, humidity, description for a weather API). Click 'Save' to lock in this response mapping. If initialization fails, check these common causes: 401 Unauthorized means your API key is wrong or expired. 404 Not Found means the URL or endpoint path is incorrect. 422 Unprocessable Entity means a required parameter is missing or malformed. 500 Internal Server Error means the external API itself is having issues -- try again later.

Go to the Design tab and navigate to the page where you want to display API data. Select any element (Text, Image, Repeating Group) and set its data source. Click 'Insert dynamic data' and choose 'Get data from an external API'. Select your API and the specific GET call (e.g., 'Get Current Weather'). Fill in the dynamic parameters -- for example, set city to an Input element's value on the same page. Once connected, the response fields appear as options. For a Text element, you might select 'Get Current Weather's main's temp' to show the temperature. For a Repeating Group, set the type to the API response type and use the list fields from the response. The API call runs automatically whenever the parameters change, so updating the city input instantly fetches new weather data.

Go to a page with a form (e.g., a contact creation form with name, email, and phone inputs). Add a workflow on the Submit button click. In the workflow, add an action: Plugins → your API name → Create Contact (your POST call name). Map each parameter to the corresponding input field: contact_name = Name Input's value, contact_email = Email Input's value, phone_number = Phone Input's value. After the API action step, you can reference 'Result of step 1' to access the response data (e.g., the new contact's ID returned by the API). Add a subsequent step to show a success message or navigate to another page. For error handling, consider using the API Connector's 'Capture response headers' option and checking the status code in a conditional. If the response indicates an error, display a user-friendly alert instead of proceeding.