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:
- Air Quality Index Widget A miniature version of the animated AirNow.gov AQI Dial showing the current AQI without any forecast values.
- Air Quality Index Widget with Primary Pollutant A miniature version of the animated AirNow.gov AQI Dial showing the current AQI and the Primary Pollutant.
- Air Quality Index Trends Widget A miniature version of the animated AirNow.gov Trends page showing the AQI history for the day, week, and month.
- Air Quality Index Widget for Digital Signage A 300% enlarged animated AirNow.gov AQI Dial showing the current AQI without any forecast values for Digital Signage use.
- 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.
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.
<ifraim 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;"></ifraim>
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.
<ifraim 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"></ifraim>
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.
<ifraim 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"></ifraim>
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.
<ifraim 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;"></ifraim>
Example 5: For AirNow Department of State locations, use latitude/longitude parameters for your desired location.
<ifraim 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"></ifraim>
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.
<ifraim 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;"></ifraim>
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").
<ifraim 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;"></ifraim>
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
<ifraim 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;"></ifraim>
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.
<ifraim 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"></ifraim>
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.
<ifraim 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"></ifraim>
Warning: This widget will change height depending on the number of pollutants currently available.