Weather Widget Tutorial for Webflow

Overview

This component fetches current weather data from WeatherAPI.com for a specified city. It updates elements on your page that are marked with custom attributes:

• data-flw-city: Holds the city name used for the API call.

• data-flw-weather: Used on various elements to display weather details (like temperature, condition, wind, etc.) and to update the weather icon (an <img> element).

Step-by-Step Instructions

1. Copy-Paste the Component:

• Copy the provided HTML structure and JavaScript code (the component) and paste them into your Webflow project.
[c-weather-test]

• Paste it in Webflow

‍

2. Get Your WeatherAPI Key:

• Go to WeatherAPI.com.

• Sign up or log in to your account.

• Navigate to the API section to find your API key.

‍

3. Insert Your API Key:

• In the JavaScript code, locate the line that defines the API key.

• Replace the placeholder text (e.g., 'YOUR_API_KEY_HERE') with your actual API key from WeatherAPI.

‍

4. Configure the Default City:

• The component uses the text from the element with data-flw-city to determine the city for which to fetch weather data.

• Change the default city name (e.g., “Berlin”) to your preferred city by editing the text in that element within Webflow.

• Additionally, user can use the input field to see the weather for any city

‍

‍

5. Publish and Test Your Site:

• Publish your Webflow site.

• Visit the page where you added the component to ensure the weather data loads correctly.

• If you run into issues, check your browser’s developer console for error messages.

‍

6. Customize and Extend (Optional):

• To display additional weather details (like pressure or visibility), refer to the WeatherAPI Documentation.

• Add new HTML elements with a unique data-flw-weather attribute for each additional field.

• Update the JavaScript to include new update functions for these fields.

• Adjust or add custom styling in Webflow’s Designer as needed.

‍

‍