Menggunakan satu skrip:

Atau menggunakan iframe:

Anda juga dapat menentukan pengidentifikasi kontainer (id 'div') saat menggunakan skrip:

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

Integrasi dasarnya sederhana dan mudah. Anda harus terlebih dahulu menambahkan potongan kode berikut:

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

Lalu, tambahkan saja kode lain ini untuk menyertakan widget:

Fungsi `_waqiFeed` mengambil argumen konfigurasi widget. Anda hanya perlu menentukan stasiun, dan gaya tampilan widget ( size ). Inilah yang dihasilkan:

Anda juga dapat menentukan pengidentifikasi kontainer (id 'div') di mana widget perlu ditampilkan:

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

Format tampilan dapat diubah dengan mengubah parameter size ke salah satu dari berikut ini:

Dimungkinkan untuk menyesuaikan teks yang akan ditampilkan dalam widget dengan menentukan opsi display . Misalnya, untuk menampilkan nama tekstual "AQI" serta waktu pembaruan (seperti yang ditunjukkan pada widget di sebelah kiri), Anda dapat menggunakan kode berikut:

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

display parameter adalah string berbasis HTML, dan dapat berisi salah satu kata kunci berikut:

• `%cityname` untuk nama kota (misalnya Beijing ),
• `%aqi` untuk nilai AQI yang dihias (misalnya 58 ),
• `%aqiv` untuk nilai AQI yang tidak didekorasi (teks mentah) (misalnya 58 ),
• `%style` untuk deklarasi css dari detail AQI yang dihias (misalnya background-color: #ffde33;color:#000000; ),
• `%tanggal` untuk waktu saat AQI diperbarui (misalnya Wed 20:00 ),
• `%dampak` untuk dampak kesehatan yang terkait (misalnya Good , Moderate ...)
• `%attribution` untuk atribusi data AQI (misalnya Beijing Environmental Protection Monitoring Center )
• `%details` untuk detail AQI lengkap (isi popup yang ditampilkan saat mengarahkan mouse ke nilai AQI).

Berikut beberapa contohnya:

Anda juga dapat menentukan bahasa yang akan digunakan dengan mengatur opsi lang . Misalnya, untuk menyertakan widget dalam bahasa Mandarin (seperti yang ditunjukkan di sebelah kanan), gunakan kode berikut:

Bahasa yang didukung saat ini adalah:

Klik salah satu widget di bawah untuk melihat kode terkait: