Weather Card Widget

Add a compact weather card with local visitor information.

Custom locationSet any city or place name.
ConfigurableTemperature, condition and colours.
CompactSmall footprint, fits any page section.

Build the weather card

Where to use it

Add it to local business homepages, event pages, travel sites, garden centres or any page where weather context is useful to the visitor.

Related widgets: Opening hours, How it works

Embed code

Copy this iframe into your page HTML, CMS block or website builder embed area.

<iframe src="https://sitewidgetkit.com/embed/weather-card/" width="100%" height="300" loading="lazy"></iframe>

How it works

This weather card is a static display widget – it shows a place name, temperature and condition text that you configure yourself. It does not connect to a live weather API. This makes it fully predictable and reliable: the card always shows exactly what you set, with no API failures, rate limits or dependency on a third-party service.

To update the weather information, you edit the widget settings in the builder and regenerate the embed code. For sites that need live weather, this widget serves as a manual forecast card – useful for displaying the current conditions for a specific location, event venue, or outdoor space.

Common uses:

  • Event pages: "The venue is in central Edinburgh – current conditions: 14 C, Light rain"
  • Garden centres: show local weather to help visitors decide what to plant or when to visit
  • Outdoor venues: holiday cottages, campsite pages, sports clubs
  • Hospitality: hotel or restaurant pages that want to add local flavour

Static vs live weather: a static card is appropriate when you control the content and update it manually or on a schedule. A live weather API (like OpenWeatherMap or WeatherAPI.com) would give real-time data but adds complexity, cost and a dependency on an external service. This widget is the right choice for simple, reliable display without those trade-offs.

Accessibility: the card uses plain text for temperature and condition, which is readable by screen readers. The temperature value is not conveyed through colour alone – both text and layout communicate the information.

How to add it

CopyCopy the iframe code from the embed panel.
PasteAdd it to your CMS, website builder or HTML embed block.
PublishPreview the page on desktop and mobile, then publish.
Remove attribution: free widgets include a visible powered-by link. If you want a clean unbranded version, contact us about removing attribution for a small fee.