Free Live AQI Widgets for Your Website

Add auto-updating air quality to your blog, dashboard or newsroom — three widget styles, light or dark, with a link back to the live report. No script, no signup: just paste one iframe.

Which widget should I use?

City badge — a small AQI number + category for one city. Great in a sidebar or footer (≈320×150).
City card — a larger card with the AQI, category and a 0–500 scale bar (≈300×190).
Most polluted cities — a live top-5 India ranking that refreshes hourly (≈300×290).
Air distribution — a national bar showing how many cities are in each AQI band right now (≈340×180).
Near me — auto-detects the visitor's location and shows their nearest city's AQI. The embed needs allow="geolocation" (already included in the code below).

WordPress shortcode

Prefer a shortcode to raw iframes? Paste this into your theme's functions.php (or a code-snippets plugin) once:

function dailyaqi_widget($atts){
  $a = shortcode_atts(array('type'=>'card','city'=>'delhi','theme'=>'light','width'=>'300','height'=>'190'), $atts);
  $nocity = in_array($a['type'], array('ranking','distribution','nearme'));
  $q = 'type='.rawurlencode($a['type']).'&theme='.rawurlencode($a['theme']).($nocity ? '' : '&city='.rawurlencode($a['city']));
  $allow = $a['type']==='nearme' ? ' allow="geolocation"' : '';
  return '<iframe src="https://dailyaqi.com/embed/badge/?'.esc_attr($q).'" style="border:0;width:'.intval($a['width']).'px;height:'.intval($a['height']).'px;max-width:100%" loading="lazy" title="Live AQI"'.$allow.'></iframe>';
}
add_shortcode('dailyaqi', 'dailyaqi_widget');

Then use it anywhere: [dailyaqi city="mumbai" type="card"], [dailyaqi type="ranking"], or [dailyaqi type="nearme"].

Widgets are free to use with the "via DailyAQI" attribution link kept intact. Data © CPCB (India) / OpenAQ (world), computed with the national/US AQI methods. Values update automatically every hour.