Air Quality Widget — Add It to Your Website

Overview

What Air Quality does

Air Quality is an embeddable widget you drop into any website with a single snippet of code. Real-time AQI and pollution index for any city. It runs in its own isolated frame, so it can never clash with your site's own styles or scripts, and it resizes itself to fit wherever you place it.

Air Quality keeps itself up to date: once the snippet is on your page, everything it displays is driven from your myNaturevista dashboard. Change a setting there and your live site reflects it straight away, without editing a single line of code again.

You control how it looks and behaves from 6 settings — always use the location below (ignore visitor's device location), location latitude, location longitude, location name and more. Pick the options that match your brand, save, and the change is live.

Like every widget in the myNaturevista nature & weather collection, Air Quality is built to be fast and unobtrusive: it loads asynchronously so it never blocks your page, works on phones and desktops alike, and can be added to as many of your pages as you want.

Features

What you get

Fully configurable from your dashboard — no code changes needed.
Light or dark theme to match your site's design.
Auto-detects your visitor's location for accurate, personalized data.

Setup

How to add Air Quality to your site

Three steps, about two minutes, no build tools.

1

Add the loader once

Paste a single <script> tag before your closing </body> tag. One loader powers every myNaturevista widget on the page, so you only ever add it once.
2

Place the widget

Drop a small <div> wherever Air Quality should appear — inside a column, a section, a sidebar, anywhere. It takes the width it is given and sets its own height.
3

Configure it in the dashboard

Choose the theme and options that suit your site from the dashboard. Air Quality picks them up on the next page load.

your-page.html

<!-- 1. Load the myNaturevista loader once per page -->
<script src="https://mynaturevista.com/w.js"></script>

<!-- 2. Place the widget wherever it should appear -->
<div data-menv-widget="air-quality"
     data-menv-key="YOUR_API_KEY"
     data-menv-instance="YOUR_INSTANCE_ID"></div>

Options

What you can configure

Everything below is set from your dashboard — never in your website's code.

Settings available for Air Quality
Option	Type	Values	Default
Always use the location below (ignore visitor's device location)Turn this on if you want a fixed location for this widget instead of detecting each visitor's own location.	on / off	Yes / No	false
Location latitudeUsed as the fixed location above, or as a fallback if the visitor doesn't share their location. Leave empty to default to Brussels.	number	-90 to 90	—
Location longitude	number	-180 to 180	—
Location name	text	—	—
Let visitors search a different city	on / off	Yes / No	true
Theme	choice	Light · Dark · Auto (match visitor's OS)	auto

Use cases

Who uses Air Quality

Visitors who can explore a place without leaving your site stay longer, look at more pages and come back — and every extra minute on the page is a minute they are not spending on a competitor.

Hotels & rentals

Give guests the local context they are already searching for, without sending them to another site.

Tour operators

Back up your itineraries with live, place-specific information visitors can check themselves.

Travel blogs

Turn a written post into something readers interact with — and stay on the page for.

Tourism boards

Publish the same trustworthy information across every regional page you run.

FAQ

Air Quality — frequently asked questions

How do I add the Air Quality widget to my website?

Add the myNaturevista loader script once before your closing </body> tag, then place a <div> with your widget id, API key and instance id wherever Air Quality should appear. That is the whole installation — it works on any platform that lets you paste HTML, including WordPress, Shopify, Squarespace, Webflow and hand-written sites.

Do I need to know how to code to use Air Quality?

No. If you can paste a snippet of HTML into your site once, you are done. Everything after that — settings, content and styling — is handled from your myNaturevista dashboard, with no further code changes.

Can I customise how Air Quality looks?

Yes. Air Quality exposes 6 settings: always use the location below (ignore visitor's device location), location latitude, location longitude, location name, let visitors search a different city, theme. Change them in the dashboard and your live site picks the new values up on the next page load.

Does Air Quality work on mobile?

Yes. Air Quality is responsive: it takes the width of the container you place it in and adjusts its layout and height for phones, tablets and desktops.

Will Air Quality slow down my website?

No. The loader is asynchronous, so it never blocks your page from rendering, and the widget itself runs in an isolated frame that loads separately from your own content.

Can I use Air Quality on more than one website?

Yes. Each website you own gets its own API key and its own configuration, so the same widget can show different settings and content on each domain.

Which plans include Air Quality?

Air Quality is available on the following plans: Free, Starter, Business, Enterprise. You can change plan at any time from your dashboard.

More widgets