Free Live AQI Widgets for Your Website

If your website serves readers who care about the weather, their health, travel or their city, live air quality is a natural addition — and you can add it in a minute, for free, with a single paste. DailyAQI's embeddable widgets show current AQI that updates on its own and links back to the full report, with no script to install and no account to create. This guide explains the widget styles available, how to install them, how to theme and configure them, and where they work best.

Why add live AQI to your site

Air quality is information people increasingly check daily, especially through the high-pollution season, and a site that surfaces it becomes more useful and more sticky. A news site can show the local reading beside a story; a health or clinic site can help patients decide about outdoor activity; a travel site can set expectations for a destination; a school or community page can inform decisions about outdoor events. Because the widgets read the same live feed as our own pages, your readers get trustworthy, hourly-fresh data that reflects official monitoring, presented in a small, tidy card that fits almost anywhere.

The widget styles

There are five styles, each suited to a different need:

• City badge — a compact block showing one city's AQI, category and colour. Ideal for a sidebar or header.
• City card — a larger card with the AQI, category and a 0–500 scale bar, for a more prominent placement.
• Most-polluted ranking — a live top-five of India's most polluted cities, good for news and topical pages.
• Air-distribution bar — a national bar showing how many cities are in each band right now, for an at-a-glance overview.
• Near me — an auto-locating card that shows the visitor's nearest city, computed privately in their browser.

All of them link back to the relevant DailyAQI page, so a reader who wants the full pollutant breakdown and trend is one click away.

How to install a widget

Installation is a single iframe. On our tools and embed pages you pick a style, a theme and a city, preview it live, then copy the generated snippet and paste it into your page's HTML where you want it to appear. There is no JavaScript library to load and nothing to sign up for. A typical badge looks like this:

<iframe src="https://dailyaqi.com/embed/badge/?type=card&city=delhi&theme=auto"
        style="border:0;width:320px;height:190px" loading="lazy"
        title="Live AQI"></iframe>

The near-me widget additionally needs permission to read the visitor's location, granted with one attribute:

<iframe src="https://dailyaqi.com/embed/badge/?type=nearme&theme=auto"
        allow="geolocation" style="border:0;width:320px;height:200px"
        loading="lazy" title="AQI near me"></iframe>

WordPress and other platforms

On WordPress you can paste the iframe into a Custom HTML block, or use the shortcode helper shown on the embed page to drop a widget in with a simple tag such as [dailyaqi city="mumbai" type="card"]. Any platform that allows an iframe or custom HTML — most site builders, CMSs and newsletters that support embeds — will work the same way. Because the widget is self-contained, it does not interfere with your site's own styles or scripts.

Theming and configuration

Each widget supports three themes: light, dark, or auto, which matches the visitor's system preference so the widget blends into your page in either mode. You choose which city a badge or card shows, and the ranking, distribution and near-me widgets need no city at all — they pull the live national picture or the visitor's own location. The parameters live in the iframe URL, so you can change the city or theme later by editing one line, without regenerating anything.

Where to place widgets

Placement is what makes a widget useful rather than decorative. A city badge or card sits naturally in a sidebar, a site header, or inline within a relevant article. A ranking or distribution widget works well on a dedicated air-quality or weather page, or in a topical news sidebar during a smog event. A near-me card is powerful on a homepage or a health page, because it personalises the reading to each visitor. Newsletters and dashboards benefit from the card and ranking styles, which carry enough context to stand alone.

Performance, accessibility and attribution

The widgets are lightweight iframes that you can lazy-load with loading="lazy" so they never block your page, and they read a small cached feed rather than hammering a server. Each widget links back to DailyAQI, which is both the attribution we ask for in return for the free service and a convenience for readers who want more detail. If you prefer to build a fully custom interface instead of embedding a finished card, the same data is available through our city data and open JSON feed.

Troubleshooting

Two issues account for almost every support question. A blank widget usually means the iframe URL was altered or the page blocks iframes; copy the snippet again unchanged and confirm your platform allows embeds. A near-me widget that does not locate the visitor is almost always missing the allow="geolocation" attribute, or the visitor declined the browser's location prompt — in which case it falls back to a default city rather than failing. Beyond that, the widgets are designed to be genuinely paste-and-forget.

Key takeaways

• Five free widget styles — badge, card, ranking, distribution and near-me — add live AQI to any site.
• Installation is a single iframe (or a WordPress shortcode); no script, no signup.
• The near-me widget needs allow="geolocation"; all widgets support light, dark and auto themes.
• Widgets update automatically, are lightweight and lazy-loadable, and link back to the full report.
• For fully custom interfaces, use the open data feed instead of an embed.