Koristeći jednu skriptu:

Ili koristeći iframe:

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

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

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

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

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

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

Također možete odrediti identifikator kontejnera ('div' id) gdje se widget treba prikazati:

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

Format prikaza može se promijeniti promjenom parametra size u jedan od sljedećih:

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:

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

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:

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:

Trenutno podržani jezici su:

Kliknite na bilo koji od widgeta u nastavku da vidite povezani kod: