Standard WeatherPlanner widgetinFrame WeatherPlanner widgettoday WeatherPlanner widget

How to place a standard WeatherPlanner widget on your site.

Standard widgets are iframes that you may place on your website. These widgets are of various sizes and the weather results are returned on a separate result page.

  1. Obtain your unique key. Click here.
     
    • Fill out the new account form.
    • A Registration confirmation email will be sent to the email address you used for your account.
      Please follow instructions within the email to activate your account.
      If the email does not arrive in your inbox within the next few minutes, please check your junk email folder.
    • After clicking the link in the email you should be on your profile page
    • Clicks the PRODUCTS link in the black menu
    • Click on the blue word "WeatherPlanner"
    • Click the blue "Subscribe" button.
    • Click the blue "Confirm" button.
    • You should be back on your profile page
    • Click blue "Show" link to expose your API key (or click Regenerate key, and then Show key)
    • Save this key for later. (You can alwsys come back)
    • You are now ready to use the WeatherPlanner Widgets, proceed with the steps below.
       
  2. Choose the widget size you would like to display. Click a link to view the widget (opens in a new window)

    To view all the different widgets, Click here. (These are not live)

  3. Configure your widget.
    • Create a Jason file that will be passed as the data parameter to the iframes. This is how the configuration parameters are supplied to the widget.
      {
	"widget":"300x600",
	"key":"Your Unique Key",
	"location":"A zip code (postal code)",
	"header":"http://example.com/header.html",
	"hdrWidth":"891px",
	"hdrHeight":"95px",
	"footer":"http://example.com/footer.html",
	"ftrWidth":"891px",
	"ftrHeight":"95px"
}
      widget = [Required] the name of the widget in this case the name is 300x600
      key = [Required] Your Unique Key, the API key you received from Azure.
      location = [Optional] A location to display in the where box of the widget.
      header = [Optional] The full url to the header that will be displayed in the header iframe on the result page.
      hdrWidth = [Optional] The width of the header iframe
      hdrHeight = [Optional] The height of the header iframe

      footer = [Optional] The full url to the footer that will be displayed in the footer iframe on the result page.
      ftrWidth = [Optional] The width of the footer iframe
      ftrHeight = [Optional] The height of the footer iframe

    • Now place the following iframe on your html page where you want the widget to appear. Note: the data.json file is the json key file you created above, the iframe needs the full url to the json file. 
      <iframe src="//weatherplanner.com/wp_Standard/index.php?data=//example.com/data.json" width="300" height="600" frameBorder="0"></iframe>
  4. That's all that is required for these widgets to work.