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.
Prerequisites
- 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
Add a new API in the API Connector plugin
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.
Define a GET call for current weather data
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).
1https://api.openweathermap.org/data/2.5/weather?q=[city]&units=metricExpected result: The API call is configured with a dynamic 'city' parameter and the correct endpoint URL.
Initialize the call to map the response structure
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.
Display weather data on your page using dynamic data sources
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.
Add a search input so users can look up any city
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.
Cache API responses to reduce call frequency and improve speed
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 working example
1{2 "api_name": "WeatherAPI",3 "authentication": {4 "type": "Private key in URL",5 "key_name": "appid",6 "key_value": "[YOUR_OPENWEATHERMAP_API_KEY]"7 },8 "calls": [9 {10 "name": "get_current_weather",11 "use_as": "Data",12 "method": "GET",13 "url": "https://api.openweathermap.org/data/2.5/weather?q=[city]&units=metric",14 "parameters": {15 "city": {16 "type": "URL parameter",17 "private": false,18 "test_value": "London"19 }20 }21 },22 {23 "name": "get_forecast",24 "use_as": "Data",25 "method": "GET",26 "url": "https://api.openweathermap.org/data/2.5/forecast?q=[city]&units=metric&cnt=5",27 "parameters": {28 "city": {29 "type": "URL parameter",30 "private": false,31 "test_value": "London"32 }33 }34 }35 ],36 "cache_data_type": {37 "name": "WeatherCache",38 "fields": {39 "city": "text",40 "temperature": "number",41 "description": "text",42 "icon_code": "text",43 "humidity": "number",44 "last_updated": "date"45 }46 }47}Common mistakes when integrating weather API in Bubble.io: Step-by-Step Guide
Why it's a problem: Leaving the API key as non-private in the API Connector
How to avoid: Always check the 'Private' checkbox next to your API key in the API Connector settings.
Why it's a problem: Not initializing the API call before using it
How to avoid: Click 'Initialize call' with valid test values before trying to use the API data in your page elements.
Why it's a problem: Calling the API on every page load without caching
How to avoid: Implement a caching strategy using a WeatherCache Data Type and check for recent results before making a new API call.
Why it's a problem: Using 'Action' instead of 'Data' for the API call type
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add weather data to my Bubble.io app using the OpenWeatherMap API. How do I set up the API Connector with authentication, create a GET call with a dynamic city parameter, initialize it, and display temperature and conditions in my page? Include caching to reduce API calls.
Add a weather feature to my app. Set up the API Connector to call OpenWeatherMap, let users type a city name to get current temperature and conditions, and cache results in the database so the same city is not queried more than once per hour.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation