A good weather widget with automatic location capability will help users access the current weather status on your website and provide a forecast for upcoming days.
Not most website-building platforms provide a way to add weather forecasts to websites. So, how do you add a weather widget with automatic location detection to your website?
You will have to use an accurate weather widget creator. In this article, you will find top weather widgets, features and live demos of them, and things to consider when embedding weather forecast plugins on a site.
Benefits of displaying weather data on your website
Showcasing current and future weather details on your site can be helpful in many ways. Here are some:
Increase sales of weather-dependent goods and services
When you run an offline business, such as an outdoor event business, you can display current and future weather forecast data underneath your booking & payment widgets when you want your clients to choose a perfect day without leaving your site.
Improve user experience
With a precise weather forecast, it’s easy to find the best date and time for the planned event and book it without leaving your website. A multi-location weather widget can showcase the current weather stats of cities worldwide, making your site a one-stop shop for accurate weather data.
Four things to consider when using HTML Weather forecast widgets
- Customize the widget – Most HTML weather forecasting widget builders listed below allow you to define the location via name, ZIP code, and coordinates and change the color scheme, fonts, widget size, and more. Use customizing tools to integrate the meteorology widget with your site using the brand color palette, font families, etc. Before adding the widget to your site, preview it on the mobile view to ensure climate metrics are apparent.
- Concern about the page loading speed – The last thing you want is to increase your site’s loading time because of the weather web app! According to a report, page loading speed directly correlates with the conversion rate. You can load the weather forecast widget’s script code (JS) asynchronously to load the widget after other contents are loaded on the page. Furthermore, you can use a script manager such as Google Tag Manager or Cloudflare Zaraz and take measures such as using colors instead of animated background images.
- A/B test your landing pages – You will not know if adding a weather widget to a website increases conversions if you do not split-test your pages — experiment using different widget variations (minimalistic view, full-width, etc.) and styles.
- Use other conversion boosters – Using a weather widget alone on a site is not guaranteed to boost sales. Instead, utilize other techniques, such as countdown timers, social proof software tools, feature comparison tables, and website pop-up widgets.
Top Website Weather Widgets To Use Today
Elfsight Weather widget
Elfsight is a widget provider for websites. Its widget catalog consists of over 90 different apps for purposes such as collecting data (Form Builder, Subscription Form), showcasing data (testimonials widget, file viewer plugin, animated numeral counter), and tools like the before-and-after slider and age verification widget.
Elfsight’s Weather widget is a versatile and free weather forecast plugin for websites. It has a visual editor (you can see changes to your forecast widget live in the editor while you edit it), many features, and the capability to embed it in any placement (header, sidebar, in-content, footer) on any website, no matter which platform (E.g., WordPress, Shopify, Squarespace, etc.) you use.
Features:
- Templates: Elfsight Weather widget creator supplies 5+ templates to get you started quickly. Those are designed to showcase the following:
- Detailed forecast – Displays all the details, including current weather, temperature, humidity, air pressure, wind speed, and hourly & daily forecast
- Current weather – Highlights temperature and weather forecast for the current hour
- Daily forecast – This weather widget type shows weather (rain possibility and high & low temperatures) for the next seven days
- Hourly forecast – The hour weather widget displays the weather status for the next 12 hours.
- Weather location: You can set up the area for the weather forecast HTML widget in two ways:
- Visitor’s location: When you choose this option, the widget will automatically determine your visitor’s location based on their IP address and display the correct weather.
- Specific location: Elfsight’s Weather widget lets you pinpoint the place in three ways:
- Location by city: Enter the name of your targeted city and choose the accurate location from the prepopulated list of city names. This option also allows you to specify a custom display name. Listing your branch or specific town names familiar to your targeted audience would be helpful.
- Location by ZIP code: One weakness of the Elfsight Weather forecast app is that it does not list all the cities in the world. Hence, the ZIP code option would be helpful in those cases. However, even this option will have some issues, such as populating an inaccurate location.
- Location by coordinates: The most reliable way to add accurate weather location information is to specify the coordinates. You can find the correct coordinates through Google Maps or a latitude and longitude finder such as Latlong.
- Settings: Elfsight’s Weather widget supports over 30 languages, so your website users can see weather details in their native tongue. You can also change the units for temperature (Fahrenheit, Celcius), wind speed (Miles per hour, Knots, etc.), pressure (Millibars, Inches of Mercury, Pounds per Square Inch, etc.), and time format (12-hour, 24-hour) to improve the comfort of using the embedded weather widget on your website.
- Style and Customization: You can Change the look and feel of the weather widget by editing the background (a color or themed image that will change depending on the location’s weather) and enabling icon animations. The custom CSS option can also change the widget’s appearance further.
- Preview widget’s appearance on mobile, clone widgets, and more.
How to create a weather widget on Elfsight
Use the widget builder below to create your weather widget.
You can also visit the Elfsight website, sign up, search for the “Weather” app in the widget catalog, and start designing your weather widget.
Here’s a video tutorial on using Elfsight Weather widget creator.
Weather widget embed code
Copy and paste the HTML code for the weather forecast widget on your website’s source code editor where you want to display it. You may use the ‘Custom HTML‘ block in WordPress’s widgets editor to add weather widgets to the sidebar and header sections.
Note: You only have to place the JavaScript code once on your website, even if multiple Elfsight widgets, such as the event calendar widget, are embedded on the same page.
Tip: You can use <a> anchor element to link your weather gadget to another page. Check out the first demo below. Here’s an example code:
<script src="https://static.elfsight.com/platform/platform.js" async></script>
<a href="https://www.pitiya.com/" target="_blank"> <div class="elfsight-app-cb43357f-7e1d-49e9-9a44-89654ddaf508" data-elfsight-app-lazy></div></a>Demos
Current weather (in Los Angeles) with a link to an external website
Weather widget with automatic location detection
Hourly weather forecast widget with a specific location
Pricing
Elfsight’s Weather widget is free to use. Its free plan allows one widget per account and 200 widget views per month. Elfsight’s branding logo is embedded in free weather widgets. If you want to remove branding from widgets and more pageviews monthly, subscribe to a paid plan starting from $5.
Also, Elfsight has All Apps packs that provide access to 90+ apps, including the Weather widget. Prices start from $18/mo.
Click here to try the Elfsight Weather widget.
Common Ninja’s Live Weather Forecast
Common Ninja is an alternative to Elfsight that offers over 200 widgets for various purposes, ranging from user engagement to website components. Some of Common Ninja’s widgets include a pricing table maker and a logo slider.
Live Weather Forecast of Common Ninja is a free weather plugin for websites with multiple layouts & skins and customization options.
Features:
- Location-based or user-location-based weather data: The weather widget automatically detects users’ locations and provides real-time weather information for their specific area. You can also input a custom location by name or ZIP code and generate a location-based live weather forecast widget. Click on the ‘Add a location’ button and add your place (by name or zip code) to add more locations.
- Templates, layouts, and skins: Common Ninja has several pre-designs. You can also quickly change the widget’s outlook by choosing a layout (out of three) and skin color (out of dozens). You can also change the colors of individual elements from the Look and Feel section.
- Multiple weather metrics: The weather forecast widget displays various weather metrics, such as temperature, humidity, wind speed, and precipitation. You can also change the unit for temperature and speed.
- Customization: Common Ninja delivers one of the best weather widgets in terms of editing capability. You can use the Basic and Advanced editing options to change the look and feel of your widget, including fonts, sizes, colors, borders, spacing, etc.
- Visibility: You can localize your widget by changing its front end, which is available in over ten languages. You can also show or hide specific elements from the widget to customize it.
- Custom CSS, widget sharing, analytics, and more.
Here’s a video tutorial that shows how to use Common Ninja to make a weather widget.
Demo
Pricing
Common Ninja’s Live Weather widget is free to use. However, the free plan comes with limits and branding on the widgets. Paid plans are customizable, as you can see from the screenshot below:
Click here to try Common Ninja.
Fouita’s Weather Widget
Fouita is a platform similar to Common Ninja. It offers over 60 widgets in various categories to help website owners upgrade their websites. The ‘Info’ widgets category includes ones such as a World Clock Display, Accessibility Tools, Busy Hours, and a Real-time Weather Widget.
Fouita’s Weather Widget allows you to personalize and customize your weather widget effortlessly.
Features:
- Two ways to display details: You can set the widget to detect the visitor’s location or specify a place to show live weather information, including weather conditions, pressure, humidity, and wind.
- Daily Forecast: Besides showing real-time weather status for a location, Fouita also lets you display the forecasts for the upcoming seven days.
- Hourly weather: Once enabled, the widget will show the temperature for morning, evening, and night.
- Set units: Customize unit symbols for temperature, pressure, and wind speed.
- Customize background: You can either use a static setup where a color, gradient, or image could be used or make the background dynamic based on the weather conditions. Fouita makes it so easier by letting you upload background images for conditions like thunderstorms, drizzle, rain, snow, mist, smoke, haze, clouds, clear, etc.,
- Display conditions and triggers: This section of the widget builder enables you to specify when and how to showcase the weather widget on a website. It can be based on the visitor’s location, device, etc.,
Demo
Pricing
Fouita’s widgets are free to use. However, the free plan is limited in terms of monthly view consumption and some features. Paid plans are customizable.
Click here to try Fouita’s Weather Widget.
Powr Weather App
Powr is another online service that provides free website widgets with codes (without having to code a single line of code). Its library includes 60+ plugins, ranging from data collection to boosting conversions. Some popular apps are the Form Builder, Media Gallery, Media Slider, and Countdown Timer.
Powr’s Weather app is free to use and lets you customize the widget to resonate with your brand and fulfill your requirements with a robust visual editor with customization capabilities.
Features
- Global coverage: One of the best features of Powr’s Weather app is the ability to add locations from anywhere on Earth. It even supports local towns, villages, and specific places.
- Display every key detail: Powr automatically displays the current temperature, high and low, cloud cover, precipitation, wind speed, and humidity percentage accurately. It supports Fahrenheit, Celcius, and Kelvin temperature units. You can choose the forecast interval (hourly or daily) and control the forecast count.
- Customization: Design the weather plugin the way you want. Enable graphic [background image], change colors, fonts, and plugin size to control the widget’s outlook to match your brand colors and situation.
- Custom CSS and JavaScript code insertion, preview widget’s appearance on a tablet or mobile device before publishing, share weather app with others, add collaborators, duplicate widgets, check view count, and more.
Here’s a video that shows how to use Powr to create a weather widget for your website.
Demo
Pricing
Powr’s Weather app’s prices start from free. The free plan does not limit the number of page views, unlike Elfsight; however, it limits features and contains the Powr branding on the widget. Paid plans start from $5.49/month.
Click here to try the Powr Weather app.
TheWeather’s Weather Widget
TheWeather.com (also known as Meteored) is a website that provides weather data for major cities in several countries for the next 14 days. It offers mobile apps and web widget solutions.
Features
- Change language and location: Enter the city name and select it to reflect data on the widget. One downside is that many cities aren’t available on the list.
- Change which detail to show on the widget: Meteored’s weather widget supports several metrics. They are temperature, pressure, rain, and wind speed. Also, you can change their metric unit.
When the space for Meteored weather widgets is clicked, the browser is directed to its website. The page includes more information, such as hourly weather details, charts, and a lunar calendar.
Demo
Meteored Weather widget of TheWeather is free to use.
Click here to try the Meteored widget.
Weatherwidget.org
Weatherwidget.org provides a few free weather widgets with automatic locations. The widgets are customizable, and you can change their colors, sections, temperature scale, background (use colors, a transparent background, or a weather conditions image), and language.
Here’s a demo (Ticker widget type with automatic location):
Weatherwidget.io
This is another free weather widget provider for responsive websites. To use it, enter your location, select the temperature unit, select a preferred theme, change the appearance, and get the code.
Here’s a demo:
LONDON WEATHERTomorrow’s Weather widget
Tomorrow.io provides true weather widgets with multiple locations capability and a weather summary report in audio format.
Features:
- Automatic or fixed location: You can let Tomorrow.io automatically determine the user’s approximate location (based on IP address) or specify one.
- Different weather widgets: Use one of the available options depending on your scenario.
- Multiple locations
- Weather summary
- Upcoming days
- Current air quality
- Air quality and pollen
- Air quality and pollutants
- AQI (Air Quality Index) multiple locations
- Fire risk index
- Settings: You can change the color scheme (light or dark), unit, and language. Tomorrow.io’s weather widget creator is less customizable than others.
Demos
Air Quality and Pollen (Air quality and pollen for now, today, and tomorrow)
Fire Risk Index (Current fire index value (FWI) for 6 locations)
Air Quality and Pollutants (Air quality and pollutants for now, today, and tomorrow) – Dark theme, automatic location
Click here to try Tomorrow’s weather widget.
What is the best weather widget for your website?
In this article, you discovered several free customizable weather website widgets and plugins. Also, there are several websites where you can get embed codes for free weather widgets, such as Booked.net and WeatherWX.
Most of them provide universal weather information, including temperature, wind speed, precipitation, air quality & pressure so on. However, not all services let you customize the weather forecast widget as you want.
For example, Meteored’s Weather widget has limited customization options, while Elfsight’s Weather app provides different templates, localization options, and three ways to specify a location. Tomorrow.io’s weather widgets are modern and offer more metrics. However, one downside of using such services is the clear branding in all weather plugins and the inability to remove external links.
Furthermore, one advantage of using services like Elfsight and Fouita is that you can use other apps, such as the YouTube Video Gallery widget, on your site without paying for another tool.
In summary, Elfsight, Common Ninja, and Fouita are recommended if you want a quality weather plugin for your site that provides automatic weather updates, does not display ads, and can be installed on multiple websites (including your clients’).
Final words on best weather widgets for websites
Although you can use Google Weather or Accuweather, those services do not provide a way to display current and future meteo information on your website. Sure, you can use weather data suppliers’ API to build your weather web apps. However, that process needs money and maintenance. For that reason, you would have to use a third-party quality weather widget.
Some services provide additional metrics such as air quality and widget customization options to let you make the widget dynamic (auto-detect visitor’s location and display local weather metrics) and fine-tune the widget’s appearance.