باستخدام برنامج نصي واحد:

أو باستخدام إطار iframe:

يمكنك أيضًا تحديد معرف الحاوية (معرف 'div') عند استخدام البرنامج النصي:

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

التكامل الأساسي بسيط ومباشر. تحتاج أولاً إلى إضافة الجزء التالي من التعليمات البرمجية:

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

بعد ذلك، ما عليك سوى إضافة هذا الرمز الآخر لتضمين الأداة:

تستخدم الدالة `_waqiFeed` تكوين الأداة كوسيطة. تحتاج فقط إلى تحديد المحطة، ونمط عرض القطعة ( size ). وهذا ما ينتج:

يمكنك أيضًا تحديد معرف الحاوية (معرف 'div') حيث يجب عرض الأداة:

<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 )،
• `%style` لإعلان CSS لتفاصيل AQI المزخرفة (على سبيل المثال، background-color: #ffde33;color:#000000; )،
• `%date` للوقت الذي تم فيه تحديث مؤشر جودة الهواء (AQI) (على سبيل المثال، Wed 20:00 )،
• `%impact` للتأثير الصحي المرتبط (على سبيل المثال، Good ، Moderate ...)
• "نسبة الإسناد" لإسناد بيانات تنظيم القاعدة في العراق (على سبيل المثال، Beijing Environmental Protection Monitoring Center )
• `%details` للحصول على تفاصيل AQI الكاملة (يتم عرض محتوى النافذة المنبثقة عند تحريك الماوس فوق قيمة AQI).

وفيما يلي بعض الأمثلة على ذلك:

يمكنك أيضًا تحديد اللغة التي سيتم استخدامها عن طريق ضبط خيار lang . على سبيل المثال، لتضمين الأداة باللغة الصينية (كما هو موضح على اليمين)، استخدم الكود التالي:

اللغات المدعومة حاليًا هي:

انقر على أي من الأدوات أدناه لرؤية الكود المرتبط: