Използване на един скрипт:

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

В момента поддържаните езици са:

Щракнете върху някоя от джаджите по-долу, за да видите свързания код: