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

  
<script  type="text/javascript"  charset="utf-8">  
	(function  (w,  d,  t,  f)  {  
		w[f]  =  w[f]  ||  function  (c,  k,  n)  {  
			s  =  w[f],  k  =  s['k']  =  (s['k']  ||  (k  ?  ('&k='  +  k)  :  ''));  s['c']  =  
				c  =  (c  instanceof  Array)  ?  c  :  [c];  s['n']  =  n  =  n  ||  0;  L  =  d.createElement(t),  e  =  d.getElementsByTagName(t)[0];  
			L.async  =  1;  L.src  =  '//feed.aqicn.org/feed/'  +  (c[n].city)  +  '/'  +  (c[n].lang  ||  '')  +  '/feed.v1.js?n='  +  n  +  k;  
			e.parentNode.insertBefore(L,  e);  
		};  
	})(window,  document,  'script',  '_aqiFeed');    
</script>

Lalu, tambahkan saja kode lain ini untuk menyertakan widget:

  
<span  id="city-aqi-container"></span>  
  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  container:  "city-aqi-container",  city:  "beijing"  });  
</script>

Fungsi `_aqiFeed` mengambil argumen blok konfigurasi untuk widget. Parameter `container: "city-aqi-container"` mengacu pada id tag yang ingin Anda masukkan widgetnya (misalnya `<span id='city-aqi-container'></span>`), dan parameter city nama kota yang ingin Anda tampilkan pembacaan Kualitas Udaranya saat ini (misalnya `kota: "london"`).

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:

  
_aqiFeed({  
	container:"city-aqi-container",  
	city:"beijing",  
	lang:"cn"  
});  

Bahasa yang didukung saat ini adalah:

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:

  
_aqiFeed({    
	display:"%cityname  AQI  is  %aqi<br><small>on  %date</small>",  
	container:"city-aqi-container-display",    
	city:"beijing"  
});  

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:

Jika Anda lebih suka integrasi DIY, Anda juga dapat menentukan panggilan balik fungsi javascript saat data dimuat. Anda hanya perlu menambahkan opsi callback di blok parameter, seperti misalnya:

  
_aqiFeed({  city:"beijing",  callback:function(aqi){  
	/*  Do  whatever  you  want  with  the  AQI  object  */  
	console.log(aqi);    
}  });

Misalnya, dengan asumsi Anda juga menggunakan jquery, kode berikut:

  
<div  id='my-container'></div>  
<script  type="text/javascript"  charset="utf-8">  
	_aqiFeed({  
		city:  "beijing",  lang:  "pl",  callback:  function  (aqi)  {  
			$("#my-container").html(aqi.details);  
		}  
	});  
</script>

akan menghasilkan konten berikut:

Objek aqi berisi semua kata kunci yang disebutkan di bagian C (format tampilan).

Menyertakan beberapa widget dalam satu halaman dimungkinkan. Yang Anda butuhkan hanyalah meneruskan ke fungsi `_aqiFeed` sebuah array dengan semua widget yang perlu Anda sertakan. Misalnya untuk memasukkan London, Paris dan New York, dapat menggunakan kode ini:

  
var  cities  =  ["london",  "newyork",  "seoul",  "guangzhou",  "tokyo",  "shanghai",  "paris","hongkong"];  
  
var  aqiWidgetConfig  =  [];    
cities.forEach(function(city)  {  aqiWidgetConfig.push({city:city,  callback:  displayCity});  });  
_aqiFeed(aqiWidgetConfig);  
  
function  displayCity(aqi)  {  
	$("#mutiple-city-aqi").append(aqi.text("<center>%cityname<br>%aqi<br><small>%date</small></center>"));  
}  

Umpan widget ini disediakan secara gratis, dan dengan tujuan semata-mata untuk mengintegrasikan umpan ke situs web lain (yaitu aplikasi tidak termasuk), dan dalam kondisi penggunaan yang wajar dan dapat diterima. Kami berhak mengubah struktur feed (format data) kapan saja dan tanpa pemberitahuan sebelumnya, jadi lebih baik menghubungi kami jika Anda berencana melakukan integrasi khusus.

Saat melakukan integrasi, ada beberapa aturan deontologis yang harus diterapkan saat menggunakan data feed:

• Pertama, selalu pastikan bahwa ada atribusi ke EPA asal. Semua data Kualitas Udara yang dapat Anda temukan di proyek Indeks Kualitas Udara Dunia adalah berkat kerja keras dari seluruh EPA di seluruh dunia, jadi pastikan untuk memberikan atribusi atas pekerjaan mereka juga. Jika Anda menggunakan API terprogram, atribusi tersedia dari bidang attribution .
• Jika Anda berasal dari suatu institusi dan menggunakan data tersebut, mohon tunjukkan rasa hormat dan bayar kembali penghargaan atas pekerjaan kami. Jika Anda mencoba menghapus data feed, harap diingat bahwa proyek ini bergantung pada sponsorship dan proyek kerja sama, jadi pertimbangkan untuk mendukung kami daripada membuang kami, terutama jika Anda adalah institusi atau universitas berskala besar.
• Faktanya, jangan bertindak seperti WRI ( World Resource Institute ): Menghapus keseluruhan data proyek Indeks Kualitas Udara Dunia , dan bersikap sangat murah sehingga mereka bahkan tidak memberikan atribusi apa pun atas pekerjaan kami, meskipun mereka 80 jutaan pendanaan USD tahunan. Tidak percaya kami? Periksa cuplikan ini.

Ini adalah versi pertama dari API umpan widget baru ini. Ada beberapa perbaikan yang sedang direncanakan, seperti lebar dan tinggi grafis yang dapat disesuaikan, skala AQI yang dapat dipilih, dll. Jika Anda ingin menyarankan perbaikan spesifik lainnya, silakan kirimkan pesan kepada kami.