Blog""Guides""Displaying Live Weather Temperature on Your Webflow Site: A Step-by-Step Guide

Displaying Live Weather Temperature on Your Webflow Site: A Step-by-Step Guide

By
Salman G. Samar
8 min
icon for a weather application with clouds and the sun on a colourful backgorund

Adding dynamic and interactive elements to your website can enhance the user experience and provide valuable information to your visitors. One such element is displaying the live weather temperature. In this guide, we will walk you through the process of integrating live weather temperature into your Webflow site using the WeatherAPI.com API.

Why Weather API?

We chose WeatherAPI for this tutorial due to its generous free plan and reliable service making it ideal for integrating weather information into your Webflow site without extra costs. Other popular alternatives, such as OpenWeatherMap, Weatherbit, and AccuWeather, offer various weather data and features with different pricing plans. Consider their documentation, pricing, and data offerings to find the best fit for your project.

For this guide, no prior coding experience is required, making it accessible to beginners. So, let's get started!

Step 1: Sign up for WeatherAPI

  • Visit WeatherAPI.com and sign up for a free account.
  • Obtain your WeatherAPI.com API key, which will allow you to access their weather data.

Step 2: Create a New Webflow Project

  • If you haven't already, sign up for a Webflow account and create a new project.
  • Choose a template or start from scratch, depending on your preference.

Step 3: Design and Add a Temperature Display Element

  • In Webflow's Designer, create a new Text element where you want the temperature to be displayed.
  • Give the element the unique attribute of di-hacks-element="current-temperature", which will be used to target the element in the code.

Step 4: Add Custom Code

Method 1:

  • In the Webflow Designer, navigate to the page where you want to display the temperature.
  • Drag and drop a Custom Code Embed element onto the page, typically located under the Add panel.
  • Open the Custom Code Embed settings and place it within the previously created temperature element.

Method 2:

In addition to using the Custom Code Embed element, you can also place the code directly before the closing body tag in the page settings.

  • Open the page settings by clicking on the gear icon next to the page name in the Webflow Designer.
  • Scroll down to the "Custom Code" section.
  • Paste the JavaScript code provided in the next step directly into the "Before </body>" field.
  • Save the changes to apply the code to the entire page.
Scroll down after opening page settings

Please note that the result of the live weather temperature will only be visible on the published website, not in the Webflow Designer or preview mode. After publishing your Webflow site, visitors will be able to see the real-time weather temperature displayed in the designated element.

By adding the code before the closing body tag, you ensure that the temperature display functionality remains consistent across your entire page. This alternative method allows you to embed the code without using a specific element on the page. Choose the method that works best for your workflow and design preferences.

The JavaScript Code:

<script> // on DOM ready document.addEventListener('DOMContentLoaded', function () { const WEATHER_API_KEY = 'ff9203377b8d40f5a40203613231906'; const CITY_NAME = 'Ottawa'; const TEMPERATURE_SELECTOR = '[di-hacks-element="current-temperature"]'; const temperatureElement = document.querySelector(TEMPERATURE_SELECTOR); if (!temperatureElement) return; // Fetch weather data from WeatherAPI.com API fetch(`https://api.weatherapi.com/v1/current.json?key=${WEATHER_API_KEY}&q=${CITY_NAME}`) .then(response => response.json()) .then(data => { const temperature = data.current.temp_c; // Update the text content of the temperature element with the current temperature temperatureElement.textContent = `${temperature}`; }) .catch(error => { console.log('Error fetching weather data:', error); }); }); </script>

Step 6: Replace API Key and City Name

  • Locate the line const WEATHER_API_KEY = 'YOUR_WEATHERAPI_COM_API_KEY'; and replace 'YOUR_WEATHERAPI_COM_API_KEY' with your actual WeatherAPI.com API key.
  • Locate the line const CITY_NAME = 'YOUR_CITY_NAME'; and replace 'YOUR_CITY_NAME' with the name of the city for which you want to display the weather temperature.

Step 7: Publish and Test

  • Publish your Webflow site to make it live and accessible to your visitors.
  • Test the temperature display by opening your site and verifying that it shows the current weather temperature for the specified city.

Use cases:

I created this while I was creating a website for a hotel client. We used it on their homepage where their visitors can instantly see the current weather conditions of the hotel's location, helping them plan their stay accordingly. To take it even further, It can recommend outdoor adventures on clear days, like exploring local parks or going on scenic hikes. On rainy days, guests can be directed to indoor amenities such as spas, fitness centers, or entertainment areas. By incorporating live weather temperatures, hotels can enhance the overall guest experience, ensuring that visitors make the most of their stay, rain or shine.

Live weather displayed on the live site of Suitestay Apartments Hotel
Live example on Suitestay Apartments Hotel Website

Live weather temperature integration opens up a world of possibilities beyond hotel websites.

Imagine a travel blog where readers can not only read about destinations but also get real-time weather updates for those locations.

Weather-sensitive businesses like outdoor adventure companies can utilize live weather temperatures to provide up-to-date information on ideal conditions for activities such as hiking, skiing, or surfing.

Restaurants and cafes can tailor their menus and promotions based on the weather, offering refreshing drinks on hot summer days or comforting meals on chilly evenings.

Retail websites can create personalized recommendations for seasonal fashion trends, suggesting appropriate clothing choices based on the current weather in the user's location.

Live weather temperature integration can truly enhance user experiences across a wide range of platforms, empowering individuals to make informed decisions and engage with content that is relevant to their immediate environment.

You can actually do more!

Using this method, you can do much more than just displaying the current weather temperature on your Webflow site. WeatherAPI provides a wide range of weather data, including humidity, wind speed, precipitation, and more. With the integration of additional API calls and customization, you can create dynamic weather widgets, interactive weather maps, or even build weather-based applications.

By leveraging the power of WeatherAPI and Webflow's design flexibility, you can enhance the user experience by providing real-time weather updates, personalized weather forecasts, or location-specific weather information.

The possibilities are endless, allowing you to create engaging and informative weather-related features for your Webflow site. Let your creativity flow and explore the vast potential of this method to elevate your website's weather experience.

If you found this guide helpful, maybe consider signing up for our newsletter! We only send an email or two a month and we make sure they have actual "value" in them!

Category:
Guides
Share:
Date icon
June 23, 2023