# How to integrate weather API in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Intermediate
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Integrate a weather API into your Bubble app using the API Connector plugin. Configure authentication with your weather service API key, define a GET call to fetch current conditions or forecasts, initialize the call to map the JSON response, and display weather data dynamically in your app's UI elements.

## Connecting a Weather API to Your Bubble App

This tutorial walks you through integrating a weather API (such as OpenWeatherMap) into your Bubble app using the API Connector plugin. You will learn how to configure API keys securely, define API calls with dynamic parameters like city name, parse the JSON response, and display temperature, conditions, and forecasts in your app. This is ideal for travel apps, event planners, or any project needing real-time weather data.

## Before you start

- A Bubble account with an app open in the editor
- An OpenWeatherMap account (free tier) with an API key
- The API Connector plugin installed (Plugins tab → Add plugins → API Connector)
- Basic understanding of how Bubble data sources work

## Step-by-step guide

### 1. Add a new API in the API Connector plugin

Go to the Plugins tab and click on 'API Connector.' Click 'Add another API' and name it 'WeatherAPI.' Under Authentication, select 'Private key in URL' since OpenWeatherMap passes the key as a query parameter. In the 'Key name' field, type 'appid' and paste your OpenWeatherMap API key in the 'Key value' field. Make sure the key value is marked as Private so it stays server-side.

> Pro tip: Never expose API keys on the client side. The Private checkbox ensures your key routes through Bubble's server and is never visible in the browser.

**Expected result:** A new API called 'WeatherAPI' appears in the API Connector with your API key configured securely.

### 2. Define a GET call for current weather data

Inside your WeatherAPI, click 'Add another call' and name it 'get_current_weather.' Set 'Use as' to 'Data' (so it appears as a data source). Set the method to GET and enter the URL: https://api.openweathermap.org/data/2.5/weather?q=[city]&units=metric. The [city] part in brackets creates a dynamic parameter. In the Parameters section, you will see 'city' listed — give it a test value like 'London' and leave it unchecked for Private (since city names are not sensitive).

```
https://api.openweathermap.org/data/2.5/weather?q=[city]&units=metric
```

**Expected result:** The API call is configured with a dynamic 'city' parameter and the correct endpoint URL.

### 3. Initialize the call to map the response structure

Click the 'Initialize call' button at the bottom of the call configuration. Bubble will send a test request to OpenWeatherMap using your test value ('London') and display the JSON response. Review the returned fields — you should see 'main' (containing temp, humidity), 'weather' (containing description, icon), and 'name' (city name). Bubble automatically maps these fields so you can reference them as data sources. Click 'Save' after reviewing.

> Pro tip: If initialization fails, verify your API key is active (new OpenWeatherMap keys can take up to 2 hours to activate) and that the URL format is correct.

**Expected result:** The JSON response is mapped and available as a Bubble data source, showing fields like temp, humidity, description, and city name.

### 4. Display weather data on your page using dynamic data sources

Go to the Design tab and create a new group on your page. Set the group's Type of content to 'get_current_weather' and its Data source to 'Get data from an external API → WeatherAPI - get_current_weather.' For the city parameter, use an Input element's value or a URL parameter. Inside the group, add Text elements and use 'Insert dynamic data' to display: Parent group's get_current_weather's main's temp for temperature, Parent group's get_current_weather's weather's first item's description for conditions.

**Expected result:** Your page displays live weather data (temperature, conditions) pulled from the API for the specified city.

### 5. Add a search input so users can look up any city

Add an Input element above your weather display group and set its placeholder to 'Enter city name.' Add a Button labeled 'Get Weather.' In the Workflow tab, create a workflow: When Button Get Weather is clicked → Display data in a group → select your weather group → Data to display = Get data from an external API → get_current_weather with city = Input City's value. Now users can type any city and see its current weather.

**Expected result:** Users can type a city name and click the button to see current weather conditions for that location.

### 6. Cache API responses to reduce call frequency and improve speed

Create a Data Type called 'WeatherCache' with fields: city (text), temperature (number), description (text), last_updated (date). In your weather lookup workflow, before calling the API, do a search for WeatherCache where city = Input City's value and last_updated > Current date/time + hours: -1. If results count is greater than 0, display the cached data. Otherwise, call the API and create a new WeatherCache thing with the response data. This prevents redundant API calls for the same city within an hour.

> Pro tip: Set up a scheduled backend workflow to clean old cache entries daily, preventing your database from growing unnecessarily.

**Expected result:** Repeated searches for the same city within one hour use cached data instead of making new API calls, reducing usage and improving response time.

## Complete code example

File: `API Connector payload`

```json
{
  "api_name": "WeatherAPI",
  "authentication": {
    "type": "Private key in URL",
    "key_name": "appid",
    "key_value": "[YOUR_OPENWEATHERMAP_API_KEY]"
  },
  "calls": [
    {
      "name": "get_current_weather",
      "use_as": "Data",
      "method": "GET",
      "url": "https://api.openweathermap.org/data/2.5/weather?q=[city]&units=metric",
      "parameters": {
        "city": {
          "type": "URL parameter",
          "private": false,
          "test_value": "London"
        }
      }
    },
    {
      "name": "get_forecast",
      "use_as": "Data",
      "method": "GET",
      "url": "https://api.openweathermap.org/data/2.5/forecast?q=[city]&units=metric&cnt=5",
      "parameters": {
        "city": {
          "type": "URL parameter",
          "private": false,
          "test_value": "London"
        }
      }
    }
  ],
  "cache_data_type": {
    "name": "WeatherCache",
    "fields": {
      "city": "text",
      "temperature": "number",
      "description": "text",
      "icon_code": "text",
      "humidity": "number",
      "last_updated": "date"
    }
  }
}
```

## Common mistakes

- **Leaving the API key as non-private in the API Connector** — If the key is not marked Private, it gets sent to the user's browser and can be extracted by anyone inspecting network traffic. Fix: Always check the 'Private' checkbox next to your API key in the API Connector settings.
- **Not initializing the API call before using it** — Without initialization, Bubble cannot map the JSON response fields, so you will not see any data fields available in dynamic expressions. Fix: Click 'Initialize call' with valid test values before trying to use the API data in your page elements.
- **Calling the API on every page load without caching** — Weather APIs have rate limits (OpenWeatherMap free tier allows 60 calls per minute). Uncached calls can quickly exhaust your quota. Fix: Implement a caching strategy using a WeatherCache Data Type and check for recent results before making a new API call.
- **Using 'Action' instead of 'Data' for the API call type** — When set to 'Action,' the call only appears in workflow actions and cannot be used as a data source for page elements. Fix: Set 'Use as' to 'Data' for GET requests that return information you want to display on the page.

## Best practices

- Mark API keys as Private in the API Connector to keep them server-side and secure
- Use the 'Data' call type for GET requests so results can be displayed directly in page elements
- Cache weather responses in a Bubble Data Type to reduce API calls and improve performance
- Add error handling for cases when the city is not found or the API returns an error
- Use the units=metric or units=imperial parameter to display temperatures in the user's preferred format
- Set a default city based on the user's profile or location to show weather automatically on page load

## Frequently asked questions

### Which weather API works best with Bubble?

OpenWeatherMap is the most popular choice because it has a generous free tier (60 calls/minute, 1 million calls/month) and returns clean JSON that Bubble's API Connector parses easily. WeatherAPI.com and Tomorrow.io are also good alternatives.

### How do I show a weather icon in Bubble?

OpenWeatherMap returns an icon code in the response. Use an Image element with its source set to a dynamic URL: 'https://openweathermap.org/img/wn/' followed by the icon code followed by '@2x.png'.

### Can I get weather for the user's current location automatically?

Yes. Use a 'Get data from an external API' call to a geolocation service or use the Bubble 'Current geographic position' data source to get latitude and longitude, then pass those coordinates to the weather API instead of a city name.

### What happens if the weather API is down?

Your weather display group will show empty or default values. Add a conditional on the group: 'When Parent group's data source is empty → Show text: Weather data temporarily unavailable.'

### Does calling an external API cost Bubble Workload Units?

Yes. Each API Connector call consumes WUs on Bubble's side for the server-side processing. Caching responses in your database reduces both API usage and WU consumption.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/integrate-weather-api-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/integrate-weather-api-in-bubble