Egyetlen szkript használatával:

Vagy iframe használatával:

A szkript használatakor megadhat egy tárolóazonosítót ('div' id) is:

<div id='widget1' style='text-align: center'></div>

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

<script  src='https://aqicn.org/widgets/js/waqi-feed.v1.js'></script>

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

A `_waqiFeed` függvény a widget konfigurációját veszi argumentumként. Csak meg kell határoznia az állomást és a widget megjelenítési stílusát ( size ). Ez az, amit termel:

Megadhatja azt a tárolóazonosítót ('div' id) is, ahol a widgetet meg kell jeleníteni:

<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>

A megjelenítési formátum megváltoztatható a size paraméter módosításával az alábbiak valamelyikére:

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:

_waqiFeed({    
	display:"%cityname  AQI  is  <span  style='%style'>%impact  (%aqiv)</span>  <small>on  %date</small>",  
	station:"A373120"  
});  

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:

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:

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

Kattintson az alábbi widgetek bármelyikére a kapcsolódó kód megtekintéséhez: