একটি একক স্ক্রিপ্ট ব্যবহার করে:

অথবা একটি 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 ),
• অশোভিত (কাঁচা লেখা) AQI মানের জন্য `%aqiv` (যেমন 58 ),
• সজ্জিত AQI বিবরণের CSS ঘোষণার জন্য `% স্টাইল` (যেমন background-color: #ffde33;color:#000000; ),
• `% তারিখ` যে সময়ে AQI আপডেট করা হয়েছিল (যেমন Wed 20:00 ),
• সম্পর্কিত স্বাস্থ্য প্রভাবের জন্য `% প্রভাব` (যেমন Good , Moderate ...)
• AQI ডেটা অ্যাট্রিবিউশনের জন্য `% অ্যাট্রিবিউশন` (যেমন Beijing Environmental Protection Monitoring Center )
• সম্পূর্ণ AQI বিবরণের জন্য `% বিবরণ` (AQI মানের উপর মাউস সরানোর সময় প্রদর্শিত পপআপের বিষয়বস্তু)।

এখানে কিছু উদাহরণ আছে:

আপনি lang অপশন সেট করে ব্যবহার করা ভাষাও উল্লেখ করতে পারেন। উদাহরণস্বরূপ, উইজেটটি চীনা ভাষায় অন্তর্ভুক্ত করতে (যেমন ডানদিকে দেখানো হয়েছে), নিম্নলিখিত কোডটি ব্যবহার করুন:

বর্তমানে সমর্থিত ভাষাগুলি হল:

সংশ্লিষ্ট কোড দেখতে নিচের যেকোনো উইজেটে ক্লিক করুন: