Основна интеграција је једноставна и директна. Прво морате да додате следећи део кода:

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

Функција `_акиФеед` узима као аргумент конфигурациони блок за виџет. Параметар `контејнер: "цити-аки-цонтаинер"` се односи на ид ознаке у коју желите да уметнете виџет (нпр. `<спан ид='цити-аки-цонтаинер'></спан>`), а параметар city назив града за који желите да прикажете тренутно очитавање квалитета ваздуха (нпр. `град: "лондон"`).

Такође можете одредити језик који ће се користити постављањем опције lang . На пример, да бисте укључили виџет на кинеском (као што је приказано десно), користите следећи код:

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

Тренутно подржани језици су:

Могуће је прилагодити текст који ће бити приказан у оквиру виџета тако што ћете навести опцију display . На пример, да бисте приказали и текстуални назив „АКИ“ као и време ажурирања (као што је приказано на виџету са леве стране), можете да користите следећи код:

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

display параметра је стринг заснован на ХТМЛ-у и може да садржи било коју од следећих кључних речи:

• `%цитинаме` за име града (нпр. Beijing ),
• `%аки` за украшену АКИ вредност (нпр. 58 ),
• `%акив` за неукрашену (необрађени текст) АКИ вредност (нпр. 58 ),
• `%стиле` за цсс декларацију украшених АКИ детаља (нпр. background-color: #ffde33;color:#000000; ),
• `%дате` за време када је АКИ ажуриран (нпр. Wed 20:00 ),
• `%утицај` за повезани утицај на здравље (нпр. Good , Moderate ...)
• `%аттрибутион` за АКИ приписивање података (нпр. Beijing Environmental Protection Monitoring Center )
• `%детаилс` за пуне детаље АКИ-а (садржај искачућег прозора који се приказује када се мишем помери преко вредности АКИ).

Ево неколико примера:

Ако више волите „уради сам“ интеграцију, такође можете одредити да повратни позив јавасцрипт функције буде када се подаци учитају. Само треба да додате опцију callback у блок параметара, као што је на пример:

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

На пример, под претпоставком да такође користите јкуери, следећи код:

  
<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 објекти садрже све кључне речи поменуте у одељку Ц (формат приказа).

Могуће је укључивање више виџета на једну страницу. Све што треба је да проследите функцији `_акиФеед` низ са свим виџетима које треба да укључите. На пример, да бисте убацили Лондон, Париз и Њујорк, можете користити овај код:

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

Овај фид виџета се пружа бесплатно и искључиво у сврху интеграције фида у друге веб локације (тј. апликације су искључене) и под условом разумне и прихватљиве употребе. Задржавамо право да променимо структуру фида (формат података) у било ком тренутку и без претходног обавештења, тако да је боље да нас контактирате ако планирате да урадите прилагођену интеграцију.

Када радите интеграцију, постоји неколико деонтолошких правила која треба применити када користите фид података:

• Прво, увек се уверите да постоји приписивање изворној ЕПА. Сви подаци о квалитету ваздуха које можете пронаћи на пројекту Светског индекса квалитета ваздуха су захваљујући напорном раду свих ЕПА-а широм света, па вас молимо да наведете и атрибуцију за њихов рад. Ако користите програмски АПИ, атрибуција је доступна у пољу attribution .
• Ако сте из институције и користите податке, молимо вас да покажете поштовање и вратите заслуге за наш рад. Ако покушавате да извучете фид података, имајте на уму да се овај пројекат ослања на пројекте спонзорства и сарадње, па размислите о томе да нас подржите , а не да нас одбаците, посебно ако сте институција или универзитет великих размера.
• У ствари, немојте се понашати као ВРИ ( Институт светских ресурса ): укидање целокупног извора података о пројекту Светског индекса квалитета ваздуха и тако јефтини да не би ни дали никакву атрибуцију за наш рад, и то упркос њиховим 80 милионска годишња средства у УСД. Не верујете нам? Проверите овај снимак .

Ово је прва верзија овог новог АПИ-ја за фид виџета. Већ постоји доста побољшања у припреми, као што су подесива ширина и висина графике, избор АКИ скале, итд. Ако желите да предложите било које друго специфично побољшање, слободно нам пошаљите поруку.