· Updated
How to Embed Live Weather Data on Your Website or Blog
By Lennart Steen · Hands-on guides from the people building the platform
The fastest way to embed live weather data on a website or blog is a widget iframe: one copy-paste HTML snippet that shows your station's current conditions in a compact card and refreshes itself about every five minutes. Pro Weather generates the snippet for you, in three sizes, and for pages that do not allow iframes there is a badge image that works anywhere an image works.
Once your weather station is online, you often want its data somewhere else too: a community club page, a school science website, a local news blog, a forum signature, or your personal homepage. This guide covers the three ways to do it, from the copy-paste widget to a fully custom build on the JSON API.
What is the quickest way to embed live weather data?
Paste one iframe snippet. Every Pro Weather site serves a compact widget at /embed, designed to sit inside somebody else's page, and the embedding guide in the docs walks through every option. The snippet looks like this:
<iframe src="https://your-subdomain.pro-weather.com/embed?size=md"
width="360" height="172"
style="border:0;max-width:100%" loading="lazy"
title="Live weather"></iframe>You do not have to assemble it by hand. In your dashboard, open Publishing and find "Put your weather on another site": pick a size, theme, units and language, check the live preview, and copy the finished snippet.
Three sizes are available, and the bigger the widget, the more readings it shows next to the temperature:
| Size | Dimensions | Extra readings shown |
|---|---|---|
sm | 300 x 148 | Two |
md | 360 x 172 | Four |
lg | 480 x 218 | Six |
The extra readings are chosen from humidity, wind, rain today, pressure, gust and dew point. Whatever your station does not measure is left out rather than shown as a blank, so the widget never looks broken.
The widget refreshes itself about every five minutes, uses no cookies, loads no third-party scripts, and links back to your station. It works on every plan, and the person hosting it needs no account of their own.
How do you add the weather widget to WordPress, Squarespace, or Google Sites?
Every major platform has a block that accepts raw HTML, and the iframe snippet goes straight into it. No plugin is needed on any of them.
| Platform | Where to paste the iframe |
|---|---|
| WordPress (block editor) | Add a Custom HTML block and paste the snippet |
| Squarespace | Add an Embed block and switch it to code-snippet mode (or a Code block if your plan includes it) |
| Wix | Add → Embed code → Embed HTML |
| Google Sites | Insert → Embed → "By code" |
| Ghost | Add an HTML card in the post editor |
Two practical tips. First, keep the max-width:100% style from the generated snippet so the widget never overflows a narrow column. Second, if your page is served over HTTPS (almost all are), the embed URL must be HTTPS too; Pro Weather's embed URLs are, so nothing to do there.
What if the page does not allow iframes?
Use the badge image. Forum signatures, GitHub READMEs, Notion pages, and many email and wiki tools strip iframes but happily display an image, and the badge is exactly that: an SVG your station serves that shows current conditions and links back to your site.
<a href="https://your-subdomain.pro-weather.com" target="_blank" rel="noopener">
<img src="https://pro-weather.com/api/v1/your-subdomain/badge.svg?size=card"
alt="Live weather" width="340" height="92">
</a>The badge comes in two sizes: card (340 x 92) with the temperature and three readings, and pill (300 x 28), a single line that fits a forum signature. Because it is an SVG, it stays sharp on any screen.
The dashboard generates the badge in whichever format your destination wants: HTML image, Markdown for READMEs and wikis, or BBCode for classic forums. That makes four snippet formats in total, including the iframe.
One honest limitation: a badge is an ordinary image, so it cannot refresh itself. It shows conditions as of the moment the surrounding page was loaded, and updates when that page is reloaded. For a page that stays open all day, the iframe widget is the better fit.
How do you match the embed to the page it lives on?
Add options to the URL. Anything you leave out follows your own site's settings, and anything unrecognised falls back to them too, so the embed never shows an error on somebody else's page.
| Option | Values |
|---|---|
size | Widget: sm, md, lg. Badge: pill, card |
theme | light, dark, auto |
units | metric, imperial |
lang | Any language your site supports (en, nl, de, fr, ...) |
theme=auto makes the widget follow each visitor's own light or dark preference, which is usually what you want on a page you do not control. The badge is a static image and cannot detect that, so it uses light unless you ask for dark.
units and lang are for the audience of the page you are embedding into, not for you. A Belgian sailing club embedding a Texan member's station can show it in Celsius and Dutch without the station owner changing a thing.
Which address should the embed use?
Use your your-subdomain.pro-weather.com address, which is what the dashboard puts in the snippet by default even if you have a custom domain. The reasoning: your subdomain always works, while a custom domain can be moved or removed later, and a broken widget lives on a page you may no longer be able to edit. If you prefer your custom domain in the snippet anyway, there is a checkbox for it.
What if you want a fully custom display?
Fetch the data yourself and render it your way. Every Pro Weather site serves current conditions as JSON at /api/v1/<subdomain>/current, CORS-open and with both unit systems in every reading, so a developer can build a header bar, a chart, or any custom card from it; the public API docs cover the format. Davis owners who want the raw station feed can also read the WeatherLink v2 API directly with an API key, at the cost of keeping the credentials server-side and maintaining the integration.
This route makes sense for perhaps one embedder in fifty. For everyone else, the widget already answers the question with zero maintenance.
Which option should you use?
Use the widget iframe wherever custom HTML is allowed, the badge image where it is not, and the API only if you are comfortable writing and maintaining code.
- Club page, school site, blog sidebar → the widget iframe. Pick a size, paste, done.
- Forum signature, GitHub README, Notion page → the badge image, in HTML, Markdown or BBCode.
- A completely custom display → the JSON API, if you are happy to code it.
- Just want to share a link → skip the embed and link your station URL directly; it works everywhere, including plain-text email.
Common questions
Can I embed my WeatherLink data in WordPress?
Yes. WeatherLink's own dashboard is designed to be viewed on weatherlink.com rather than embedded elsewhere, but a Pro Weather site built on your WeatherLink data comes with an embeddable widget. Add a Custom HTML block in WordPress and paste the iframe snippet from your dashboard's Publishing page. No WordPress plugin is required.
How often does the embedded widget update?
The widget refreshes itself about every five minutes, so a page that stays open keeps showing current readings without anyone reloading it. The badge image, being an ordinary image, updates whenever the page around it is reloaded. If your station stops reporting, readings older than 30 minutes are shown dimmed with the time highlighted, so an offline station looks offline rather than wrong.
Is an iframe bad for my site's SEO?
No. Search engines treat iframe content as belonging to the source site, so it neither passes ranking problems to your page nor drains anything from it. Give the iframe a descriptive title attribute and keep content that must rank for your own page outside the frame. A weather widget is supplementary content, which is exactly what iframes are for.
Can I embed live weather without an iframe?
Yes, two ways. The badge image needs only an <img> tag or a Markdown link, which is why it works in forum signatures and READMEs where iframes are stripped. And if you can write code, the site's JSON API lets you render the data however you like. For a no-code live display inside an existing page, though, the iframe widget remains the practical answer.
Does the person embedding my weather need a Pro Weather account?
No. The widget and badge are public, work on every plan, and show only what your public station page already shows. Anyone you hand the snippet to can paste it into their page, and it keeps working as long as your site is published.
Getting started
If your station is not online yet, that is the only prerequisite: connect your WeatherLink account or point your station's upload at a new site, then open Publishing and copy your snippet. Start a Pro Weather site and you can have a widget on a club page the same afternoon; the embed docs list every option.
Embedding puts your data on pages you or your friends control. If you also want your readings on the big public networks, see how to send your station data to Weather Underground and CWOP; the two approaches work happily side by side.