Використання одного сценарію:

Або за допомогою iframe:

Ви також можете вказати ідентифікатор контейнера ('div' id) під час використання сценарію:

<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 . Наприклад, щоб включити віджет китайською мовою (як показано праворуч), використовуйте такий код:

Наразі підтримуються такі мови:

Натисніть на будь-який із наведених нижче віджетів, щоб переглянути відповідний код: