Tek bir komut dosyası kullanarak:

Veya bir iframe kullanarak:

Betiği kullanırken bir kapsayıcı tanımlayıcısı ('div' kimliği) de belirtebilirsiniz:

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

Temel entegrasyon basit ve basittir. Öncelikle aşağıdaki kod parçasını eklemeniz gerekir:

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

Ardından, widget'ı eklemek için bu diğer kodu eklemeniz yeterlidir:

`_waqiFeed` işlevi, widget'ın yapılandırmasını argüman olarak alır. Sadece istasyonu ve widget görüntüleme stilini ( size ) tanımlamanız yeterlidir. Üretilen şey budur:

Widget'ın gösterilmesi gereken kapsayıcı tanımlayıcıyı ('div' kimliği) de belirtebilirsiniz:

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

size parametresi aşağıdakilerden birine değiştirilerek görüntüleme formatı değiştirilebilir:

display seçeneğini belirleyerek widget içerisinde görüntülenecek metni özelleştirmek mümkündür. Örneğin, hem metinsel "AQI" adını hem de güncelleme zamanını (soldaki widget'ta gösterildiği gibi) görüntülemek için aşağıdaki kodu kullanabilirsiniz:

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

Parametre display HTML tabanlı bir dizedir ve aşağıdaki anahtar sözcüklerden herhangi birini içerebilir:

• Şehrin adı için `%cityname` (örn. Beijing ),
• Dekore edilmiş AQI değeri için '%aqi' (örn. 58 ),
• Dekore edilmemiş (ham metin) AQI değeri için '%aqiv' (örn. 58 ),
• Dekore edilmiş AQI ayrıntılarının css bildirimi için '%style' (örn. background-color: #ffde33;color:#000000; ),
• AQI'nin güncellendiği zaman için "%tarih" (örn. Wed 20:00 ),
• İlişkili sağlık etkisi için "%etki" (örn. Good , Moderate ...)
• AQI veri ilişkilendirmesi için "%attribution" (örn. Beijing Environmental Protection Monitoring Center )
• Tam AQI ayrıntıları için "%details" (fareyi AQI değerinin üzerine getirdiğinizde görüntülenen açılır pencerenin içeriği).

İşte birkaç örnek:

Ayrıca lang seçeneğini ayarlayarak kullanılacak dili de belirleyebilirsiniz. Örneğin, widget'ı Çince eklemek için (sağda gösterildiği gibi) aşağıdaki kodu kullanın:

Şu anda desteklenen diller şunlardır:

İlgili kodu görmek için aşağıdaki widget'lardan herhangi birine tıklayın: