Sử dụng một tập lệnh duy nhất:

Hoặc sử dụng iframe:

Bạn cũng có thể chỉ định mã định danh vùng chứa (id 'div') khi sử dụng tập lệnh:

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

Việc tích hợp cơ bản rất đơn giản và dễ dàng. Trước tiên bạn cần thêm đoạn mã sau:

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

Sau đó, chỉ cần thêm mã khác này để bao gồm tiện ích:

Hàm `_waqiFeed` lấy cấu hình cho tiện ích làm đối số. Bạn chỉ cần xác định trạm và kiểu hiển thị widget ( size ). Đây là những gì được tạo ra:

Bạn cũng có thể chỉ định mã định danh vùng chứa (id 'div') nơi tiện ích cần được hiển thị:

<div id='widget2' style='text-align: center;border: 1px dashed #ccc;'></div>

Định dạng hiển thị có thể được thay đổi bằng cách thay đổi tham số size thành một trong các tham số sau:

Có thể tùy chỉnh văn bản sẽ được hiển thị trong tiện ích bằng cách chỉ định tùy chọn display . Ví dụ: để hiển thị cả tên "AQI" dạng văn bản cũng như thời gian cập nhật (như được hiển thị trên tiện ích bên trái), bạn có thể sử dụng mã sau:

_waqiFeed({    
	display:"%cityname  AQI  is  <span  style='%style'>%impact  (%aqiv)</span>  <small>on  %date</small>",  
	station:"A373120"  
});  

display tham số là một chuỗi dựa trên HTML và có thể chứa bất kỳ từ khóa nào sau đây:

• `%cityname` cho tên thành phố (ví dụ Beijing ),
• `%aqi` cho giá trị AQI được trang trí (ví dụ 58 ),
• `%aqiv` cho giá trị AQI chưa được trang trí (văn bản thô) (ví dụ: 58 ),
• `%style` để khai báo css của các chi tiết AQI được trang trí (ví dụ background-color: #ffde33;color:#000000; ),
• `%date` cho thời điểm AQI được cập nhật (ví dụ: Wed 20:00 ),
• `%impact` cho tác động sức khỏe liên quan (ví dụ: Good , Moderate ...)
• `% ghi công` cho ghi nhận dữ liệu AQI ( ví dụ: Beijing Environmental Protection Monitoring Center )
• `%details` để biết chi tiết AQI đầy đủ (nội dung của cửa sổ bật lên được hiển thị khi di chuyển chuột qua giá trị AQI).

Dưới đây là một vài ví dụ:

Bạn cũng có thể chỉ định ngôn ngữ sẽ được sử dụng bằng cách đặt tùy chọn lang . Ví dụ: để bao gồm tiện ích bằng tiếng Trung Quốc (như hiển thị bên phải), hãy sử dụng mã sau:

Các ngôn ngữ hiện được hỗ trợ là:

Nhấp vào bất kỳ tiện ích nào bên dưới để xem mã liên quan: