การใช้สคริปต์เดียว:

หรือใช้ 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 )
• `%style` สำหรับการประกาศ CSS ของรายละเอียด AQI ที่ตกแต่งแล้ว (เช่น background-color: #ffde33;color:#000000; )
• `%date` สำหรับเวลาที่ AQI ได้รับการอัปเดต (เช่น Wed 20:00 . )
• `%impact` สำหรับผลกระทบต่อสุขภาพที่เกี่ยวข้อง (เช่น Good Moderate ...)
• `%attribution` สำหรับการระบุแหล่งที่มาของข้อมูล AQI (เช่น Beijing Environmental Protection Monitoring Center )
• `%details` สำหรับรายละเอียด AQI แบบเต็ม (เนื้อหาของป๊อปอัปที่แสดงเมื่อเลื่อนเมาส์ไปเหนือค่า AQI)

นี่คือตัวอย่างบางส่วน:

คุณยังสามารถระบุภาษาที่จะใช้โดยการตั้งค่าตัวเลือก lang ตัวอย่างเช่น หากต้องการรวมวิดเจ็ตเป็นภาษาจีน (ดังภาพด้านขวา) ให้ใช้โค้ดต่อไปนี้:

ภาษาที่รองรับในปัจจุบันคือ:

คลิกที่วิดเจ็ตใดๆ ด้านล่างเพื่อดูโค้ดที่เกี่ยวข้อง: