基本集成简单而直接。首先需要添加以下代码：

  
<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>

然后，只需添加其他代码即可包含该小部件：

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

函数“_aqiFeed”将小部件的配置块作为参数。参数 `container: "city-aqi-container"` 是指要在其中插入小部件的标签的 id（例如 `<span id='city-aqi-container'></span>`），参数city是您要显示当前空气质量读数的城市的名称（例如`city：“london”`）。

您还可以通过设置lang选项来指定要使用的语言。例如，要包含中文小部件（如右图所示），请使用以下代码：

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

目前支持的语言有：

可以通过指定display选项来自定义要在小部件中显示的文本。例如，要显示文本“AQI”名称以及更新时间（如左侧小部件所示），您可以使用以下代码：

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

参数display是一个基于HTML的字符串，可以包含以下任意关键字：

• `%cityname` 为城市名称（例如Beijing ），
• `%aqi` 表示修饰后的 AQI 值（例如58 ），
• `%aqiv` 表示未修饰的（原始文本）AQI 值（例如58 ），
• `%style` 用于装饰 AQI 详细信息的 css 声明（例如background-color: #ffde33;color:#000000; ），
• `%date` 表示 AQI 更新的时间（例如Wed 20:00 ），
• `%impact` 表示相关的健康影响（例如Good 、 Moderate ......）
• “%attribution”为AQI数据归属（如Beijing Environmental Protection Monitoring Center ）
• `%details` 查看完整的 AQI 详细信息（将鼠标移动到 AQI 值上时显示的弹出窗口内容）。

这里有一些例子：

如果您更喜欢 DIY 集成，您还可以指定加载数据时的 JavaScript 函数回调。您只需要在参数块中添加选项callback ，例如：

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

例如，假设您也使用jquery，则以下代码：

  
<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>

将产生以下内容：

aqi对象包含 C 节（显示格式）中提到的所有关键字。

可以在单个页面中包含多个小部件。您所需要的只是将包含您需要包含的所有小部件的数组传递给“_aqiFeed”函数。例如，要插入伦敦、巴黎和纽约，可以使用以下代码：

  
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>"));  
}  

此小部件提要免费提供，其唯一目的是将提要集成到其他网站（即不包括应用程序），并且是在合理且可接受的使用条件下进行的。我们保留随时更改提要结构（数据格式）的权利，恕不另行通知，因此如果您计划进行自定义集成，最好联系我们。

在进行集成时，使用数据源时应应用一些义务论规则：

• 首先，始终确保原始 EPA 的归属信息存在。您可以在世界空气质量指数项目中找到的所有空气质量数据都归功于世界各地所有 EPA 的辛勤工作，因此请确保也提供他们工作的归属。如果您使用编程 API，则可从attribution字段获取归因。
• 如果您来自机构并使用这些数据，请表示尊重并偿还我们工作的积分。如果您正在尝试抓取数据源，请记住该项目依赖于赞助和合作项目，因此请考虑支持我们而不是废弃我们，特别是如果您是大型机构或大学。
• 事实上，不要像WRI （世界资源研究所）那样行事：废弃整个世界空气质量指数项目数据源，而且价格如此低廉，以至于他们甚至不会对我们的工作给予任何归属，尽管他们有 80每年数百万美元的资金。不相信我们？检查这个快照。

这是这个新的小部件提要 API 的第一个版本。目前已有相当多的改进正在酝酿中，例如可调节图形宽度和高度、可选择的 AQI 比例等。如果您想提出任何其他具体改进建议，请随时向我们发送消息。