Hotspot images inside your Framer site.

Framer sites tend to lean heavily on motion and layout polish, and a static screenshot in a case study or product page can feel flat next to that. An interactive image gives visitors something to do without adding custom React overrides — you keep the whole page inside Framer's visual editor. It works well for agency case studies annotating a redesign, SaaS product tours pointing at UI elements, and portfolio pieces breaking down a layout decision. Compare it with other embed approaches on the comparison page.

Framer gives you two ways to get an iframe onto the canvas, and the Embed component is the right one for this:

• Embed component (recommended): A built-in layer type made for pasting HTML/iframe snippets. Drag it in from the Insert panel, paste the code, resize like any other layer. No code editor, no override file, works on the free plan.
• Code override: A React file you attach to a layer to change its behavior. Useful if you need to swap the embed URL per CMS item or per breakpoint dynamically, but it's unnecessary overhead for a single static interactive image.

Unless you have a CMS-driven use case, skip the override and use the Embed component directly.

Framer's Embed layer takes whatever width and height you give it, and the iframe fills that box exactly:

1. Set the layer's width to Fill so it stretches to its parent's width on every breakpoint.
2. Leave height on Fit or paste the snippet that already wraps the iframe in an aspect-ratio box — that way height is derived from width automatically instead of a fixed pixel value that breaks on narrower screens.
3. If you do need a fixed height (for a hero band, for example), calculate it as width ÷ aspect ratio for each breakpoint you check.

<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>

Framer's Link and Stack components let you make a whole image clickable, or overlay one interactive element per layer, but building several independent click targets with their own popup content on one photo means stacking many absolutely-positioned layers by hand and re-aligning them at every breakpoint. Interactive Image handles that positioning with percentages internally, so the Embed component just holds one iframe instead of a pile of layered elements. For background on the approach, see what is an interactive image.