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 many types of widgets available:

NOTE: For the widgets to work in Chrome, users must allow third-party cookies. The widgets will not work at all on some centrally-managed systems where third-party cookies are blocked entirely.

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 title="Example 1" 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 title="Example 2" 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 title="Example 3" 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 title="Example 4" 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 title="Example 5" 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 Index Widget with Primary Pollutant

Example Primary Pollutant: 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. The "transparent" parameter is also available.

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

Example Primary Pollutant with Weather: 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. This widget can display Temperature, Visibility Distance, and Wind Speed in metric units by adding the units parameter ("&units=metric").

<iframe title="Example Primary Pollutant with Weather" height="420" width="230" src="https://widget.airnow.gov/aq-dial-widget-pollutant-weather/index.html?city=Raleigh&state=NC&country=USA" style="border: none; border-radius: 25px;"></iframe>

Air Quality Index Trends Widget

Example Trends: 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. The view for day/week/month can be changed through the menu at the bottom left corner

<iframe title="Example AQI Trend" height="330" width="500" src="https://widget.airnow.gov/aq-trends-widget/?city=Raleigh&state=NC&country=USA" style="border: none; border-radius: 25px;"></iframe>
 

Air Quality Index Widget for Digital Signage

Example Digital Signage: To use this widget, copy and paste the this URL into your Digital Signage software. Change the city and state two letter values for the desired location. The "transparent" parameter is also available.

Note: this widget is 300% bigger than the normal widget.

https://widget.airnow.gov/aq-dial-widget-signage/?city=Raleigh&state=NC&country=USA

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.

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

<iframe title="Flag Program Widget Zip Code Example" 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.

Flag Program Widget City, State, and County Example: 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 title="Flag Program Widget City, State, and County Example" 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.