Widgets

Use these free widgets from the Environmental Protection Agency to show air quality information right on your own web page! Add a simple line of code using the following examples to your web page and the widgets will display the correct data for your city and state.

The widgets allow your organization to provide air quality data to the people you want to reach. Children and the elderly are particularly susceptible to air pollution, which can harm their lungs and hearts. The Air Quality Index helps people track when the air pollution levels are in an unhealthy range so they can modify their activities as necessary to protect their health.

There are two types of widgets available:

  • Air Quality Index Widget A miniature version of the animated AirNow.gov AQI Dial showing the current AQI without any forecast values.
  • Air Quality Flag Program Widget This widget supports the Air Quality Flag Program and features a picture of the flag you should fly for the day's Air Quality Forecast color.

 


Air Quality Index Widget

Example 1: To use this widget, copy and paste the following code into your Web page. Change the city and state two letter values for the desired location.

<iframe height="340" width="230" src="https://widget.airnow.gov/aq-dial-widget/?city=Raleigh&state=NC&country=USA" style="border: none; border-radius: 25px;"></iframe>

Example 2: To use this widget, copy and paste the following code into your Web page. Change the city and state two letter values for the desired location. In this example, the "transparent" parameter removes the blue background.

<iframe height="340" src="https://widget.airnow.gov/aq-dial-widget/?city=Raleigh&state=NC&country=USA&transparent=true" style="border: none; border-radius: 25px;" width="230"></iframe>

Example 3: To use this widget, copy and paste the following code into your Web page. Change the city and state two letter values for the desired location. By changing the height parameter, you can hide the location name.

<iframe height="230" src="https://widget.airnow.gov/aq-dial-widget/?city=Raleigh&state=NC&country=USA" style="border: none; border-radius: 25px;" width="230"></iframe>

Example 4: To use this widget, copy and paste the following code into your Web page. Change the city and state two letter values for the desired location. In this example, the "transparent" parameter removes the blue background. By changing the height parameter, you can hide the location name.

<iframe src="https://widget.airnow.gov/aq-dial-widget/?city=Raleigh&state=NC&country=USA&transparent=true" style="border: none; border-radius: 25px;"></iframe>

Example 5: For AirNow Department of State locations, use latitude/longitude parameters for your desired location.

<iframe height="340" src="https://widget.airnow.gov/aq-dial-widget/?latitude=24.4243&longitude=54.4339" style="border: none; border-radius: 25px;" width="230"></iframe>


Air Quality Flag Program Widget

The Air Quality Flag Program widget can be installed on your city, school, or organization's homepage. The Air Quality Flag Program widget has a picture of the flag you should fly for Today’s Air Quality Forecast. The widget updates automatically, so you’ll always know which color flag to fly.

With the Air Quality Flag Program widget you can:

  • Customize the widget so it has your location or organization's name at the top by changing the "n" parameter.
  • Use either city & state or z (for zip code) parameters.
  • Click on Tomorrow’s Forecast to see which flag to fly tomorrow.
  • Click on Current Air Quality to see the latest hourly air quality reading.
  • See if it’s a good day to go outside by clicking on Activity Guidance.

Example 6: To use this widget, copy and paste the following code into your Web page. In this example, the "z" parameter determines the location.

<iframe height="380" src="https://widget.airnow.gov/aq-flag-widget/?z=27713&n=Durham,%20NC" style="background-color: white;" width="230"></iframe>

Warning: This widget will change height depending on the number of pollutants currently available.

Example 7: To use this widget, copy and paste the following code into your Web page. In this example, the "city", "state", and "country" parameters determine the location.

<iframe height="380" src="https://widget.airnow.gov/aq-flag-widget/?city=Dallas&state=TX&country=USA&n=Dallas,%20TX" style="background-color: white;" width="230"></iframe>

Warning: This widget will change height depending on the number of pollutants currently available.