How to Embed Live Weather Data on Your Website or Blog

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 customisable.

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: An embeddable weather widget

An iframe is the most reliable way to embed live weather on any site that supports HTML. Pro Weather generates an embed URL that displays your current conditions in a compact, responsive widget.

The embed code looks like this:

<iframe src="https://yourcity.pro-weather.com/embed" 
  width="100%" height="400" 
  frameborder="0" 
  title="Live weather for Your City">
</iframe>

Place this wherever your site or blogging platform accepts custom HTML, and it will display your current temperature, humidity, wind, and conditions in a self-contained box. The embed updates automatically alongside your main site, so there is no extra data feed to maintain.

Most blogging platforms (WordPress, Squarespace, Wix, Ghost) and site builders support custom HTML blocks or iframes. Check your platform's documentation for where to insert custom code.

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.

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 will need to handle the API key securely and set up a small backend proxy or use client-side JavaScript if you are comfortable exposing the key for read-only data.

// 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?

• Just want to share a link → Option 1, a simple hyperlink.
• Want live weather in a blog sidebar or club page → 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.

For most people, the iframe embed is the sweet spot. It shows live data, requires no ongoing maintenance, and works on any platform that accepts HTML. Your Pro Weather site updates every 10 minutes, and so does the embed.

Getting started

If you have a Davis station and want an embeddable weather widget, the first step is getting your data online. Start a Pro Weather site and your embed URL will be ready in about five minutes. See the setup guide for details.