Folosind un singur script:

Sau folosind un iframe:

De asemenea, puteți specifica un identificator de container (id-ul „div”) atunci când utilizați scriptul:

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

Integrarea de bază este simplă și directă. Mai întâi trebuie să adăugați următoarea bucată de cod:

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

Apoi, trebuie doar să adăugați acest alt cod pentru a include widget-ul:

Funcția `_waqiFeed` ia ca argument configurația pentru widget. Trebuie doar să definiți stația și stilul de afișare a widgetului ( size ). Acesta este ceea ce se produce:

De asemenea, puteți specifica identificatorul containerului (id-ul „div”) unde trebuie afișat widget-ul:

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

Formatul de afișare poate fi modificat prin schimbarea parametrului size la unul dintre acestea:

Este posibil să personalizați textul care urmează să fie afișat în cadrul widget-ului prin specificarea opțiunii display . De exemplu, pentru a afișa atât numele textual „AQI”, cât și timpul de actualizare (așa cum se arată în widgetul din stânga), puteți utiliza următorul cod:

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

display parametrului este un șir bazat pe HTML și poate conține oricare dintre următoarele cuvinte cheie:

• `%cityname` pentru numele orașului (de exemplu Beijing ),
• `%aqi` pentru valoarea AQI decorată (de ex. 58 ),
• `%aqiv` pentru valoarea AQI nedecorată (text brut) (de ex. 58 ),
• `%style` pentru declarația css a detaliilor AQI decorate (de exemplu background-color: #ffde33;color:#000000; ),
• `%date` pentru ora la care a fost actualizat AQI (de exemplu Wed 20:00 ),
• `%impact` pentru impactul asociat asupra sănătății (de exemplu, Good , Moderate ...)
• `%attribution` pentru atribuirea datelor AQI (de exemplu Beijing Environmental Protection Monitoring Center )
• `%details` pentru detaliile complete AQI (conținutul pop-up-ului afișat când deplasați mouse-ul peste valoarea AQI).

Iată câteva exemple:

De asemenea, puteți specifica limba care va fi utilizată setând opțiunea lang . De exemplu, pentru a include widget-ul în chineză (așa cum se arată în dreapta), utilizați următorul cod:

Limbile acceptate în prezent sunt:

Faceți clic pe oricare dintre widget-urile de mai jos pentru a vedea codul asociat: