Việc tích hợp cơ bản rất đơn giản và dễ dàng. Trước tiên bạn cần thêm đoạn mã sau:

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

Sau đó, chỉ cần thêm mã khác này để bao gồm tiện ích:

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

Hàm `_aqiFeed` lấy khối cấu hình cho tiện ích làm đối số. Tham số `container: "city-aqi-container"` đề cập đến id của thẻ mà bạn muốn chèn tiện ích vào đó (ví dụ: `<span id='city-aqi-container'></span>`), và tham số city tên của thành phố mà bạn muốn hiển thị chỉ số Chất lượng không khí hiện tại (ví dụ: `city: "london"`).

Bạn cũng có thể chỉ định ngôn ngữ sẽ được sử dụng bằng cách đặt tùy chọn lang . Ví dụ: để bao gồm tiện ích bằng tiếng Trung (như hiển thị bên phải), hãy sử dụng mã sau:

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

Các ngôn ngữ hiện được hỗ trợ là:

Có thể tùy chỉnh văn bản sẽ được hiển thị trong tiện ích bằng cách chỉ định tùy chọn display . Ví dụ: để hiển thị cả tên "AQI" dạng văn bản cũng như thời gian cập nhật (như được hiển thị trên tiện ích bên trái), bạn có thể sử dụng mã sau:

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

display tham số là một chuỗi dựa trên HTML và có thể chứa bất kỳ từ khóa nào sau đây:

• `%cityname` cho tên thành phố (ví dụ Beijing ),
• `%aqi` cho giá trị AQI được trang trí (ví dụ 58 ),
• `%aqiv` cho giá trị AQI chưa được trang trí (văn bản thô) (ví dụ: 58 ),
• `%style` để khai báo css của các chi tiết AQI được trang trí (ví dụ background-color: #ffde33;color:#000000; ),
• `%date` cho thời điểm AQI được cập nhật (ví dụ: Wed 20:00 ),
• `%impact` cho tác động sức khỏe liên quan (ví dụ: Good , Moderate ...)
• `% ghi công` cho ghi nhận dữ liệu AQI ( ví dụ: Beijing Environmental Protection Monitoring Center )
• `%details` để biết chi tiết AQI đầy đủ (nội dung của cửa sổ bật lên được hiển thị khi di chuyển chuột qua giá trị AQI).

Dưới đây là một vài ví dụ:

Nếu muốn tích hợp DIY, bạn cũng có thể chỉ định lệnh gọi lại hàm javascript khi dữ liệu được tải. Bạn chỉ cần thêm tùy chọn callback trong khối tham số, chẳng hạn như:

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

Ví dụ: giả sử rằng bạn cũng đang sử dụng jquery, đoạn mã sau:

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

sẽ tạo ra nội dung sau:

Các đối tượng aqi chứa tất cả các từ khóa được đề cập trong phần C (định dạng hiển thị).

Có thể bao gồm nhiều vật dụng trong một trang. Tất cả những gì bạn cần là truyền vào hàm `_aqiFeed` một mảng có tất cả các tiện ích bạn cần đưa vào. Ví dụ: để chèn London, Paris và New York, có thể sử dụng mã này:

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

Nguồn cấp dữ liệu tiện ích này được cung cấp miễn phí và nhằm mục đích duy nhất là tích hợp nguồn cấp dữ liệu vào các trang web khác (tức là các ứng dụng bị loại trừ) và với điều kiện sử dụng hợp lý và được chấp nhận. Chúng tôi có quyền thay đổi cấu trúc nguồn cấp dữ liệu (định dạng dữ liệu) bất kỳ lúc nào và không cần thông báo trước, vì vậy tốt hơn hết hãy liên hệ với chúng tôi nếu bạn dự định thực hiện tích hợp tùy chỉnh.

Khi thực hiện tích hợp, có một số quy tắc nghĩa vụ cần được áp dụng khi sử dụng nguồn cấp dữ liệu:

• Trước tiên, hãy luôn đảm bảo rằng có sự ghi nhận của EPA ban đầu. Tất cả dữ liệu về Chất lượng Không khí mà bạn có thể tìm thấy trong dự án Chỉ số Chất lượng Không khí Thế giới là nhờ vào nỗ lực làm việc chăm chỉ của tất cả các EPA trên toàn thế giới, vì vậy hãy đảm bảo cung cấp thông tin ghi công cho công việc của họ. Nếu bạn sử dụng API có lập trình, thuộc tính sẽ có sẵn từ trường attribution .
• Nếu bạn đến từ một tổ chức và sử dụng dữ liệu, vui lòng thể hiện sự tôn trọng và trả lại các khoản tín dụng cho công việc của chúng tôi. Nếu bạn đang cố gắng thu thập nguồn cấp dữ liệu, xin lưu ý rằng dự án này dựa vào các dự án hợp tác và tài trợ, vì vậy hãy cân nhắc hỗ trợ chúng tôi thay vì loại bỏ chúng tôi, đặc biệt nếu bạn là một tổ chức hoặc trường đại học quy mô lớn.
• Trên thực tế, đừng hành động như WRI ( Viện Tài nguyên Thế giới ): Loại bỏ nguồn cấp dữ liệu tổng thể của dự án Chỉ số Chất lượng Không khí Thế giới và bán rẻ đến mức họ thậm chí không đưa ra bất kỳ ghi nhận nào cho công việc của chúng tôi, và điều này bất chấp 80 của họ triệu USD tài trợ hàng năm. Không tin chúng tôi? Kiểm tra ảnh chụp nhanh này.

Đây là phiên bản đầu tiên của API nguồn cấp dữ liệu tiện ích mới này. Có khá nhiều cải tiến đang được triển khai, chẳng hạn như chiều rộng và chiều cao đồ họa có thể điều chỉnh, thang đo AQI có thể lựa chọn, v.v. Nếu bạn muốn đề xuất bất kỳ cải tiến cụ thể nào khác, vui lòng gửi tin nhắn cho chúng tôi.