Embed Weather Widgets
Add live Zimbabwe weather data to any website. Three widget types available — all free, no API key required.
Current Conditions
A card showing live temperature, conditions, humidity, wind, and UV for any Zimbabwe location.
<!-- Current conditions for Harare -->
<div data-mukoko-widget="current"
data-location="harare">
</div>
<script src="https://weather.mukoko.com/embed/widget.js" async></script>Forecast
A multi-day forecast strip. Configure 3, 5, or 7 days.
<!-- 5-day forecast for Bulawayo -->
<div data-mukoko-widget="forecast"
data-location="bulawayo"
data-days="5">
</div>
<script src="https://weather.mukoko.com/embed/widget.js" async></script>Compact Badge
An inline badge that fits in navbars, headers, or sidebars. Shows temperature and condition at a glance.
<!-- Compact badge for Mutare -->
<div data-mukoko-widget="badge"
data-location="mutare">
</div>
<script src="https://weather.mukoko.com/embed/widget.js" async></script>iframe Embed
For complete isolation, use an iframe. Useful for CMS platforms that don't allow custom scripts.
<iframe
src="https://weather.mukoko.com/embed/iframe/harare?type=current&theme=auto"
width="380"
height="280"
frameborder="0"
title="Harare Weather"
></iframe>React / Next.js
For Nyuchi products and React apps, use the MukokoWeatherEmbed component directly.
import { MukokoWeatherEmbed } from "@mukoko/weather-embed";
// Current conditions
<MukokoWeatherEmbed location="harare" type="current" />
// Forecast
<MukokoWeatherEmbed location="victoria-falls" type="forecast" days={5} />
// Badge
<MukokoWeatherEmbed location="marondera" type="badge" />Configuration
| Attribute | Values | Description |
|---|---|---|
| data-mukoko-widget | current, forecast, badge | Widget type (required) |
| data-location | harare, bulawayo, ... | Location slug (required) |
| data-days | 3, 5, 7 | Forecast days (default: 5) |
| data-theme | light, dark, auto | Theme (default: auto) |
Available Locations
90+ locations across Zimbabwe. Use the slug value in data-location. Full list available at GET /api/locations.