Usando un solo script:

O usando un iframe:

También puede especificar un identificador de contenedor (id 'div') cuando utilice el script:

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

La integración básica es simple y directa. Primero debe agregar el siguiente fragmento de código:

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

Luego, simplemente agrega este otro código para incluir el widget:

La función `_waqiFeed` toma como argumento la configuración del widget. Sólo necesita definir la estación y el estilo de visualización del widget ( size ). Esto es lo que se produce:

También puede especificar el identificador del contenedor (id 'div') donde se debe mostrar el widget:

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

El formato de visualización se puede cambiar cambiando el parámetro size a uno de estos:

Es posible personalizar el texto que se mostrará dentro del widget especificando la opción display . Por ejemplo, para mostrar tanto el nombre textual "AQI" como la hora de actualización (como se muestra en el widget de la izquierda), puede usar el siguiente código:

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

La display del parámetro es una cadena basada en HTML y puede contener cualquiera de las siguientes palabras clave:

• `%cityname` para el nombre de la ciudad (por ejemplo, Beijing ),
• `%aqi` para el valor AQI decorado (por ejemplo, 58 ),
• `%aqiv` para el valor AQI sin decorar (texto sin formato) (por ejemplo, 58 ),
• `%style` para la declaración CSS de los detalles de AQI decorados (por ejemplo, background-color: #ffde33;color:#000000; ),
• `%date` para la hora a la que se actualizó el AQI (por ejemplo, Wed 20:00 ),
• `%impacto` para el impacto en la salud asociado (por ejemplo, Good , Moderate ...)
• `%atribución` para la atribución de datos de AQI (p. ej. Beijing Environmental Protection Monitoring Center )
• `%details` para obtener los detalles completos de AQI (el contenido de la ventana emergente que se muestra al mover el mouse sobre el valor de AQI).

Aquí están algunos ejemplos:

También puede especificar el idioma que se utilizará configurando la opción lang . Por ejemplo, para incluir el widget en chino (como se muestra a la derecha), use el siguiente código:

Los idiomas admitidos actualmente son:

Haga clic en cualquiera de los widgets a continuación para ver el código asociado: