ایک اسکرپٹ کا استعمال کرتے ہوئے:

یا ایک 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 )
• `%aqiv` غیر سجاوٹ (کچے متن) AQI قدر (مثلاً 58 ) کے لیے
• آرائش شدہ AQI تفصیلات کے سی ایس ایس ڈیکلریشن کے لیے `%style` (مثلاً background-color: #ffde33;color:#000000; )
• `%تاریخ` اس وقت کے لیے جس میں AQI کو اپ ڈیٹ کیا گیا تھا (مثلاً Wed 20:00 )،
• متعلقہ صحت کے اثرات کے لیے `% اثر` (مثلاً Good ، Moderate ...)
• AQI ڈیٹا انتساب کے لیے `%انتساب` (مثلا Beijing Environmental Protection Monitoring Center )
• AQI کی مکمل تفصیلات کے لیے `%تفصیلات` (ماؤس کو AQI قدر پر منتقل کرنے پر ظاہر ہونے والا پاپ اپ مواد)۔

یہاں چند مثالیں ہیں:

آپ lang آپشن سیٹ کر کے استعمال کی جانے والی زبان کی بھی وضاحت کر سکتے ہیں۔ مثال کے طور پر، چینی میں ویجیٹ شامل کرنے کے لیے (جیسا کہ دائیں طرف دکھایا گیا ہے)، درج ذیل کوڈ کا استعمال کریں:

فی الحال تعاون یافتہ زبانیں ہیں:

متعلقہ کوڈ دیکھنے کے لیے نیچے دیے گئے کسی بھی ویجٹ پر کلک کریں: