Korištenje jedne skripte:

Ili pomoću iframea:

Također možete navesti identifikator spremnika ('div' id) kada koristite skriptu:

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

Osnovna integracija je jednostavna i izravna. Najprije trebate dodati sljedeći dio koda:

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

Zatim samo dodajte ovaj drugi kod da uključite widget:

Funkcija `_waqiFeed` kao argument uzima konfiguraciju za widget. Vi samo trebate definirati stanicu i stil prikaza widgeta ( size ). Ovo je ono što proizvodi:

Također možete navesti identifikator spremnika ('div' id) gdje widget treba biti prikazan:

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

Format prikaza može se promijeniti promjenom parametra size na jedan od ovih:

Moguće je prilagoditi tekst koji će biti prikazan unutar widgeta određivanjem opcije display . Na primjer, za prikaz s tekstualnim nazivom "AQI" kao i vremenom ažuriranja (kao što je prikazano na widgetu s lijeve strane), možete koristiti sljedeći kod:

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

display parametra je niz temeljen 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đeni tekst) AQI vrijednost (npr. 58 ),
• `%style` za CSS deklaraciju ukrašenih AQI detalja (npr. background-color: #ffde33;color:#000000; ),
• `%datum` za vrijeme kada je AQI ažuriran (npr. Wed 20:00 ),
• `%impact` za povezani utjecaj na zdravlje (npr. Good , Moderate ...)
• `%attribution` za dodjelu podataka AQI (npr. Beijing Environmental Protection Monitoring Center )
• `%details` za potpune pojedinosti o AQI (sadržaj skočnog prozora koji se prikazuje kada prijeđete mišem preko vrijednosti AQI).

Evo nekoliko primjera:

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

Trenutno podržani jezici su:

Kliknite bilo koji od donjih widgeta da biste vidjeli pridruženi kod: