Widget Gallery

    Embed live weather forecasts on your site with a single script tag.

    <20 KB gzipped

    Configure

    Powered by activeweather

    Need more control? View API docs for custom integrations

    Integration Guides

    WordPress

    Add the widget using a Custom HTML block:

    1. Open the page or post editor
    2. Add a Custom HTML block
    3. Paste the embed code from the configurator above
    4. Preview or publish

    For site-wide placement, paste the code into a Custom HTML widget in Appearance → Widgets.

    Static HTML

    Add the <script> tag anywhere in your <body>:

    <body>
  <!-- your content -->
  <script src="https://cdn.activeweather.com/widgets/forecast.js"
    data-key="YOUR_API_KEY"
    data-zip="Seattle, WA"></script>
</body>

    The widget renders itself where the script tag is placed.

    React / Next.js

    Load the widget in a useEffect:

    import { useEffect, useRef } from 'react';

function ForecastWidget({ city }) {
  const ref = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.activeweather.com/widgets/forecast.js';
    script.dataset.key = 'YOUR_API_KEY';
    script.dataset.zip = city;
    ref.current?.appendChild(script);
    return () => script.remove();
  }, [city]);

  return <div ref={ref} />;
}
    Substack

    Substack supports embed blocks with limitations:

    1. In the post editor, add an Embed block
    2. Paste the embed code
    3. Preview to confirm it renders

    Limitations: Substack strips some attributes on publish. If the widget doesn't render, use an iframe wrapper instead:

    <iframe
  src="https://activeweather.com/embed/forecast?zip=Seattle,%20WA"
  width="100%" height="300"
  frameborder="0"></iframe>

    Why activeweather widgets?

    Lightweight

    Under 20 KB gzipped. No frameworks, no dependencies.

    Themeable

    Light, dark, or auto-detect from user preferences.

    Isolated

    Shadow DOM keeps widget styles from leaking into your page.

    Accessible

    Semantic markup and screen-reader-friendly labels.

    Need more control? See the API documentation for custom integrations.