Add an Air Quality Widget to Your Website
Build a widget in the app, copy its embed code, and paste it into any page that accepts HTML. Choose from 10 templates and add your logo and colors.
A widget shows one device's readings on your website. You build it in the app, copy the embed code, and paste it into a page that accepts HTML. Readings refresh about every 5 minutes.
Admins, Editors and Workspace Managers can build widgets.
Create a Widget
Select Widgets in the sidebar, then Create widget. You can also choose Add, then Widget.
Under Device, search for the device and choose it.
Under Template, choose a template. The preview updates as you change settings.
Under Metrics, select the metrics to show.
Set the title, logo and branding. These are described below.
Select Create widget.
In the Widget created window, select the copy button next to the code.
A widget shows one device. To point a widget at a different device, create a new widget.
Templates
These are the 10 templates, in the order the app lists them. The last column is the Maximum width for sizes S, M and L, in pixels.
| Template | Tagline | Metrics | Maximum width (S / M / L) |
|---|---|---|---|
| Header pill | Compact status dot for page headers and navigation bars | 1 | 180 / 220 / 300 |
| Header inline | A single metric, sized to sit inside your site's navigation | 1 | 130 / 160 / 200 |
| Header bar | Full-width strip across the top of any page | 2 | Page width |
| Footer bar | Persistent status strip across the bottom of any page | 2 | Page width |
| Card + dot | Embeddable card listing each metric with its own status | 4 | 220 / 280 / 380 |
| Card + gauge | Card with an arc gauge — good for a single CO₂ focus | 4 | 200 / 240 / 340 |
| Detail card | Every metric the device reports, in one table | 5 | 280 / 340 / 440 |
| Badge + logo | Compact badge with your logo, name and two metrics | 2 | 280 / 340 / 440 |
| Dual gauge | Two arc gauges side by side | 2 | 260 / 300 / 400 |
| Dual stacked | Two arc gauges stacked vertically | 2 | 200 / 240 / 340 |
Metrics
The metric list shows what the chosen device reports, from this set: CO₂, PM2.5, PM10, Temp, Humidity, TVOC and TVOC Index. Select up to the number shown in the table above.
When a template shows more than 1 metric, Primary metric decides which one it emphasizes, such as the gauge or the status color.
Appearance
| Setting | What it does | Not offered on |
|---|---|---|
| Maximum width | S, M or L. The widget never grows past this width and shrinks to fit narrow space. | Header bar, Footer bar |
| Title | Up to 120 characters. | Header inline |
| Logo | Select Upload image. displayAQI sizes the logo by height, so wide wordmarks stay legible. | Header pill, Header inline |
| Surface | Light or Dark background. The widget keeps its own background so it stays readable on any page. | None |
| Accent | Your color, as a hex value, on the widget's border or rule. Leave it empty to follow the air quality status. | Header pill, Header inline, Badge + logo |
| Show “displayAQI.com” | A small credit line, under Attribution. On by default. Clear it to hide the line. | Header pill, Header inline, Badge + logo |
Add the Widget to Your Site
The embed code is an iframe followed by a short script. Paste it anywhere your site accepts raw HTML:
- In a page builder or block editor, add a block for raw HTML, often called Custom HTML, Embed or Code, and paste the code into it.
- For Header bar, Footer bar, Header pill and Header inline, paste the code into the part of your theme that repeats on every page, such as the header or footer area.
- If your editor removes the script, the widget still appears, at a fixed height.
Copy the code again after changes
The embed code carries the widget's size. If you change the template, Maximum width or title, copy the code again and replace the old one.
To copy the code later, open Widgets and select the copy button in the Token column of the widget's row.
Edit or Delete a Widget
Select the pencil icon to edit a widget. The embed code stays the same unless the size changes.
Select the trash icon to delete it. The embed code stops working immediately, and the widget disappears from your site.
If your workspace's billing is paused, widgets show "Air quality monitoring is paused. Please contact your administrator." See Billing and your free trial. To show widgets only at certain times, see Set display hours.
Limits
A workspace can have 10 widgets. Each widget shows 1 device.
Set Up Email Alerts
Get an email when a reading crosses a threshold, a Qingping device goes offline, or a battery runs low, and review every alert in the event history.
Show Air Quality on a Lobby Screen
Create a full-screen kiosk link for a TV, tablet or monitor. Pick a layout, choose the devices and metrics, and add your logo and colors.