Standard WeatherPlanner widgetinFrame WeatherPlanner widgettoday WeatherPlanner widget

How to place a today WeatherPlanner widget on your site.

Today 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 Widget, proceed with the steps below.
       
  2. The Today widget:
     
  3. Configure your widget.
    • Create a json file that will be passed as the data parameter to the iframe. This is how the configuration parameters are supplied to the widget.
      {
	"widget":"360x180",
	"key":"Your Unique API Key",
	"location":"21402",
	"display":"Annapolis, MD 21402",
	"header":"http://example.com/header.html",
	"hdrWidth":"891px",
	"hdrHeight":"95px",
	"footer":"http://example.com/footer.html",
	"ftrWidth":"891px",
	"ftrHeight":"95px"
}
      widget = the name of the today widget in this case the name is 360x180
      key = Your Unique Key, the API key you received from Azure.
      location = the location to use to obtain today's weather forecast (zip code is the best method to specify the loactaion)
      display = the text that will appear to identify the specified location
      header = the full url to the header that will be displayed in the header iframe on the result page.
      hdrWidth = the width of the header iframe
      hdrHeight = the height of the header iframe

      footer = the full url to the footer that will be displayed in the footer iframe on the result page.
      ftrWidth = the width of the footer iframe
      ftrHeight = 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_widgetToday/index.php?data=//example.com/data.json" width="360" height="180" frameBorder="0"></iframe>
  4. That's all that is required for this widget to work.