The basic integration is simple and straight forward. You first need to add the following piece of code:

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

Then, just add this other code to include the widget:

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

The function `_aqiFeed` takes as argument the configuration block for the widget. The parameter `container: "city-aqi-container"` refers to the id of the tag in which you want to insert the widget (eg `<span id='city-aqi-container'></span>`), and the parameter city the name of the city for which you want to show the current Air Quality reading (eg `city: "london"`).

北京

161

北京空气质量

161

中度污染

更新时间 星期一23:00

PM2.5 AQI		161
PM10 AQI		72
O3 AQI		3

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

You can also specify the language to be used by setting the lang option. For instance, to include the widget in Chinese (as shown on the right), use the following code:

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

The currently supported languages are:

Beijing AQI is

161

Beijing Air Quality.

161

Unhealthy

Updated on Monday 23:00

PM2.5 AQI		161
PM10 AQI		72
O3 AQI		3

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

on Monday 23:00

It is possible to customize the text to be displayed within the widget by specifying the display option. For instance, to display with both the textual "AQI" name as well as the update time (as shown on the widget on the left), you can use the following code:

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

The parameter display is an HTML-based string, and can contain any of the following keywords:

• `%cityname` for the name of the city (eg Beijing),
• `%aqi` for the decorated AQI value (eg 58),
• `%aqiv` for the undecorated (raw text) AQI value (eg 58),
• `%style` for the css declaration of the decorated AQI details (eg background-color: #ffde33;color:#000000;),
• `%date` for the time at which the AQI was updated (eg Wed 20:00),
• `%impact` for the associated health impact (eg Good, Moderate...)
• `%attribution` for the AQI data attribution ( eg Beijing Environmental Protection Monitoring Center)
• `%details` for the full AQI details (the content of the popup displayed when moving the mouse over the AQI value).

Here are a few examples:

Display Configuration	Result
%cityname Air Quality is <b>%impact</b>.	Beijing Air Quality is Unhealthy.
%aqi <small>(%impact)</small>	161 Beijing Air Quality. 161 Unhealthy Updated on Monday 23:00 PM2.5 AQI 161 PM10 AQI 72 O3 AQI 3 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. (Unhealthy)
<span style='%style;font-size:12px;padding:5px 10px;'>%cityname AQI: %impact</span>	Beijing AQI: Unhealthy
%cityname Air Quality is <span style='%style;padding:0 5px'>%impact</span> (%aqiv on %date)	Beijing Air Quality is Unhealthy ( 161 Beijing Air Quality. 161 Unhealthy Updated on Monday 23:00 PM2.5 AQI 161 PM10 AQI 72 O3 AQI 3 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. on Monday 23:00)
%cityname Air Quality is provided by %attribution	Beijing Air Quality is provided by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心)
<div style='%style;max-width:180px;text-align:center;'><small>%cityname AQI:</small> <div style='font-size:88px;height:60px;padding-top:30px;'>%aqiv</div> %impact</div>	Beijing AQI: 161 Beijing Air Quality. 161 Unhealthy Updated on Monday 23:00 PM2.5 AQI 161 PM10 AQI 72 O3 AQI 3 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information. Unhealthy
%details	Beijing Air Quality. 161 Unhealthy Updated on Monday 23:00 PM2.5 AQI 161 PM10 AQI 72 O3 AQI 3 Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

If you prefer DIY integration, you can also specify a javascript function callback to be when the data is loaded. You just need to add the option callback in the parameter block, such as for instance:

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

For instance, assuming that you are also using jquery, the following code:

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

will produce the following content:

Pekin Jakość powietrza.

161

Unhealthy

Poprawiony: Poniedziałek 23:00

PM2.5 AQI		161
PM10 AQI		72
O3 AQI		3

Data monitored by Beijing Environmental Protection Monitoring Center (北京市环境保护监测中心) . Click for more information.

The aqi objects contains all the keywords mentioned in the section C (display format).

Including multiple widgets in a single page is possible. All you need is to pass to the `_aqiFeed` function an array with all the widgets you need to include. For instance, to insert London, Paris and New York, can do use this code:

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

London

72

London Air Quality.

72

Moderate

Updated on Monday 14:00

PM2.5 AQI		72
PM10 AQI		31
O3 AQI		27

Data monitored by UK-AIR, air quality information resource - Defra, UK , London Air Quality Network - Environmental Research Group, King's College London . Click for more information.

Monday 14:00

New-york

-

New-york Air Quality.

-

Not Available

Never updated!

Data monitored by . Click for more information.

Thursday 9:00

Seoul

53

Seoul Air Quality.

53

Moderate

Updated on Tuesday 0:00

PM2.5 AQI		53
PM10 AQI		30
O3 AQI		27

Data monitored by South Air Korea Environment Corporation (대기오염실시간공개시스템) , Seoul Clean Air Pollution Information (서울특별시 기후대기환경정보) . Click for more information.

Tuesday 0:00

Guangzhou

-

Guangzhou Air Quality.

-

Not Available

Updated on Tuesday, Mar 4th 2025

PM2.5 AQI

-

Data monitored by Guangzhou Environmental Protection Bureau (广州市生态环境局) , China National Urban air quality real-time publishing platform (全国城市空气质量实时发布平台) , U.S. Consulate Guangzhou Air Quality Monitor . Click for more information.

Tuesday 20:00

Hibiyakoen, Chiyoda, Tokyo

61

Hibiyakoen, Chiyoda, Tokyo Air Quality.

61

Moderate

Updated on Monday 23:00

PM2.5 AQI		61
PM10 AQI		19
O3 AQI		36

Data monitored by Japan Atmospheric Environmental Regional Observation System (環境省大気汚染物質広域監視システム) , Tokyo, Japan Environment Agency (東京都環境局) . Click for more information.

Monday 23:00

Shanghai

114

Shanghai Air Quality.

114

Unhealthy for Sensitive Groups

Updated on Monday 23:00

PM2.5 AQI		114
PM10 AQI		50
O3 AQI		34

Data monitored by Shanghai Environment Monitoring Center(上海市环境监测中心) , China National Urban air quality real-time publishing platform (全国城市空气质量实时发布平台) , U.S. Consulate Shanghai Air Quality Monitor . Click for more information.

Monday 23:00

Paris

31

Paris Air Quality.

31

Good

Updated on Monday 14:00

PM2.5 AQI		31
PM10 AQI		7
O3 AQI		25

Data monitored by AirParif - Association de surveillance de la qualité de l'air en Île-de-France , European Environment Agency . Click for more information.

Monday 14:00

HongKong

54

HongKong Air Quality.

54

Moderate

Updated on Monday 22:00

PM2.5 AQI		54
PM10 AQI		14
O3 AQI		10

Data monitored by Hong Kong Environmental Protection Department - 空氣質素健康指數單張及海報 . Click for more information.

Monday 22:00

This widget feed is provided for free, and for the sole purpose of integrating the feed into other websites (i.e. apps are excluded), and under the condition of reasonable and acceptable use. We reserve the right to change the feed structure (data format) at any time and without prior notice, so better to contact us if you plan to do a custom integration.

When doing the integration, there are few deontological rules which should be applied when using the data feed:

• First, always make sure that the attribution to the originating EPA is present. All the Air Quality data you can find on the World Air Quality Index project is thanks to the hard work from all the EPA's all over the world, so please make sure to provide the attribution for their work too. If you use the programmatic API, the attribution is available from the attribution field.
• If you are from an institution and using the data, please, show respect and pay back the credits for our work. If you are trying to scrape the data feed, please, keep in mind that this project relies on sponsorship and cooperation projects, so consider supporting us rather than scrapping us, especially if you are a large scale institution or university.
• As a matter of fact, do not act like the WRI (World Resource Institute ): Scrapping the overall World Air Quality Index project data feed, and beeing so cheap that they would not even give any attribution for our work, and this despite their 80 millions annual USD fundings. Don't believe us? Check this snapshot.

This is the first version of this new widget feed API. There are quite a few improvements already in the pipeline, such as adjustable graphic width and height, selectable AQI scale, etc. If you would like to suggest any other specific improvement, feel free to send us a message.