Usando um único script:

Ou usando um iframe:

Você também pode especificar um identificador de contêiner (id 'div') ao usar o script:

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

A integração básica é simples e direta. Primeiro você precisa adicionar o seguinte trecho de código:

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

Depois, basta adicionar este outro código para incluir o widget:

A função `_waqiFeed` toma como argumento a configuração do widget. Você só precisa definir a estação e o estilo de exibição do widget ( size ). Isto é o que produz:

Você também pode especificar o identificador do contêiner (id 'div') onde o widget precisa ser mostrado:

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

O formato de exibição pode ser alterado alterando o parâmetro size para um destes:

É possível personalizar o texto a ser exibido no widget especificando a opção display . Por exemplo, para exibir tanto o nome textual "AQI" quanto o tempo de atualização (conforme mostrado no widget à esquerda), você pode usar o seguinte código:

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

O parâmetro display é uma string baseada em HTML e pode conter qualquer uma das seguintes palavras-chave:

• `%cityname` para o nome da cidade (por exemplo, Beijing ),
• `%aqi` para o valor AQI decorado (por exemplo, 58 ),
• `%aqiv` para o valor AQI não decorado (texto bruto) (por exemplo, 58 ),
• `%style` para a declaração css dos detalhes AQI decorados (por exemplo background-color: #ffde33;color:#000000; ),
• `%date` para o horário em que o AQI foi atualizado (por exemplo, Wed 20:00 ),
• `%impact` para o impacto na saúde associado (por exemplo, Good , Moderate ...)
• `%attribution` para atribuição de dados AQI (por exemplo Beijing Environmental Protection Monitoring Center )
• `%details` para obter os detalhes completos do AQI (o conteúdo do pop-up exibido ao mover o mouse sobre o valor do AQI).

Aqui estão alguns exemplos:

Você também pode especificar o idioma a ser usado definindo a opção lang . Por exemplo, para incluir o widget em chinês (conforme mostrado à direita), use o seguinte código:

Os idiomas atualmente suportados são:

Clique em qualquer um dos widgets abaixo para ver o código associado: