Temel entegrasyon basit ve basittir. Öncelikle aşağıdaki kod parçasını eklemeniz gerekir:

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

Ardından, widget'ı eklemek için bu diğer kodu eklemeniz yeterlidir:

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

'_aqiFeed' işlevi, widget'ın yapılandırma bloğunu argüman olarak alır. `container: "city-aqi-container"` parametresi, widget'ı eklemek istediğiniz etiketin kimliğini ifade eder (örn. `<span id='city-aqi-container'></span>`), ve parametre city geçerli Hava Kalitesi ölçümünü göstermek istediğiniz şehrin adı (örn. `şehir: "london"`).

Ayrıca lang seçeneğini ayarlayarak kullanılacak dili de belirleyebilirsiniz. Örneğin, widget'ı Çince eklemek için (sağda gösterildiği gibi) aşağıdaki kodu kullanın:

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

Şu anda desteklenen diller şunlardır:

display seçeneğini belirleyerek widget içerisinde görüntülenecek metni özelleştirmek mümkündür. Örneğin, hem metinsel "AQI" adını hem de güncelleme zamanını (soldaki widget'ta gösterildiği gibi) görüntülemek için aşağıdaki kodu kullanabilirsiniz:

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

Parametre display HTML tabanlı bir dizedir ve aşağıdaki anahtar sözcüklerden herhangi birini içerebilir:

• Şehrin adı için `%cityname` (örn. Beijing ),
• Dekore edilmiş AQI değeri için '%aqi' (örn. 58 ),
• Dekore edilmemiş (ham metin) AQI değeri için '%aqiv' (örn. 58 ),
• Dekore edilmiş AQI ayrıntılarının css bildirimi için '%style' (örn. background-color: #ffde33;color:#000000; ),
• AQI'nin güncellendiği zaman için "%tarih" (örn. Wed 20:00 ),
• İlişkili sağlık etkisi için "%etki" (örn. Good , Moderate ...)
• AQI veri ilişkilendirmesi için "%attribution" (örn. Beijing Environmental Protection Monitoring Center )
• Tam AQI ayrıntıları için "%details" (fareyi AQI değerinin üzerine getirdiğinizde görüntülenen açılır pencerenin içeriği).

İşte birkaç örnek:

DIY entegrasyonunu tercih ediyorsanız, veriler yüklendiğinde bir javascript işlevi geri çağrısı da belirleyebilirsiniz. Parametre bloğuna callback seçeneğini eklemeniz yeterlidir, örneğin:

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

Örneğin jquery kullandığınızı varsayarsak aşağıdaki kod:

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

aşağıdaki içeriği üretecektir:

aqi nesneleri, C bölümünde (görüntü formatı) bahsedilen tüm anahtar kelimeleri içerir.

Tek bir sayfaya birden fazla widget eklemek mümkündür. İhtiyacınız olan tek şey, eklemeniz gereken tüm widget'ları içeren bir diziyi `_aqiFeed` işlevine iletmektir. Örneğin, Londra, Paris ve New York'u eklemek için şu kodu kullanabilirsiniz:

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

Bu widget feed'i ücretsiz olarak ve yalnızca feed'i diğer web sitelerine entegre etme amacıyla (yani uygulamalar hariç) ve makul ve kabul edilebilir kullanım koşuluyla sağlanmaktadır. Besleme yapısını (veri formatını) istediğimiz zaman ve önceden bildirimde bulunmaksızın değiştirme hakkımızı saklı tutuyoruz; bu nedenle, özel bir entegrasyon yapmayı planlıyorsanız bizimle iletişime geçmeniz daha iyi olur.

Entegrasyon yapılırken veri akışını kullanırken uygulanması gereken birkaç deontolojik kural vardır:

• İlk olarak, her zaman kaynak EPA'ya atfın mevcut olduğundan emin olun. Dünya Hava Kalitesi Endeksi projesinde bulabileceğiniz tüm Hava Kalitesi verileri, dünyanın her yerindeki EPA'ların sıkı çalışmaları sayesinde elde edilmiştir; bu nedenle lütfen onların çalışmalarına ilişkin atıfları da sağladığınızdan emin olun. Programatik API kullanıyorsanız ilişkilendirmeye, attribution alanından ulaşılabilir.
• Eğer bir kurumdan geliyorsanız ve verileri kullanıyorsanız lütfen saygı gösterin ve çalışmalarımızın kredisini geri ödeyin. Veri akışını sıyırmaya çalışıyorsanız lütfen bu projenin sponsorluk ve işbirliği projelerine dayandığını unutmayın, o yüzden özellikle büyük ölçekli bir kurum veya üniversite iseniz bizi hurdaya çıkarmak yerine desteklemeyi düşünün.
• Hatta WRI ( Dünya Kaynak Enstitüsü ) gibi davranmayın: Dünya Hava Kalitesi Endeksi proje veri akışının tamamını çöpe atıp, bizim çalışmalarımıza herhangi bir atıf bile yapmayacak kadar ucuza mal edin, üstelik bu onların 80'lerine rağmen. Milyonlarca dolarlık yıllık finansman. Bize inanmıyor musun? Bu anlık görüntüyü kontrol edin.

Bu, yeni widget feed'i API'sinin ilk sürümüdür. Ayarlanabilir grafik genişliği ve yüksekliği, seçilebilir AQI ölçeği vb. gibi halihazırda geliştirilme aşamasında olan pek çok iyileştirme bulunmaktadır. Başka herhangi bir spesifik iyileştirme önermek isterseniz, bize mesaj göndermekten çekinmeyin.