使用單一腳本：

或使用 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` 用於裝飾 AQI 詳細資訊的 css 宣告（例如background-color: #ffde33;color:#000000; ），
• `%date` 表示 AQI 更新的時間（例如Wed 20:00 ），
• `%impact` 表示相關的健康影響（例如Good 、 Moderate ...）
• 「%attribution」為AQI資料歸屬（如Beijing Environmental Protection Monitoring Center ）
• `%details` 取得完整的 AQI 詳細資訊（將滑鼠移到 AQI 值上時顯示的彈出視窗內容）。

這裡有一些例子：

您也可以透過設定lang選項來指定要使用的語言。例如，要包含中文小工具（如右圖所示），請使用下列程式碼：

目前支援的語言有：

點擊下面的任何小部件即可查看相關程式碼：