Az alapvető integráció egyszerű és egyértelmű. Először hozzá kell adnia a következő kódrészletet:

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

Ezután adja hozzá ezt a másik kódot a widget felvételéhez:

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

Az `_aqiFeed` függvény a widget konfigurációs blokkját veszi argumentumként. A `container: "city-aqi-container"` paraméter annak a címkének az azonosítójára utal, amelybe be szeretné szúrni a modult (pl. `<span id='city-aqi-container'></span>`), a city paraméter pedig annak a városnak a neve, amelyre vonatkozóan meg szeretné jeleníteni az aktuális levegőminőségi értéket (pl. `város: "london"`).

A használandó nyelvet a lang beállításával is megadhatja. Ha például a widgetet kínai nyelven szeretné beilleszteni (amint a jobb oldalon látható), használja a következő kódot:

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

A jelenleg támogatott nyelvek a következők:

Lehetőség van a widgeten belüli szöveg testreszabására a display opció megadásával. Például a szöveges "AQI" név és a frissítési idő (a bal oldali widgeten látható) megjelenítéséhez a következő kódot használhatja:

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

A display egy HTML-alapú karakterlánc, és a következő kulcsszavak bármelyikét tartalmazhatja:

• "%cityname" a város nevéhez (pl. Beijing ),
• "%aqi" a díszített AQI értékhez (pl. 58 ),
• "%aqiv" a díszítetlen (nyers szöveg) AQI értékhez (pl. 58 ),
• `%style` a díszített AQI részletek css deklarációjához (pl. background-color: #ffde33;color:#000000; ),
• "%dátum" az AQI frissítésének időpontjára (pl. Wed 20:00 ),
• "%impact" a kapcsolódó egészségügyi hatásra (pl. Good , Moderate ...)
• "%attribúció" az AQI adatok hozzárendeléséhez (pl. Beijing Environmental Protection Monitoring Center )
• "%részletek" a teljes AQI részlethez (a felugró ablak tartalma, amely akkor jelenik meg, amikor az egeret az AQI érték fölé viszi).

Íme néhány példa:

Ha inkább a barkács integrációt részesíti előnyben, megadhat egy JavaScript-függvény-visszahívást is az adatok betöltésekor. Csak hozzá kell adnia a callback opciót a paraméterblokkhoz, például:

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

Például, ha feltételezzük, hogy jquery-t is használ, a következő kód:

  
<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 következő tartalmat fogja előállítani:

Az aqi objektumok a C részben (megjelenítési formátum) említett kulcsszavakat tartalmazzák.

Egy oldalon több widget is elhelyezhető. Csak át kell adnia az `_aqiFeed` függvénynek egy tömböt az összes szükséges widgettel. Például London, Párizs és New York beszúrásához használja ezt a kódot:

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

Ezt a widget-hírcsatornát ingyenesen biztosítjuk, és kizárólag azzal a céllal áll rendelkezésre, hogy a hírcsatornát integrálja más webhelyekkel (azaz az alkalmazásokat kizárjuk), ésszerű és elfogadható felhasználási feltételek mellett. Fenntartjuk a jogot, hogy bármikor és előzetes értesítés nélkül megváltoztassuk a feed szerkezetét (adatformátumát), ezért jobb, ha felveszi velünk a kapcsolatot, ha egyéni integrációt tervez.

Az integráció során néhány deontológiai szabályt kell alkalmazni az adatfolyam használatakor:

• Először mindig győződjön meg arról, hogy az eredeti EPA-hoz való hozzárendelés szerepel. A World Air Quality Index projektben megtalálható összes levegőminőségi adat a világ összes EPA kemény munkájának köszönhető, ezért kérjük, feltétlenül adja meg munkájuk forrását is. Ha az automatizált API-t használja, a hozzárendelés a attribution mezőből érhető el.
• Ha Ön intézményből származik, és használja az adatokat, kérjük, mutasson tiszteletet és fizesse vissza a munkánkért járó kreditet. Ha megpróbálja lekaparni az adatfolyamot, kérjük, ne feledje, hogy ez a projekt szponzori és együttműködési projekteken alapul, ezért fontolja meg, hogy támogasson minket , semmint selejtezést, különösen, ha Ön egy nagy intézmény vagy egyetem.
• Ami azt illeti, ne járjunk úgy, mint a WRI ( World Resource Institute ): letöröljük a World Air Quality Index projekt teljes adatfolyamát, és olyan olcsóak, hogy még csak a mi munkánknak sem tulajdonítanák el, és ez annak ellenére, hogy 80 millió dolláros éves támogatás. Nem hisz nekünk? Ellenőrizze ezt a pillanatképet .

Ez az új widget feed API első verziója. Jó néhány fejlesztés van már folyamatban, mint például az állítható grafikus szélesség és magasság, választható AQI skála stb. Ha bármilyen konkrét fejlesztést szeretne javasolni, írjon nekünk.