Weather HTML: Code Examples for Embedding Live Radar

Whether you’re comparing weather radar providers on how technical their setup actually is, or you’ve already subscribed to ZoomRadar and need the exact code to paste in, this guide has what you need.

For anyone still deciding: ZoomRadar’s entire embed comes down to a single iframe tag — no API integration, no JavaScript library, and no development team required. That’s the whole technical footprint, which is worth knowing before you commit to a provider. If you’ve already subscribed, here’s the real code, plus how to add it on every major platform.

ZoomRadar is an affordable, embeddable weather radar built for websites and digital displays. The code below uses a placeholder in place of a real key, so you can see exactly what the setup looks like whether or not you’ve subscribed yet.

A note on what’s confirmed vs. what’s a general technique: The basic iframe code below is ZoomRadar’s actual embed code. Everything beyond that — the responsive wrapper, the accessibility addition, the platform-specific steps, and the troubleshooting tips — are standard web techniques and general platform knowledge we’re layering on top, not something ZoomRadar officially documents or provides. They’re safe to use, but if anything behaves differently than described here, ZoomRadar’s support team is the authority, not this guide.

The Basic Weather HTML: iframe Embed Code

The core weather HTML for embedding ZoomRadar is a single iframe tag. ZoomRadar sends you a custom map URL after you subscribe, and you drop that URL into the src attribute, shown below with a placeholder in place of your real key:

Replace YOUR_UNIQUE_KEY with the exact key ZoomRadar sends you in your custom map URL, and adjust height to fit your layout. allowfullscreen and loading=”lazy” come built into ZoomRadar’s default code, so performance and fullscreen support are already handled. That’s the entire embed — no additional scripts, libraries, or server-side setup required.

Responsive Weather HTML for Any Screen Size

The basic iframe above works, but most modern websites need the radar map to resize with the browser window. This responsive version isn’t something ZoomRadar provides or documents — it’s a standard web technique (the padding-bottom aspect-ratio trick) that you can safely add on top of ZoomRadar’s real code:

ZoomRadar’s default code sets a fixed height and skips width entirely, relying on style=”display: block;” for basic layout. Wrapping it in a <div> like this layers responsive sizing on top, without changing anything ZoomRadar sends you. The <div> maintains a consistent aspect ratio (75% here creates a 4:3 shape — adjust this percentage for a wider or taller map), and the iframe stretches to fill it at any screen size. This holds up across desktop, tablet, and mobile without any additional media queries.

WordPress: Adding ZoomRadar with the Custom HTML Block

WordPress doesn’t need a plugin for this. Add the same iframe code through the built-in Custom HTML block. These are general WordPress steps, not ZoomRadar-specific instructions — they’re based on how WordPress handles any iframe code, since ZoomRadar’s embed doesn’t need any special treatment:

Open the page or post where the map should appear, in the WordPress block editor.
Add a new block and search for Custom HTML.
Paste either the basic or responsive iframe code from above into the block.
Preview the page to confirm the map displays correctly, then publish.

This works identically on Elementor, Divi, and most other WordPress page builders — look for a “Custom HTML,” “Code,” or “Embed” element instead of the native block, and paste the same code.

One WordPress-specific thing to watch for: security plugins like Wordfence, Solid Security, or Sucuri sometimes strip pasted iframe code as a precaution. If the map disappears after you save the page, check your security plugin’s HTML filtering settings. On WordPress multisite installs, only Super Admin accounts can save iframe code by default — Editors and Authors may need an admin’s help to get the code to stick.

Webflow: Embedding ZoomRadar with the Code Embed Element

Webflow uses a similar approach through its Code Embed element. These are general Webflow steps, not ZoomRadar-specific instructions. Note that this element requires a paid Webflow plan (Core, Growth, Agency, or an active Site plan) — it isn’t available on Webflow’s free Starter plan.

In the Webflow Designer, open the Add panel and add a Code Embed element to the page.
Paste the responsive iframe code from above into the Code Embed element’s code box.
Webflow’s Designer canvas shows a placeholder rather than the live map — this is expected. Preview or publish the page to see the actual radar map render.
Publish the page to confirm the map displays correctly on the live site.

Squarespace and Wix: Embedding ZoomRadar Without a Plugin

Squarespace and Wix both support the same iframe code through their built-in embed blocks, no plugin required. Again, these are general platform steps, not ZoomRadar-specific guidance.

In Squarespace: Edit the page, click the insert point where the map should appear, and choose Code from the block menu. Paste the responsive iframe code from above directly into the code block, then save and preview. Note that iframe and JavaScript support in code blocks requires Squarespace’s Business plan or higher — it isn’t available on the Personal plan.

In Wix: Open the Wix Editor, click Add Elements, click Embed Code, then click Popular Embeds and choose Embed HTML. Click Enter Code, paste the responsive iframe code, and click Apply.

A couple of Wix-specific notes worth knowing: Wix’s HTML embed elements are iframes themselves, so they don’t automatically resize the way they would on WordPress or Webflow — you may need to manually adjust the embed box size for different screen widths inside the Wix Editor. Wix also introduced new security measures for custom code in December 2025, which occasionally blocks embeds that worked previously. If ZoomRadar’s map doesn’t appear after pasting the code, that’s the first thing to check with ZoomRadar support.

The underlying weather HTML doesn’t change based on which platform you’re using — only Wix’s non-responsive default behavior, noted above, sets it apart from WordPress and Webflow.

Making the Weather HTML Accessible and Performance-Friendly

A couple of small additions to the base iframe code improve both accessibility and page load performance, without changing how the map displays. The `title` attribute below is our own suggested addition, not part of ZoomRadar’s default code — everything else in this snippet comes from ZoomRadar directly:

ZoomRadar’s default code already includes loading=”lazy”, so the map holds off loading until it’s about to scroll into view, which speeds up initial page load if the radar map sits further down the page. The one addition worth making yourself is the title attribute, which gives screen readers a description of the embedded content — this matters for visitors using assistive technology and isn’t part of ZoomRadar’s default snippet.

Common Weather HTML Issues and Fixes

A few issues come up repeatedly when embedding any iframe-based widget, including ZoomRadar’s. These troubleshooting tips are general web knowledge, not confirmed ZoomRadar support documentation — if a fix here doesn’t resolve the issue, ZoomRadar’s support team is the next step:

Blank or broken iframe. Double-check that the src URL exactly matches what ZoomRadar sent you, with no extra characters or line breaks from copying. A single altered character in the URL prevents the map from loading.
Map appears cut off or squished. This usually means the responsive wrapper’s padding-bottom percentage doesn’t match your map’s actual aspect ratio. Increase the percentage for a taller map, decrease it for a shorter one.
Unwanted scrollbars around the map. Confirm scrolling=”no” is present in the iframe tag, and that the parent container isn’t forcing overflow: auto or overflow: scroll through your site’s CSS.
Map doesn’t resize on mobile. This typically means the basic version of the code is in place instead of the responsive version. Swap in the responsive <div>-wrapped code from earlier in this guide.
Ad blockers or privacy extensions hiding the map. Some browser extensions block third-party iframes by default. This is a visitor-side setting ZoomRadar can’t control, but it affects only a small percentage of visitors using aggressive blocking configurations.

A Note on Digital Signage HTML

If you’re embedding ZoomRadar on a digital signage display rather than a website, the weather HTML changes slightly. Digital signage typically loads a fixed-size display without a responsive browser window, so it’s worth adding an explicit width value alongside the height ZoomRadar already sets, matching your screen’s resolution, rather than relying on the responsive version. ZoomRadar’s digital signage plans include guidance on sizing for your specific display hardware.

Still Deciding?

If the code above is simpler than what you expected — no API keys to manage, no JavaScript to maintain, no developer needed — that’s the point. ZoomRadar’s whole technical footprint is the single iframe tag shown at the top of this guide. If you’re comparing that against another provider’s setup process, that’s the actual bar to measure against.

Frequently Asked Questions

What code do I need to add a weather display to my website?

You need a single iframe tag pointing to the custom map URL ZoomRadar sends you after you subscribe. For most websites, use ZoomRadar’s responsive version with a wrapping <div> so the map resizes with the browser window. You don’t need any additional scripts or libraries.

Does ZoomRadar’s weather HTML work on any website platform?

Yes. ZoomRadar’s iframe code works on any platform that accepts custom HTML, including WordPress, Webflow, Squarespace, Wix, and hand-coded HTML sites. WordPress and Webflow each have a dedicated element for pasting the code — Custom HTML block in WordPress, Code Embed element in Webflow.

Why does ZoomRadar use an iframe instead of a JavaScript widget?

An iframe loads ZoomRadar’s live radar map directly from ZoomRadar’s servers, so your site doesn’t need to run any additional scripts or handle map rendering itself. This keeps the code minimal and avoids conflicts with your site’s existing JavaScript.

Do I need to write any CSS for the weather HTML to look right?

Only if you want the map to resize responsively. ZoomRadar’s basic iframe code needs no CSS at all — just a fixed height value and display: block for layout. The responsive version adds a small CSS snippet on the wrapping <div>, which appears in the code example above.

Can I embed more than one ZoomRadar map on the same page?

Yes. Each map has its own unique URL from ZoomRadar, so you can paste multiple iframe blocks on the same page, each pointing to a different coverage area or map configuration.

Why isn’t ZoomRadar’s map showing up after I paste the code?

The most common cause is a slightly altered src URL — check that it exactly matches what ZoomRadar sent you, with no extra characters or line breaks. If the map still doesn’t appear, confirm your page builder’s code block actually renders raw HTML rather than displaying it as plain text, and check for a security plugin (on WordPress) or a recent platform security update (on Wix) that might be blocking the embed.