À l'aide d'un seul script :

Ou en utilisant une iframe :

Vous pouvez également spécifier un identifiant de conteneur (identifiant 'div') lors de l'utilisation du script :

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

L'intégration de base est simple et directe. Vous devez d'abord ajouter le morceau de code suivant :

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

Ensuite, ajoutez simplement cet autre code pour inclure le widget :

La fonction `_waqiFeed` prend en argument la configuration du widget. Il vous suffit de définir la station, et le style d'affichage du widget ( size ). Voici ce que cela produit :

Vous pouvez également spécifier l'identifiant du conteneur (« div » id) où le widget doit être affiché :

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

Le format d'affichage peut être modifié en modifiant le paramètre size par l'un de ceux-ci :

Il est possible de personnaliser le texte à afficher dans le widget en spécifiant l'option display . Par exemple, pour afficher à la fois le nom textuel « AQI » ainsi que l'heure de mise à jour (comme indiqué sur le widget de gauche), vous pouvez utiliser le code suivant :

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

L' display du paramètre est une chaîne HTML et peut contenir l'un des mots-clés suivants :

• `%cityname` pour le nom de la ville (par exemple Beijing ),
• `%aqi` pour la valeur AQI décorée (par exemple 58 ),
• `%aqiv` pour la valeur AQI non décorée (texte brut) (par exemple 58 ),
• `%style` pour la déclaration css des détails AQI décorés (par exemple background-color: #ffde33;color:#000000; ),
• `%date` pour l'heure à laquelle l'AQI a été mis à jour (par exemple Wed 20:00 ),
• `%impact` pour l'impact sur la santé associé (ex : Good , Moderate ...)
• `%attribution` pour l'attribution des données AQI (par exemple Beijing Environmental Protection Monitoring Center )
• `%details` pour les détails complets de l'AQI (le contenu de la fenêtre contextuelle affichée lorsque vous déplacez la souris sur la valeur de l'AQI).

Voici quelques exemples:

Vous pouvez également spécifier la langue à utiliser en définissant l'option lang . Par exemple, pour inclure le widget en chinois (comme indiqué à droite), utilisez le code suivant :

Les langues actuellement prises en charge sont :

Cliquez sur l'un des widgets ci-dessous pour voir le code associé :