単一のスクリプトを使用する場合:

または 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 )、
• 装飾された AQI 詳細の CSS 宣言の `%style` (例: background-color: #ffde33;color:#000000; )、
• `%date` は AQI が更新された時刻 (例: Wed 20:00 )、
• 関連する健康への影響の `%impact` (例: Good 、 Moderate ...)
• AQI データ帰属の `%attribution` (例: Beijing Environmental Protection Monitoring Center )
• 完全な AQI 詳細 (AQI 値の上にマウスを移動すると表示されるポップアップの内容) の `%details`。

以下にいくつかの例を示します。

langオプションを設定して、使用する言語を指定することもできます。たとえば、中国語のウィジェットを含めるには (右に示すように)、次のコードを使用します。

現在サポートされている言語は次のとおりです。

以下のウィジェットのいずれかをクリックすると、関連するコードが表示されます。