Korzystanie z jednego skryptu:

Lub używając elementu iframe:

Podczas korzystania ze skryptu możesz także określić identyfikator kontenera („div”):

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

Podstawowa integracja jest prosta i bezpośrednia. Najpierw musisz dodać następujący fragment kodu:

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

Następnie po prostu dodaj ten inny kod, aby dołączyć widżet:

Funkcja `_waqiFeed` przyjmuje jako argument konfigurację widgetu. Wystarczy zdefiniować stację i styl wyświetlania widżetu ( size ). Oto co produkuje:

Możesz także określić identyfikator kontenera (identyfikator „div”), w którym ma być wyświetlany widget:

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

Format wyświetlania można zmienić zmieniając parametr size na jeden z poniższych:

Istnieje możliwość dostosowania tekstu wyświetlanego w widżecie poprzez określenie opcji display . Na przykład, aby wyświetlić zarówno tekstową nazwę „AQI”, jak i czas aktualizacji (jak pokazano na widżecie po lewej stronie), możesz użyć następującego kodu:

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

display parametr jest ciągiem opartym na formacie HTML i może zawierać dowolne z następujących słów kluczowych:

• `%cityname` dla nazwy miasta (np. Beijing ),
• `%aqi` dla udekorowanej wartości AQI (np. 58 ),
• `%aqiv` dla niedekorowanej (surowego tekstu) wartości AQI (np. 58 ),
• `%style` dla deklaracji css dekorowanych szczegółów AQI (np. background-color: #ffde33;color:#000000; ),
• `%data` oznacza czas aktualizacji AQI (np. Wed 20:00 ),
• „%wpływ” dla powiązanego wpływu na zdrowie (np. Good , Moderate ...)
• „% przypisania” dla przypisania danych AQI (np. Beijing Environmental Protection Monitoring Center )
• `%details` dla pełnych szczegółów AQI (zawartość wyskakującego okienka wyświetlanego po najechaniu myszką na wartość AQI).

Oto kilka przykładów:

Możesz także określić używany język, ustawiając opcję lang . Na przykład, aby dołączyć widget w języku chińskim (jak pokazano po prawej), użyj następującego kodu:

Obecnie obsługiwane języki to:

Kliknij dowolny z poniższych widżetów, aby wyświetlić powiązany kod: