Free Weather Forecast Strip Widget for Websites

A horizontal strip that shows the next five days of weather — high and low temperatures plus sky conditions — for any location on Earth. Powered by the free Open-Meteo API with no API key or account, it is ideal for local business, event, tourism, and hospitality sites. Install it with a single script tag and two coordinates.

Embed this widget

Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.

<script src="https://hayneslab.dev/widgets/weather-forecast-strip.js" data-hl-lat="35.2271" data-hl-lon="-80.8431" data-hl-label="Charlotte, NC" async></script>
<!-- Free Weather Forecast Strip widget by haynes lab — https://hayneslab.dev/tools/widgets/weather-forecast-strip -->

<!-- Free Weather Forecast Strip widget by haynes lab — https://hayneslab.dev/tools/widgets/weather-forecast-strip -->
<script data-hl-lat="35.2271" data-hl-lon="-80.8431" data-hl-label="Charlotte, NC">
/*!
 * haynes lab — Weather Forecast Strip widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/weather-forecast-strip
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-weather-forecast-strip';
  var STYLE_ID = 'hlw-weather-forecast-strip-styles';
  var API_URL = 'https://api.open-meteo.com/v1/forecast';
  var DAYS = 5;

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/weather-forecast-strip.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { position: relative; max-width: 720px; margin: 0 auto; padding: 16px 18px 24px;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
      ' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
      ' border: 1px solid #e5e7eb; border-radius: 12px; }' +
      '.' + PREFIX + '__label { font-size: 14px; font-weight: 600; color: #6b7280; margin-bottom: 10px; }' +
      '.' + PREFIX + '__days { display: flex; gap: 8px; }' +
      '.' + PREFIX + '__day { flex: 1 1 0; min-width: 0; text-align: center; padding: 10px 6px;' +
      ' border: 1px solid #f3f4f6; border-radius: 10px; background: #fafafa; }' +
      '.' + PREFIX + '__day--today { background: #fff7ed; border-color: #fed7aa; }' +
      '.' + PREFIX + '__weekday { font-size: 13px; font-weight: 600; color: #374151; }' +
      '.' + PREFIX + '__emoji { display: block; font-size: 26px; line-height: 1; margin: 8px 0; }' +
      '.' + PREFIX + '__hi { font-size: 15px; font-weight: 700; color: #111827; }' +
      '.' + PREFIX + '__lo { font-size: 13px; color: #6b7280; margin-left: 4px; }' +
      '.' + PREFIX + '__condition { font-size: 11px; color: #6b7280; margin-top: 4px;' +
      ' white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }' +
      '.' + PREFIX + '__status { padding: 12px 0; font-size: 14px; color: #6b7280; text-align: center; }' +
      '.' + PREFIX + '__status--error { color: #b91c1c; }' +
      '.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
      ' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
      '.' + PREFIX + '__credit svg { display: block; }' +
      '.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
      '@media (max-width: 560px) { .' + PREFIX + '__days { flex-wrap: wrap; }' +
      ' .' + PREFIX + '__day { flex: 1 1 30%; } }';
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  function el(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    if (text != null) node.textContent = text;
    return node;
  }

  function logoSvg() {
    var svgNS = 'http://www.w3.org/2000/svg';
    var svg = document.createElementNS(svgNS, 'svg');
    svg.setAttribute('viewBox', '0 0 32 32');
    svg.setAttribute('width', '13');
    svg.setAttribute('height', '13');
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    function circle(cx, cy, r, attrs) {
      var c = document.createElementNS(svgNS, 'circle');
      c.setAttribute('cx', cx);
      c.setAttribute('cy', cy);
      c.setAttribute('r', r);
      for (var key in attrs) c.setAttribute(key, attrs[key]);
      svg.appendChild(c);
    }
    circle(16, 16, 16, { fill: '#0f0a0a' });
    circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
    circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
    circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
    circle(16, 16, 3, { fill: '#06b6d4' });
    circle(24.5, 7.5, 2, { fill: '#f97316' });
    circle(7, 16, 1.8, { fill: '#f97316' });
    circle(20, 20, 1.5, { fill: '#f97316' });
    return svg;
  }

  // WMO weather interpretation codes -> [text, emoji]
  var CONDITIONS = {
    0: ['Clear sky', '☀️'],
    1: ['Mainly clear', '🌤️'],
    2: ['Partly cloudy', '⛅'],
    3: ['Overcast', '☁️'],
    45: ['Fog', '🌫️'],
    48: ['Rime fog', '🌫️'],
    51: ['Light drizzle', '🌦️'],
    53: ['Drizzle', '🌦️'],
    55: ['Heavy drizzle', '🌧️'],
    56: ['Freezing drizzle', '🌧️'],
    57: ['Freezing drizzle', '🌧️'],
    61: ['Light rain', '🌦️'],
    63: ['Rain', '🌧️'],
    65: ['Heavy rain', '🌧️'],
    66: ['Freezing rain', '🌧️'],
    67: ['Freezing rain', '🌧️'],
    71: ['Light snow', '🌨️'],
    73: ['Snow', '❄️'],
    75: ['Heavy snow', '❄️'],
    77: ['Snow grains', '❄️'],
    80: ['Light showers', '🌦️'],
    81: ['Showers', '🌧️'],
    82: ['Heavy showers', '🌧️'],
    85: ['Snow showers', '🌨️'],
    86: ['Snow showers', '🌨️'],
    95: ['Thunderstorm', '⛈️'],
    96: ['Thunderstorm, hail', '⛈️'],
    99: ['Thunderstorm, hail', '⛈️']
  };

  function conditionFor(code) {
    return CONDITIONS[code] || ['Unknown', '🌡️'];
  }

  function weekdayFor(isoDate, isFirst) {
    if (isFirst) return 'Today';
    var d = new Date(isoDate + 'T12:00:00');
    return d.toLocaleDateString(undefined, { weekday: 'short' });
  }

  function build(script) {
    var lat = script.getAttribute('data-hl-lat');
    var lon = script.getAttribute('data-hl-lon');

    injectStyles();

    var root = el('div', PREFIX);
    root.setAttribute('role', 'region');
    root.setAttribute('aria-label', '5-day weather forecast');

    var status = el('div', PREFIX + '__status');
    root.appendChild(status);

    function showError(message) {
      status.className = PREFIX + '__status ' + PREFIX + '__status--error';
      status.textContent = message;
      root.setAttribute('aria-label', 'Weather forecast unavailable');
    }

    var credit = el('a', PREFIX + '__credit');
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/weather-forecast-strip';
    credit.target = '_blank';
    credit.rel = 'noopener';
    root.appendChild(credit);

    if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
      script.insertAdjacentElement('afterend', root);
    } else {
      document.body.appendChild(root);
    }

    if (!lat || !lon || isNaN(parseFloat(lat)) || isNaN(parseFloat(lon))) {
      console.warn('[haynes lab weather-forecast-strip] data-hl-lat and data-hl-lon (numbers) are required.');
      showError('Location not configured.');
      return;
    }

    var units = script.getAttribute('data-hl-units') === 'metric' ? 'metric' : 'imperial';
    var label = script.getAttribute('data-hl-label') || '';
    var tempUnit = units === 'metric' ? 'celsius' : 'fahrenheit';

    status.textContent = 'Loading forecast…';

    var url = API_URL +
      '?latitude=' + encodeURIComponent(lat) +
      '&longitude=' + encodeURIComponent(lon) +
      '&daily=temperature_2m_max,temperature_2m_min,weather_code' +
      '&forecast_days=' + DAYS +
      '&timezone=auto' +
      '&temperature_unit=' + tempUnit;

    fetch(url).then(function (res) {
      if (!res.ok) throw new Error('HTTP ' + res.status);
      return res.json();
    }).then(function (data) {
      var daily = data && data.daily;
      if (!daily || !Array.isArray(daily.time) || !daily.time.length) {
        throw new Error('Unexpected API response');
      }
      var tempSuffix = units === 'metric' ? '°C' : '°F';
      var count = Math.min(DAYS, daily.time.length);

      root.removeChild(status);

      if (label) root.appendChild(el('div', PREFIX + '__label', label));

      var days = el('div', PREFIX + '__days');
      for (var i = 0; i < count; i++) {
        var cond = conditionFor(daily.weather_code[i]);
        var hi = daily.temperature_2m_max[i];
        var lo = daily.temperature_2m_min[i];

        var day = el('div', PREFIX + '__day' + (i === 0 ? ' ' + PREFIX + '__day--today' : ''));
        day.appendChild(el('div', PREFIX + '__weekday', weekdayFor(daily.time[i], i === 0)));
        var emoji = el('span', PREFIX + '__emoji', cond[1]);
        emoji.setAttribute('aria-hidden', 'true');
        day.appendChild(emoji);

        var temps = el('div');
        temps.appendChild(el('span', PREFIX + '__hi',
          typeof hi === 'number' ? Math.round(hi) + '°' : '—'));
        temps.appendChild(el('span', PREFIX + '__lo',
          typeof lo === 'number' ? Math.round(lo) + '°' : '—'));
        day.appendChild(temps);

        day.appendChild(el('div', PREFIX + '__condition', cond[0]));
        day.title = weekdayFor(daily.time[i], i === 0) + ': ' + cond[0] +
          ', high ' + Math.round(hi) + tempSuffix + ', low ' + Math.round(lo) + tempSuffix;
        days.appendChild(day);
      }
      root.appendChild(days);

      root.setAttribute('aria-label',
        '5-day weather forecast' + (label ? ' for ' + label : ''));
    }).catch(function (err) {
      console.warn('[haynes lab weather-forecast-strip] Could not load forecast data.', err);
      showError('Forecast unavailable right now.');
    });
  }

  function init() {
    var script = findScript();
    if (!script) {
      console.warn('[haynes lab weather-forecast-strip] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>

Configuration

Every option is an attribute on the script tag — the same attributes the customizer above exposes. All attributes are optional unless marked required — defaults apply when omitted.

Attribute	Default	Description
`data-hl-lat`	(required)	Latitude of the location to forecast, e.g. "35.2271".
`data-hl-lon`	(required)	Longitude of the location to forecast, e.g. "-80.8431".
`data-hl-label`	(none)	Optional city or place name shown above the strip.
`data-hl-units`	"imperial"	"imperial" for °F, "metric" for °C.

Frequently asked questions

How do I install the Weather Forecast Strip?

Paste the script snippet where you want the strip to appear — it renders inline right after the tag and fetches the next five days of forecasts from Open-Meteo on every page load.

How do I set the location and units?

Use data-hl-lat and data-hl-lon for the coordinates (find them on any map by right-clicking a spot), data-hl-label for the displayed city name, and data-hl-units for "imperial" (°F) or "metric" (°C).

Does it work on WordPress, Shopify, or Squarespace?

Yes — it is a single vanilla JS file with no dependencies and the Open-Meteo API needs no key, so it works on WordPress, Shopify, Squarespace, or any site that can embed a script tag.

More free widgets

Local & Weather

Need a custom widget?

We build custom widgets, integrations, and whole products. Tell us what your site needs and we'll scope it.

Get in Touch

Free Weather Forecast Strip Widget