Utilizzando un unico script:

Oppure utilizzando un iframe:

Puoi anche specificare un identificatore del contenitore (id 'div') quando utilizzi lo script:

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

L'integrazione di base è semplice e diretta. Devi prima aggiungere il seguente pezzo di codice:

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

Quindi, aggiungi semplicemente questo altro codice per includere il widget:

La funzione `_waqiFeed` prende come argomento la configurazione del widget. Devi solo definire la stazione e lo stile di visualizzazione del widget ( size ). Questo è ciò che viene prodotto:

Puoi anche specificare l'identificatore del contenitore (id 'div') in cui deve essere mostrato il widget:

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

Il formato di visualizzazione può essere modificato modificando il parametro size in uno di questi:

È possibile personalizzare il testo da visualizzare all'interno del widget specificando l'opzione display . Ad esempio, per visualizzare sia il nome testuale "AQI" che l'orario di aggiornamento (come mostrato nel widget a sinistra), è possibile utilizzare il seguente codice:

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

Il parametro display è una stringa basata su HTML e può contenere una qualsiasi delle seguenti parole chiave:

• `%cityname` per il nome della città (ad esempio Beijing ),
• `%aqi` per il valore AQI decorato (ad esempio 58 ),
• "%aqiv" per il valore AQI non decorato (testo grezzo) (ad esempio 58 ),
• `%style` per la dichiarazione css dei dettagli AQI decorati (ad esempio background-color: #ffde33;color:#000000; ),
• "%date" per l'ora in cui l'AQI è stato aggiornato (ad esempio Wed 20:00 ),
• "%impact" per l'impatto sulla salute associato (ad es. Good , Moderate ...)
• "%attribution" per l'attribuzione dei dati AQI (ad es. Beijing Environmental Protection Monitoring Center )
• "%dettagli" per i dettagli AQI completi (il contenuto del popup visualizzato quando si sposta il mouse sul valore AQI).

Ecco alcuni esempi:

È inoltre possibile specificare la lingua da utilizzare impostando l'opzione lang . Ad esempio, per includere il widget in cinese (come mostrato a destra), utilizza il seguente codice:

Le lingue attualmente supportate sono:

Clicca su uno qualsiasi dei widget qui sotto per vedere il codice associato: