Osnovna integracija je jednostavna i jasna. Prvo morate dodati sljedeći dio koda:

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

Zatim samo dodajte ovaj drugi kod da biste uključili widget:

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

Funkcija `_aqiFeed` uzima kao argument konfiguracijski blok za widget. Parametar `kontejner: "city-aqi-container"` se odnosi na id oznake u koju želite da umetnete widget (npr. `<span id='city-aqi-container'></span>`), i parametar city naziv grada za koji želite da prikažete trenutno očitavanje kvaliteta zraka (npr. `grad: "london"`).

Također možete odrediti jezik koji će se koristiti postavljanjem opcije lang . Na primjer, da biste uključili widget na kineskom (kao što je prikazano desno), koristite sljedeći kod:

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

Trenutno podržani jezici su:

Moguće je prilagoditi tekst koji će se prikazati unutar widgeta navođenjem opcije display . Na primjer, za prikaz i s tekstualnim imenom "AQI" kao i sa vremenom ažuriranja (kao što je prikazano na widgetu s lijeve strane), možete koristiti sljedeći kod:

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

display parametara je niz baziran na HTML-u i može sadržavati bilo koju od sljedećih ključnih riječi:

• `%cityname` za ime grada (npr. Beijing ),
• `%aqi` za ukrašenu AQI vrijednost (npr. 58 ),
• `%aqiv` za neukrašenu (neobrađenu) vrijednost AQI (npr. 58 ),
• `%style` za css deklaraciju ukrašenih AQI detalja (npr. background-color: #ffde33;color:#000000; ),
• `%date` za vrijeme u kojem je AQI ažuriran (npr. Wed 20:00 ),
• `%uticaj` za povezani utjecaj na zdravlje (npr. Good , Moderate ...)
• `%attribution` za AQI atribuciju podataka (npr. Beijing Environmental Protection Monitoring Center )
• `%details` za potpune detalje AQI (sadržaj iskačućeg prozora koji se prikazuje kada se mišem pomaknete preko vrijednosti AQI).

Evo nekoliko primjera:

Ako više volite DIY integraciju, također možete odrediti da povratni poziv javascript funkcije bude kada se podaci učitaju. Vi samo trebate dodati opciju callback u blok parametara, kao što je na primjer:

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

Na primjer, pod pretpostavkom da također koristite jquery, sljedeći 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>

će proizvesti sljedeći sadržaj:

aqi objekti sadrže sve ključne riječi spomenute u odjeljku C (format prikaza).

Moguće je uključivanje više widgeta na jednu stranicu. Sve što trebate je proslijediti funkciji `_aqiFeed` niz sa svim widgetima koje trebate uključiti. Na primjer, da biste umetnuli London, Pariz i New York, možete koristiti ovaj kod:

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

Ovaj widget feed je dostupan besplatno i isključivo u svrhu integracije feeda u druge web stranice (tj. aplikacije su isključene) i pod uvjetom razumne i prihvatljive upotrebe. Zadržavamo pravo promjene strukture feeda (formata podataka) u bilo koje vrijeme i bez prethodne najave, stoga je bolje da nas kontaktirate ako planirate napraviti prilagođenu integraciju.

Prilikom integracije postoji nekoliko deontoloških pravila koja treba primijeniti pri korištenju feeda podataka:

• Prvo, uvijek se uvjerite da postoji pripisivanje izvornoj EPA. Svi podaci o kvaliteti zraka koje možete pronaći na projektu Svjetskog indeksa kvalitete zraka zahvaljuju se napornom radu svih EPA-a širom svijeta, pa vas molimo da navedete i njihov rad. Ako koristite programski API, atribucija je dostupna iz polja attribution .
• Ukoliko ste iz institucije i koristite podatke, molimo vas da pokažite poštovanje i vratite kredite za naš rad. Ako pokušavate da izvučete izvor podataka, imajte na umu da se ovaj projekat oslanja na projekte sponzorstva i saradnje, pa razmislite o tome da nas podržite , a ne da nas odbacite, posebno ako ste institucija ili univerzitet velike veličine.
• Zapravo, nemojte se ponašati kao WRI ( Svjetski institut za resurse ): ukidanje cjelokupnog izvora podataka o projektu Svjetskog indeksa kvalitete zraka i tako jeftino da ne bi ni dali nikakvu atribuciju za naš rad, i to uprkos njihovim 80 milionska godišnja sredstva u USD. Ne verujete nam? Provjerite ovaj snimak .

Ovo je prva verzija ovog novog widget feed API-ja. Već postoji dosta poboljšanja u pripremi, kao što su podesiva širina i visina grafike, izbor AQI skale, itd. Ako želite da predložite bilo koje drugo specifično poboljšanje, slobodno nam pošaljite poruku.