Eén enkel script gebruiken:

Of gebruik een iframe:

U kunt ook een container-ID ('div' id) opgeven wanneer u het script gebruikt:

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

De basisintegratie is eenvoudig en ongecompliceerd. Je moet eerst het volgende stukje code toevoegen:

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

Voeg vervolgens gewoon deze andere code toe om de widget op te nemen:

De functie `_waqiFeed` neemt als argument de configuratie voor de widget. U hoeft alleen maar het station en de weergavestijl van de widget ( size ) te definiëren. Dit is wat het produceert:

U kunt ook de container-ID ('div' id) opgeven waar de widget moet worden getoond:

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

Het weergaveformaat kan worden gewijzigd door de parameter size te wijzigen in een van de volgende:

Het is mogelijk om de tekst die in de widget moet worden weergegeven, aan te passen door de display op te geven. Om bijvoorbeeld zowel de tekstuele "AQI"-naam als de updatetijd weer te geven (zoals weergegeven in de widget aan de linkerkant), kunt u de volgende code gebruiken:

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

De display is een op HTML gebaseerde tekenreeks en kan een van de volgende trefwoorden bevatten:

• `%cityname` voor de naam van de stad (bijvoorbeeld Beijing ),
• `%aqi` voor de gedecoreerde AQI-waarde (bijv. 58 ),
• `%aqiv` voor de onversierde (onbewerkte tekst) AQI-waarde (bijv. 58 ),
• `%style` voor de CSS-declaratie van de gedecoreerde AQI-details (bijv. background-color: #ffde33;color:#000000; ),
• `%date` voor het tijdstip waarop de AQI is bijgewerkt (bijvoorbeeld Wed 20:00 ),
• `%impact` voor de bijbehorende gezondheidsimpact (bijv. Good , Moderate ...)
• `%attribution` voor de attributie van AQI-gegevens (bijv. Beijing Environmental Protection Monitoring Center )
• `%details` voor de volledige AQI-details (de inhoud van de pop-up die wordt weergegeven wanneer u de muis over de AQI-waarde beweegt).

Hier zijn een paar voorbeelden:

U kunt ook de te gebruiken taal opgeven door de lang in te stellen. Om de widget bijvoorbeeld in het Chinees op te nemen (zoals rechts weergegeven), gebruikt u de volgende code:

De momenteel ondersteunde talen zijn:

Klik op een van de onderstaande widgets om de bijbehorende code te bekijken: