बुनियादी एकीकरण सरल और सीधा है। आपको सबसे पहले कोड का निम्नलिखित भाग जोड़ना होगा:

  
<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>

फिर, विजेट को शामिल करने के लिए बस यह अन्य कोड जोड़ें:

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

फ़ंक्शन `_aqiFeed` विजेट के लिए कॉन्फ़िगरेशन ब्लॉक को तर्क के रूप में लेता है। पैरामीटर `कंटेनर: "सिटी-एक्यूआई-कंटेनर"` उस टैग की आईडी को संदर्भित करता है जिसमें आप विजेट सम्मिलित करना चाहते हैं (उदाहरण के लिए `<span id='city-aqi-container'></span>`), और पैरामीटर city उस शहर का नाम है जिसके लिए आप वर्तमान वायु गुणवत्ता रीडिंग दिखाना चाहते हैं (उदाहरण के लिए `शहर: "लंदन"`)।

आप lang विकल्प सेट करके उपयोग की जाने वाली भाषा भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए, विजेट को चीनी भाषा में शामिल करने के लिए (जैसा कि दाईं ओर दिखाया गया है), निम्नलिखित कोड का उपयोग करें:

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

वर्तमान में समर्थित भाषाएँ हैं:

display विकल्प निर्दिष्ट करके विजेट के भीतर प्रदर्शित होने वाले टेक्स्ट को अनुकूलित करना संभव है। उदाहरण के लिए, पाठ्य "AQI" नाम के साथ-साथ अद्यतन समय (जैसा कि बाईं ओर विजेट पर दिखाया गया है) दोनों के साथ प्रदर्शित करने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

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

पैरामीटर display एक HTML-आधारित स्ट्रिंग है, और इसमें निम्नलिखित में से कोई भी कीवर्ड हो सकता है:

• शहर के नाम के लिए `%cityname` (जैसे Beijing ),
• सजाए गए AQI मान के लिए `%aqi` (जैसे 58 ),
• बिना सजे (कच्चे पाठ) AQI मान के लिए `%aqiv` (जैसे 58 ),
• सजाए गए AQI विवरण की सीएसएस घोषणा के लिए `%style` (उदाहरण के लिए background-color: #ffde33;color:#000000; ),
• `%दिनांक` उस समय के लिए जब AQI अद्यतन किया गया था (उदाहरण के लिए Wed 20:00 ),
• संबंधित स्वास्थ्य प्रभाव के लिए `%प्रभाव` (जैसे Good , Moderate ...)
• AQI डेटा एट्रिब्यूशन के लिए `%एट्रिब्यूशन` (उदाहरण के लिए Beijing Environmental Protection Monitoring Center )
• पूर्ण AQI विवरण के लिए `% विवरण` (AQI मान पर माउस ले जाने पर पॉपअप की सामग्री प्रदर्शित होती है)।

कुछ उदाहरण निम्नलिखित हैं:

यदि आप DIY एकीकरण पसंद करते हैं, तो आप डेटा लोड होने पर जावास्क्रिप्ट फ़ंक्शन कॉलबैक भी निर्दिष्ट कर सकते हैं। आपको बस पैरामीटर ब्लॉक में विकल्प callback जोड़ने की आवश्यकता है, उदाहरण के लिए:

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

उदाहरण के लिए, यह मानते हुए कि आप भी jquery का उपयोग कर रहे हैं, निम्न कोड:

  
<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>

निम्नलिखित सामग्री तैयार करेगा:

aqi ऑब्जेक्ट में अनुभाग C (प्रदर्शन प्रारूप) में उल्लिखित सभी कीवर्ड शामिल हैं।

एक ही पृष्ठ में एकाधिक विजेट शामिल करना संभव है। आपको बस `_aqiFeed` फ़ंक्शन में उन सभी विजेट्स के साथ एक सरणी पास करनी है जिन्हें आपको शामिल करना है। उदाहरण के लिए, लंदन, पेरिस और न्यूयॉर्क सम्मिलित करने के लिए, इस कोड का उपयोग कर सकते हैं:

  
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>"));  
}  

यह विजेट फ़ीड निःशुल्क प्रदान की जाती है, और फ़ीड को अन्य वेबसाइटों में एकीकृत करने के एकमात्र उद्देश्य के लिए (यानी ऐप्स को बाहर रखा गया है), और उचित और स्वीकार्य उपयोग की शर्त के तहत प्रदान किया जाता है। हम किसी भी समय और पूर्व सूचना के बिना फ़ीड संरचना (डेटा प्रारूप) को बदलने का अधिकार सुरक्षित रखते हैं, इसलिए यदि आप कस्टम एकीकरण करने की योजना बना रहे हैं तो हमसे संपर्क करना बेहतर होगा।

एकीकरण करते समय, कुछ डेंटोलॉजिकल नियम हैं जिन्हें डेटा फ़ीड का उपयोग करते समय लागू किया जाना चाहिए:

• सबसे पहले, हमेशा सुनिश्चित करें कि मूल ईपीए का श्रेय मौजूद है। विश्व वायु गुणवत्ता सूचकांक परियोजना पर आप जो भी वायु गुणवत्ता डेटा पा सकते हैं, वह दुनिया भर के सभी ईपीए की कड़ी मेहनत का धन्यवाद है, इसलिए कृपया उनके काम का श्रेय भी प्रदान करना सुनिश्चित करें। यदि आप प्रोग्रामेटिक एपीआई का उपयोग करते हैं, तो एट्रिब्यूशन attribution फ़ील्ड से उपलब्ध है।
• यदि आप किसी संस्थान से हैं और डेटा का उपयोग कर रहे हैं, तो कृपया सम्मान दिखाएं और हमारे काम का श्रेय चुकाएं। यदि आप डेटा फ़ीड को स्क्रैप करने का प्रयास कर रहे हैं, तो कृपया ध्यान रखें कि यह परियोजना प्रायोजन और सहयोग परियोजनाओं पर निर्भर करती है, इसलिए हमें स्क्रैप करने के बजाय हमारा समर्थन करने पर विचार करें, खासकर यदि आप बड़े पैमाने पर संस्थान या विश्वविद्यालय हैं।
• वास्तव में, डब्ल्यूआरआई ( विश्व संसाधन संस्थान ) की तरह कार्य न करें: समग्र विश्व वायु गुणवत्ता सूचकांक परियोजना डेटा फ़ीड को खत्म करना, और इतना सस्ता होना कि वे हमारे काम के लिए कोई श्रेय भी नहीं देंगे, और यह उनके 80 के बावजूद है लाखों वार्षिक USD फंडिंग। हमें विश्वास नहीं है? इस स्नैपशॉट को जांचें.

यह इस नए विजेट फ़ीड एपीआई का पहला संस्करण है। पाइपलाइन में पहले से ही कुछ सुधार हैं, जैसे समायोज्य ग्राफिक चौड़ाई और ऊंचाई, चयन योग्य AQI स्केल, आदि। यदि आप कोई अन्य विशिष्ट सुधार सुझाना चाहते हैं, तो बेझिझक हमें एक संदेश भेजें।