使用单个脚本：

或者使用 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选项来指定要使用的语言。例如，要包含中文小部件（如右图所示），请使用以下代码：

目前支持的语言有：

单击下面的任何小部件即可查看相关代码：