Getting Started

Getting started with Xweather WeatherBlox is as simple as signing up for a free developer account (opens in a new tab) and adding a few lines of HTML/CSS to your website.

Installation

With the following steps you can quickly add WeatherBlox to your site today:

Create an AerisWeather account

Sign up for an Xweather Flex subscription (opens in a new tab). We offer a free developer account (opens in a new tab) for you to give our weather API a test drive.

Create your API access keys

Log in (opens in a new tab) to your account and find the Apps section to register your application for an API access key. Within the Apps section, click on New Application to register a new app. You will then be prompted to enter a project name and namespace. These can be updated at any time.

Follow our WeatherBlox setup guide

Set up WeatherBlox by following the setup and usage guides to integrate WeatherBlox into your project.

Review supported views and layouts

Review the library of available WeatherBlox views and layouts and their supported configuration/usage options.

Add and customize your WeatherBlox views

Once you've added your desired WeatherBlox to your application, you can futher customize the views and layouts to fit your needs.

Example view integration

The following example demonstrates how you would add a 5-day weather forecast to your page:

<link href="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.css" rel="stylesheet" />
<script src="https://cdn.aerisapi.com/wxblox/latest/aeris-wxblox.min.js"></script>
 
<!-- designate the view's target element -->
<div id="local-forecast"></div>
 
<script type="text/javascript">
 
// configure Aeris API access keys
const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');
 
// wait for the WeatherBlox library to be fully loaded and set up
aeris.on('ready', () => {
 
     // set widget variable
     var localForecast = new aeris.wxblox.views.Forecast('#local-forecast');
 
     // set API request parameters to be used when requesting data
     var params = { 
          p: 'minneapolis,mn',
          limit: 5
     };
 
     // load and render the view
     localForecast.load(params);
});
 
</script>

Views Setup