Add interactive hotspot images to Webflow.

Webflow's Embed element (Add panel → Components → Embed, or the keyboard shortcut for custom code) accepts raw HTML. Drop it inside the div block or grid cell that already has the width you want, set the element to 100% width, and let the snippet's aspect-ratio wrapper control height. Fixed pixel heights are what cause letterboxing and stray scrollbars at smaller breakpoints.

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://interactiveimage.com/embed/YOUR-ID"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    scrolling="no" loading="lazy" title="Interactive image"></iframe>
</div>

Replace the ratio with your image's real ratio — the Embed panel bakes it in for you automatically when you copy a fresh snippet.

One template can serve a different interactive image per collection item, which is the pattern Webflow agencies usually want for product catalogs and property listings:

1. Add a plain-text field to the collection — call it "Embed URL".
2. Paste each item's embed URL into that field in the CMS.
3. On the collection template page, add an Embed element inside the collection item and drop the field into the iframe's src using the purple field picker.
4. Publish. Each item now renders its own hotspot image from one layout.

Add a second field for the aspect ratio if your images differ in shape, and drop it into the wrapper's aspect-ratio value.

You can absolutely position absolute divs over an image and wire hover interactions to reveal tooltips — it's a legitimate Webflow technique. The cost shows up later: every marker is a manual absolute position you re-check at each breakpoint, content edits mean opening the Designer, and a client can't update a label without your help. An embed keeps hotspot data out of the layout entirely, so the same image can be edited by a non-designer and updated across every page at once. If you'd rather see the tradeoffs in detail, read Interactive Image vs Webflow interactions or the CSS, SVG, and hotspot comparison.

Crawlers do not read the contents of a third-party iframe, so the hotspot text inside the embed is not page content for SEO purposes. That is fine as long as the Webflow page carries the substance itself:

• Keep a real h1 and intro paragraph in Webflow above the embed, describing what the image shows.
• Repeat the key specs, room names, or product names as normal Webflow text or a rich text block below the embed. Visitors skim it, crawlers index it.
• Give the iframe a descriptive title attribute — it is what screen readers announce for the frame.
• On CMS templates, bind that supporting copy to collection fields so it stays specific per item rather than boilerplate.