Выкарыстоўваючы адзін скрыпт:

Ці з дапамогай iframe:

Вы таксама можаце паказаць ідэнтыфікатар кантэйнера (ідэнтыфікатар 'div') пры выкарыстанні скрыпту:

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

Базавая інтэграцыя простая і зразумелая. Спачатку трэба дадаць наступны фрагмент кода:

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

Затым проста дадайце гэты іншы код, каб уключыць віджэт:

Функцыя `_waqiFeed` прымае ў якасці аргументу канфігурацыю для віджэта. Вам проста трэба вызначыць станцыю і стыль адлюстравання віджэта ( size ). Вось што вырабляе:

Вы таксама можаце паказаць ідэнтыфікатар кантэйнера ('div' id), дзе віджэт павінен быць паказаны:

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

Фармат адлюстравання можна змяніць, змяніўшы параметр size на адзін з наступных:

Можна наладзіць тэкст, які будзе адлюстроўвацца ў віджэце, указаўшы опцыю display . Напрыклад, каб адлюстраваць як тэкставае імя "AQI", так і час абнаўлення (як паказана на віджэце злева), вы можаце выкарыстоўваць наступны код:

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

display параметраў - гэта радок на аснове HTML і можа ўтрымліваць любое з наступных ключавых слоў:

• `%cityname` для назвы горада (напрыклад, Beijing ),
• `%aqi` для аформленага значэння AQI (напрыклад, 58 ),
• `%aqiv` для неаформленага (неапрацаванага тэксту) значэння AQI (напрыклад, 58 ),
• `%style` для дэкларацыі CSS упрыгожаных дэталяў AQI (напрыклад, background-color: #ffde33;color:#000000; ),
• `%date` для часу, калі быў абноўлены AQI (напрыклад, Wed 20:00 ),
• `%impact` для адпаведнага ўздзеяння на здароўе (напрыклад, Good , Moderate ...)
• `%attribution` для атрыбуцыі даных AQI (напрыклад, Beijing Environmental Protection Monitoring Center )
• `%details` для поўных звестак аб AQI (змесціва ўсплывальнага акна, якое адлюстроўваецца пры навядзенні мышы на значэнне AQI).

Вось некалькі прыкладаў:

Вы таксама можаце вызначыць мову, якая будзе выкарыстоўвацца, усталяваўшы параметр lang . Напрыклад, каб уключыць віджэт на кітайскай мове (як паказана справа), выкарыстоўвайце наступны код:

Зараз падтрымліваюцца наступныя мовы:

Націсніце на любы з віджэтаў ніжэй, каб убачыць звязаны код: