June 11

Introducing the WeatherBlox Wizard!

Introducing the latest and greatest weather content tool – AerisWeatherBlox WizardLast year we released WeatherBlox to the public and saw a lot of awesome integrations. We decided this wasn’t enough and wanted to make it even easier for users of all skill levels. After many long nights of brainstorming and early mornings fueled by coffee, the WeatherBlox Wizard was born.

What Kind of Sorcery is This?wizard

The WeatherBlox Wizard is a unique tool that walks the user through the setup of our homegrown WeatherBlox. The best part is you don’t need to be a developer to plug and play with the options! The wizard will prompt the user with various options that are included in the WeatherBlox component and build the code for you along the way. As you make changes, the example on the screen will update accordingly so there’s no guessing as to what changes are being made. Once you get to the end, a full code snippet is provided and ready to copy and paste into your content manager. 

How Does It Work?

The wizard will take you through four steps to simplify the build of your next WeatherBlox component. Feel free to follow along on your own as we walk you through each step.  Let’s take a look at each step and what it entails: 

Step 1 – Select WeatherBlox Type

Here you will choose between the WeatherBlox Views and WeatherBlox Layouts. You can visit the pages previously linked for a better understanding of each individual view and layout.  Once you’ve selected the type we’re ready for the next step.

Step 1

Step 2 – Select View Type

Now you will be able to select the specific view or layout that you wish to integrate into your site.  You can check out the thumbnails each option offers for a quick preview, but if you’re still having trouble deciding, feel free to check out the details within the WeatherBlox documentation:

WeatherBlox Views
WeatherBlox Layouts


Step 2

After selecting your desired component, we will move on to step 3.

Step 3 – Setup Options

This step is where we get to have some fun.  The options listed here will depend on what was selected in the previous two steps.  As you play around with these options, you will notice the example on the right side is updating in real-time.  Once you find the perfect configuration for your use case, hit continue at the bottom of the page and we will move on to step 4.

Step 3

Step 4 – Get Code

We made it – the last step in the WeatherBlox Wizard!  You’ll notice the wizard has magically populated a fully functioning code snippet on the left side of the page. To the right, you’ll see an example of your custom built WeatherBlox component.  One thing to note in the code snippet is the client id and client secret are filled in with dummy values:

Your credentials can be automatically filled in by simply logging in while on this page. Once logged in, your applications will be listed so you can select the correct application that will use WeatherBlox. Be sure to verify if the namespace associated with your application is set up properly, otherwise, the weather data will not load.  Finally, hit the handy copy button in the top-right corner of the code snippet container and now you’re ready to paste the code into your application!

Step 4

Tips & Tricks

Request Parameters

You’ll notice several views and layouts have the Request Parameters option in Step 3. Request parameters are not required to complete your setup, but they do provide the option to refine the weather API queries that drive the data.  For example, if you want your application to pull observation data from our entire station network, you would add the allstations  filter request parameter:

Request Parameters

You can find more information about request parameters within the endpoints pages of the API documentation.

Using Multiple WeatherBlox Components

We’ve seen several cases where users will add multiple WeatherBlox components to a single page. We absolutely support this, but if you do, just note that the code snippets currently utilize the same variable name and target element id in the DOM. These values would need to be unique for each component. For example, if you are adding a Day/Night Forecast view and Nearby Observations view, your setup might look like this:

Sending Wizard Examples

As you progress through the wizard, a custom URL is being built with your options. If you have a specific setup you like and want to send it to Bob on your marketing team, just copy the URL and send it off. Bob will be able to see where you left off in the wizard and what options you’ve selected.

Until We Meet Again

Now that we’ve walked you through the in’s and out’s of the wizard, it’s time to start adding custom weather content to your site today with the WeatherBlox Wizard. Don’t have an account? Sign up for a free developer account and take the wizard for a spin!

Helpful Resources

Share this post:

1 Comment

  1. June 25, 2018 at 4:45 pm

    […] couple weeks ago we introduced the WeatherBlox wizard, but we weren’t going to stop there. We doubled down and added Air Quality views and a full […]

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.