基本整合簡單而直接。首先需要加入以下程式碼：

  
<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 比例等。如果您想提出任何其他具體改進建議，請隨時向我們發送訊息。