Použití jediného skriptu:

Nebo pomocí prvku iframe:

Při použití skriptu můžete také zadat identifikátor kontejneru (id 'div'):

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

Základní integrace je jednoduchá a přímočará. Nejprve musíte přidat následující část kódu:

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

Poté stačí přidat tento další kód, abyste zahrnuli widget:

Funkce `_waqiFeed` bere jako argument konfiguraci widgetu. Stačí definovat stanici a styl zobrazení widgetu ( size ). To je to, co se vyrábí:

Můžete také zadat identifikátor kontejneru („div“ id), kde se má widget zobrazit:

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

Formát zobrazení lze změnit změnou parametru size na jeden z těchto:

Je možné upravit text, který se má zobrazit v rámci widgetu, zadáním možnosti display . Chcete-li například zobrazit textový název „AQI“ i čas aktualizace (jak je znázorněno na widgetu vlevo), můžete použít následující kód:

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

Parametr display je řetězec založený na HTML a může obsahovat libovolné z následujících klíčových slov:

• `%cityname` pro název města (např. Beijing ),
• `%aqi` pro dekorovanou hodnotu AQI (např. 58 ),
• `%aqiv` pro hodnotu AQI bez zdobení (surový text) (např 58 ),
• `%style` pro deklaraci css dekorovaných detailů AQI (např. background-color: #ffde33;color:#000000; ),
• `%date` pro čas, kdy bylo AQI aktualizováno (např. Wed 20:00 ),
• `%impact` pro související zdravotní dopad (např. Good , Moderate ...)
• `%attribution` pro atribuci dat AQI (např. Beijing Environmental Protection Monitoring Center )
• `%details` pro úplné detaily AQI (obsah vyskakovacího okna zobrazený při najetí myší na hodnotu AQI).

Zde je několik příkladů:

Můžete také určit jazyk, který se má použít, nastavením možnosti lang . Chcete-li například zahrnout widget v čínštině (jak je znázorněno vpravo), použijte následující kód:

Aktuálně podporované jazyky jsou:

Kliknutím na kterýkoli z níže uvedených widgetů zobrazíte související kód: