The weather forecast widget displays up to a 15-day weather forecast in a horizontal, scrollable layout. The widget can be added to most common web pages using only simple HTML editing.
Sign up for a API key
Please visit Weather Data Services to sign up for an free trial account and Weather API key. To obtain your API key, navigate to your account details after you have signed up. You can copy the API Key from here.
Select a location on your page to insert the widget
Copy the following code into your HTML source where you’d like to display the widget. Note that the first element is the empty DIV element that will contain the weather forecast widget. You can include CSS rules to set basic properties of the widget container element such as the background color, sizing etc.
<div class="weatherWidget" style="background-color: #ffffff99;height: 175px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<link rel="stylesheet" href="https://www.visualcrossing.com/widgets/forecast/weather-forecast-widget-d3.css">
<script>
window.weatherWidgetConfig = window.weatherWidgetConfig || [];
window.weatherWidgetConfig.push({
selector:".weatherWidget",
apiKey:"YOUR_API_KEY",
location:"_auto_",
unitGroup:"us"
});
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://www.visualcrossing.com/widgets/forecast/weather-forecast-widget-d3.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
Configuration
There are four main items to configure.
selector is the CSS selector to the DIV container element that will be used for the widget.
apiKey is your personal API Key that is obtained from the weather data services sign up page.
location the initial address for the weather forecast. If left empty, the widget will attempt to find the user location.
unitGroup the units of measurement to use when displaying the data. Options include ‘us’, ‘metric’ or ‘base’. Base units are the scientific units used such as Kelvin for temperature.
Widget sizing guidelines
The minimum recommended height for the widget is 150px. Each forecast time (such as the day or hour), requires 60px of space. The widget allows horizontal scrolling when additional time periods do not fit in the window.
How does the widget work?
Head over to our forecast widget implementation documentation for details on how the widget works and how you can modify the source code to fit your needs.