RapidAPI

Open rapidapi.com and log in. In the search bar at the top, type the type of API you need — for example, 'weather', 'email validation', 'stock prices', or 'AI text generation'. Browse the results and click on an API that has an active free tier (most do). On the API's detail page, click the **Pricing** tab to confirm there is a free tier and see the monthly request limit. Free tiers typically range from 500 to 1,000 requests per month — sufficient for testing and low-traffic Bubble apps. Click **Subscribe to Test** (or **Subscribe** on the Pricing tab) for the free tier. RapidAPI will confirm your subscription. Now click the **Endpoints** tab on the API's page. You will see a list of available endpoints with interactive request builders. Pick a simple GET endpoint to test — for WeatherAPI, this would be the `/current.json` endpoint. In the right panel, find the **Code Snippets** section. Click the language dropdown and select **(Node.js) Fetch** — this gives you the exact headers, base URL, and endpoint path in a format that is easy to copy into Bubble's API Connector. Keep this browser tab open; you will reference it in Step 3. Finally, click your profile icon → **Apps** → click your default app. Copy the `X-RapidAPI-Key` value shown in the Authorization section. This is the same key for all APIs you subscribe to on RapidAPI.

Open your Bubble app editor. Click **Plugins** in the left sidebar. If you see the API Connector plugin already listed, you can skip to Step 3. If not, click **Add plugins** in the top-right corner of the Plugins tab. In the plugin search box, type **API Connector**. The plugin published by **Bubble** (not a third-party) will appear at the top — click **Install**. The API Connector plugin is free, officially maintained by Bubble, and is the standard way to connect any external REST API to your Bubble app. Once installed, it appears in your Plugins tab and adds a Plugins section to your workflow editor where API calls appear as actions. After installation, click the API Connector plugin row to open its settings panel. You will see an **Add another API** button — this is where you set up each RapidAPI integration. You will create one API group per RapidAPI-listed API that you use (one for weather, one for email validation, etc.).

Click **Add another API** in the API Connector settings. In the **API Name** field, enter something descriptive like **WeatherAPI via RapidAPI** (or whichever API you subscribed to). In the **Base URL** field, paste the base URL from the RapidAPI code snippet. For WeatherAPI, it is `https://weatherapi-com.p.rapidapi.com`. For a sports API it might be `https://api-nba-v1.p.rapidapi.com`. The base URL is the part before the endpoint path (before the first `/`). Now add the two required shared headers. Click **Add a shared header** twice: **Header 1:** - Key: `X-RapidAPI-Key` - Value: paste your key copied from the RapidAPI dashboard - Tick the **Private** checkbox — this is essential. The Private flag prevents this key from appearing in any browser-side network traffic. Never skip this step for a secret key. **Header 2:** - Key: `X-RapidAPI-Host` - Value: the API slug hostname from the RapidAPI code snippet (e.g., `weatherapi-com.p.rapidapi.com`) - The `X-RapidAPI-Host` header does NOT need to be Private — it is not a secret, just a routing header. But ticking Private on it does no harm. Double-check: your `X-RapidAPI-Key` has the Private checkbox ticked. If it does not, any Bubble page that exposes API data client-side could leak the key in a predictable network request. Bubble's server-side architecture already protects it, but the Private flag is the belt-and-suspenders safeguard.

1{
2  "api_group": "WeatherAPI via RapidAPI",
3  "base_url": "https://weatherapi-com.p.rapidapi.com",
4  "shared_headers": [
5    {
6      "key": "X-RapidAPI-Key",
7      "value": "<private>",
8      "private": true
9    },
10    {
11      "key": "X-RapidAPI-Host",
12      "value": "weatherapi-com.p.rapidapi.com",
13      "private": false
14    }
15  ]
16}

Inside your API group, click **Add a call**. Set the HTTP method to **GET** (or POST, matching what the RapidAPI endpoint requires). In the **Path** field, enter the endpoint path from the RapidAPI code snippet — for WeatherAPI's current conditions, this is `/current.json`. Now look at the RapidAPI code snippet for query parameters. For WeatherAPI `/current.json`, the required parameter is `q` (the city or coordinates). In Bubble's API Connector call settings, click **Add parameter** under the Parameters section: - Key: `q` - Value: click the field type dropdown and select **\'Param\'** (not a fixed value) if you want to pass the city dynamically from your Bubble page, OR type a test city like `London` as the initial value for initialisation If the endpoint requires a POST body instead, set the method to POST and click **Body** → add key-value pairs or paste a JSON body matching the RapidAPI endpoint spec. Set **Use as** to **Data** if you want to bind the response to a Repeating Group or page element. Set it to **Action** if this call is triggered by a user button press and you just need to read the result in a subsequent workflow step. For most RapidAPI data-display use-cases (weather, stock prices, sports scores), set **Use as: Data**.

1{
2  "call_name": "Get Current Weather",
3  "method": "GET",
4  "path": "/current.json",
5  "parameters": [
6    {
7      "key": "q",
8      "value": "<dynamic: city name from Bubble input>"
9    }
10  ],
11  "use_as": "Data"
12}

With your call configured, click **Initialize call**. Bubble sends a real HTTP request to the RapidAPI endpoint right now, using the headers and parameters you set. For this to succeed, the parameter values must be real test values — if you left `q` as a placeholder like `<city>`, the API will likely return a 400 error. Replace placeholder values with real test data before initialising. For WeatherAPI, the initialization call with `q=London` returns a JSON object like: ``` { "location": { "name": "London", "country": "UK", ... }, "current": { "temp_c": 14.0, "condition": { "text": "Partly cloudy", ... }, "humidity": 71 } } ``` Bubble reads this response and automatically creates a field mapping. You will see the fields listed in the response mapping panel: `location - name`, `location - country`, `current - temp_c`, `current - condition - text`, etc. If the call returns a 403 error, the `X-RapidAPI-Host` header is missing or incorrect. If it returns a 429, you have hit the rate limit (wait a few minutes and try again, or subscribe to a higher tier). If it returns 'There was an issue setting up your call', the response is empty — make sure your test parameter values are valid real-world data. Once initialized successfully, click the call name and note that Bubble now shows the response type you can use as a Data Source. You are ready to bind this to a page element.

1{
2  "example_response": {
3    "location": {
4      "name": "London",
5      "country": "United Kingdom",
6      "lat": 51.52,
7      "lon": -0.11
8    },
9    "current": {
10      "temp_c": 14.0,
11      "temp_f": 57.2,
12      "condition": {
13        "text": "Partly cloudy",
14        "icon": "//cdn.weatherapi.com/weather/64x64/day/116.png"
15      },
16      "humidity": 71,
17      "wind_kph": 19.8
18    }
19  }
20}

Now wire the API response to your Bubble page. For a weather display, add a **Text** element to your page and click it to open properties. In the **Content** field, click the dynamic data icon and navigate to **Get data from an external API → WeatherAPI via RapidAPI - Get Current Weather**. Pass the city name from a page Input element as the `q` parameter. Then select the field path: `current - temp_c`. The text element will display the temperature in real time when the page loads. For the city Input element → Text element binding to work dynamically, you need to add a workflow. Add a button 'Check Weather'. In the button's workflow, add the step **Plugins → WeatherAPI via RapidAPI - Get Current Weather** and set the `q` parameter to the Input's value. In a second workflow step, use the result of the API call (accessible via `Result of Step 1 - Get Current Weather → current - temp_c`) to store it in a custom state on the page and display it. **Rate-limit caching:** RapidAPI free tiers often cap at 500–1,000 requests per month. For APIs called on every page load, add a simple caching layer: create a Bubble data type called `WeatherCache` with fields `city` (text), `temp_c` (number), `condition` (text), and `last_updated` (date). In the load workflow, first check: `Search for WeatherCache items where city = Input's value AND last_updated > Current date/time - 5 minutes`. If a result exists, display it from the database. If not, call the API, store the result in WeatherCache, then display it. This prevents unnecessary API calls and keeps you well within free-tier limits. RapidDev's team has connected dozens of Bubble apps to RapidAPI across weather, finance, and validation use-cases — if you need help mapping a complex nested response or setting up the caching workflow, book a free scoping call at rapidevelopers.com/contact.