· Updated
How to Embed Live Weather Data on Your Website or Blog
By Lennart · Hands-on guides from the people building the platform
The fastest way to embed live weather data on a website or blog is an iframe: one snippet of HTML that displays your public station site and keeps itself up to date. The <iframe> element is a standard part of HTML, so it works anywhere custom HTML is allowed: WordPress, Squarespace, Wix, Ghost, Google Sites.
Once you have your Davis weather station online, you might want to show its live data somewhere else: a community club page, a school science website, a local news blog, or your personal homepage. Embedding live weather makes your site more useful for local visitors and gives your station a wider audience. This guide covers three approaches, from simplest to most customizable.
Option 1: The simple link
The easiest way to share your weather data is a direct link to your station's page. It is not an embed, but it works everywhere and requires no technical setup.
If you use Pro Weather, your site lives at a URL like yourcity.pro-weather.com or your own custom domain. You can simply link to it:
<a href="https://yourcity.pro-weather.com">Live weather in Your City</a>This is the approach for sites that do not support iframes or JavaScript embeds (some email newsletters, static site generators, or forums).
Option 2: Embed the public station page
An iframe can display the public Pro Weather station page inside any site that supports HTML. Pro Weather does not currently provide a separate compact-widget route, so use the station homepage itself and allow enough height for the dashboard.
The embed code looks like this:
<iframe src="https://yourcity.pro-weather.com/"
width="100%" height="720"
frameborder="0"
title="Live weather for Your City">
</iframe>Place this wherever your site or blogging platform accepts custom HTML. It displays the same responsive dashboard visitors see at the station URL and updates with the main site, so there is no second data feed to maintain. A direct link is usually better on narrow pages where a full dashboard would feel cramped.
How do you add the weather embed to WordPress, Squarespace, or Google Sites?
Every major platform has a block that accepts raw HTML. In WordPress, paste the iframe into a Custom HTML block. In Squarespace, use an Embed block in code-snippet mode. In Google Sites, choose Insert → Embed → By code. Wix and Ghost have equivalent embed elements. 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 width="100%" attribute so the page adapts to its column, and adjust height to suit the selected station layout. Second, if your page is served over HTTPS (almost all are), the iframe URL must be HTTPS too - Pro Weather sites are, so this only matters if you host the source yourself.
Option 3: The WeatherLink API (most flexible)
If you want full control over how your weather data is displayed, you can fetch it directly from the WeatherLink v2 API and render it yourself. This requires some development work but gives you complete freedom over the design. You will need API credentials first - here is how to generate a WeatherLink API key.
The API returns JSON with current conditions, so you can build a custom widget, a weather bar in your site header, or a full dashboard page. You must keep both credentials server-side: set up a small backend proxy or server-render the result, and never ship the API secret to browser JavaScript.
// Example: fetch current conditions from WeatherLink v2 API.
// The station ID comes from a one-time call to /v2/stations.
const response = await fetch(
'https://api.weatherlink.com/v2/current/YOUR_STATION_ID?api-key=YOUR_KEY',
{ headers: { 'X-Api-Secret': 'YOUR_SECRET' } }
);
const data = await response.json();This approach works well for developers who want a custom embedded display, but it shifts the maintenance of the data pipeline to you.
Which option should you use?
Use the iframe when you want the complete station experience inside a sufficiently wide page. It requires no ongoing maintenance and updates alongside the main site. Use a plain link where frames are blocked or space is limited, and reach for the API only if you need a purpose-built compact display.
- Just want to share a link → Option 1, a simple hyperlink.
- Want the complete station page inside a club site → Option 2, the iframe embed. It is set-and-forget.
- Want a completely custom display → Option 3, the API. Only if you are comfortable with code.
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 public site built on your WeatherLink data can be framed. With Pro Weather, add a Custom HTML block in WordPress and use the station homepage as the iframe src. No WordPress plugin is required.
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. Best practice is simply to give the iframe a descriptive title attribute and avoid putting content that must rank for your own page inside a frame - a weather widget is supplementary content, which is exactly what iframes are for.
How often does the embedded widget update?
The iframe is the main weather site, which refreshes on the normal collection cycle. There is no separate feed to configure or keep alive: if the station page has a new observation, the framed version has it too.
Can I embed live weather without an iframe?
Yes, but it means writing code. Fetching from the WeatherLink v2 API (Option 3) lets you render the data any way you like - a header bar, a chart, a custom card - at the cost of building and maintaining that integration yourself. For a no-code display inside an existing page, the iframe remains the practical answer.
Getting started
If you have a Davis station and want to show it on another website, the first step is getting your public station page online. Start a Pro Weather site, then use that page URL in the iframe. See the setup guide for details.
Embedding puts your data on pages you 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.