Коришћење једне скрипте:

Или користећи ифраме:

Такође можете да наведете идентификатор контејнера („див“ ид) када користите скрипту:

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

Основна интеграција је једноставна и директна. Прво морате да додате следећи део кода:

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

Затим само додајте овај други код да бисте укључили виџет:

Функција `_вакиФеед` узима као аргумент конфигурацију за виџет. Потребно је само да дефинишете станицу и стил приказа виџета ( size ). Ово је оно што производи:

Такође можете да наведете идентификатор контејнера ('див' ид) где виџет треба да се прикаже:

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

Формат приказа се може променити променом параметра size у један од ових:

Могуће је прилагодити текст који ће бити приказан у оквиру виџета тако што ћете навести опцију display . На пример, да бисте приказали и текстуални назив „АКИ“ као и време ажурирања (као што је приказано на виџету са леве стране), можете да користите следећи код:

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

display параметра је стринг заснован на ХТМЛ-у и може да садржи било коју од следећих кључних речи:

• `%цитинаме` за име града (нпр. Beijing ),
• `%аки` за украшену АКИ вредност (нпр. 58 ),
• `%акив` за неукрашену (необрађени текст) АКИ вредност (нпр. 58 ),
• `%стиле` за цсс декларацију украшених АКИ детаља (нпр. background-color: #ffde33;color:#000000; ),
• `%дате` за време када је АКИ ажуриран (нпр. Wed 20:00 ),
• `%утицај` за повезани утицај на здравље (нпр. Good , Moderate ...)
• `%аттрибутион` за АКИ приписивање података (нпр. Beijing Environmental Protection Monitoring Center )
• `%детаилс` за пуне детаље АКИ-а (садржај искачућег прозора који се приказује када се мишем помери преко вредности АКИ).

Ево неколико примера:

Такође можете одредити језик који ће се користити постављањем опције lang . На пример, да бисте укључили виџет на кинеском (као што је приказано десно), користите следећи код:

Тренутно подржани језици су:

Кликните на било који од виџета у наставку да бисте видели повезани код: