Using a single script:

Or using an iframe:

You can also specify a container identifier ('div' id) when using the script:

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

The basic integration is simple and straight forward. You first need to add the following piece of code:

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

Then, just add this other code to include the widget:

The function `_waqiFeed` takes as argument the configuration for the widget. You just need to define the station, and the widget display style (size). This is what is produces:

You can also specify the container identifier ('div' id) where the widget needs to be shown:

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

The display format can be changed by changing the size parameter to one of those:

It is possible to customize the text to be displayed within the widget by specifying the display option. For instance, to display with both the textual "AQI" name as well as the update time (as shown on the widget on the left), you can use the following code:

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

The parameter display is an HTML-based string, and can contain any of the following keywords:

• `%cityname` for the name of the city (eg Beijing),
• `%aqi` for the decorated AQI value (eg 58),
• `%aqiv` for the undecorated (raw text) AQI value (eg 58),
• `%style` for the css declaration of the decorated AQI details (eg background-color: #ffde33;color:#000000;),
• `%date` for the time at which the AQI was updated (eg Wed 20:00),
• `%impact` for the associated health impact (eg Good, Moderate...)
• `%attribution` for the AQI data attribution ( eg Beijing Environmental Protection Monitoring Center)
• `%details` for the full AQI details (the content of the popup displayed when moving the mouse over the AQI value).

Here are a few examples:

You can also specify the language to be used by setting the lang option. For instance, to include the widget in Chinese (as shown on the right), use the following code:

The currently supported languages are:

Click on any of the widgets below to see the associated code: