Embed Weather Widgets
Add live weather to any website — no build step, no API key, all free. The fastest way is a copy-paste <iframe>. Four widget types are available. Omit the location parameter and the widget automatically shows the visitor's local weather (detected from their IP).
1 · Copy-paste iframe
Works on any site — WordPress, Squarespace, plain HTML, or any framework. Paste the snippet where you want the widget to appear and adjust width / height to taste.
Current condition
A compact inline card — current temperature, condition, and an icon.
<iframe
src="https://weather.mukoko.com/embed/widget?type=current&location=harare"
width="340" height="120" style="border:0" loading="lazy"
title="mukoko weather — current conditions"></iframe>Today card
A fuller current-day card — temperature, condition, feels-like, and today's high / low.
<iframe
src="https://weather.mukoko.com/embed/widget?type=today&location=bulawayo"
width="380" height="230" style="border:0" loading="lazy"
title="mukoko weather — today"></iframe>5-day forecast
A five-day forecast strip — day, condition, and high / low per day.
<iframe
src="https://weather.mukoko.com/embed/widget?type=5day&location=victoria-falls"
width="460" height="300" style="border:0" loading="lazy"
title="mukoko weather — 5-day forecast"></iframe>7-day forecast
The same layout as the 5-day card, extended to a full week.
<iframe
src="https://weather.mukoko.com/embed/widget?type=7day&location=mutare"
width="460" height="380" style="border:0" loading="lazy"
title="mukoko weather — 7-day forecast"></iframe>Visitor's own location
Drop the locationparameter and the widget resolves the visitor's weather from their IP.
<!-- No location = the visitor's own weather (from their IP) -->
<iframe
src="https://weather.mukoko.com/embed/widget?type=today"
width="380" height="230" style="border:0" loading="lazy"
title="mukoko weather — your location"></iframe>2 · Live preview
These are the real widgets, rendering live data from the public API right now. What you see below is exactly what your visitors get.
type=current · location=harare
type=today · location=harare
type=5day · location=harare
3 · Widget URL parameters
Configure the widget via query parameters on https://weather.mukoko.com/embed/widget.
| Parameter | Values | Description |
|---|---|---|
| type | current, today, 5day, 7day | Widget variant (default: current) |
| location | harare, bulawayo, ... | Location slug. Omit for the visitor's IP location |
| lat / lon | numbers | Explicit coordinates (override slug + IP) |
| theme | auto, light, dark | Theme (default: auto) |
4 · Direct JSON API
Prefer to build your own UI? The widget is powered by a public JSON endpoint you can call directly from any site or server. With no parameters it returns weather for the visitor's location (derived from their IP); pass slug or lat & lon to pin a location. CORS is open to all origins.
# Visitor's local weather (IP-based)
curl https://weather.mukoko.com/api/embed/current
# A specific location
curl "https://weather.mukoko.com/api/embed/current?slug=harare"
# Explicit coordinates
curl "https://weather.mukoko.com/api/embed/current?lat=-17.83&lon=31.05"Response shape:
{
"location": { "name": "Harare", "province": "Harare",
"slug": "harare", "country": "ZW" },
"current": { "temp": 24, "feelsLike": 23, "code": 2,
"condition": "Partly cloudy", "high": 27, "low": 14,
"humidity": 55, "windSpeed": 9, "windDirection": "SE",
"isDay": true },
"daily": [ { "date": "2026-06-30", "day": "Today", "code": 2,
"condition": "Partly cloudy", "high": 27, "low": 14,
"precipitationProbability": 0 } /* up to 7 */ ],
"source": "ip",
"attribution": { "name": "mukoko weather",
"url": "https://weather.mukoko.com/harare" }
}React / npm package
A published @mukoko/weather-embed React package is not yet available — coming soon. Until it ships, use the copy-paste <iframe> above (works in React and every other framework) or call the JSON API directly.