Does Framer support iframe embeds without custom code?

Yes. Framer ships a built-in Embed component specifically for pasting HTML/iframe snippets, so you don't need a code override or a paid plan feature to add one.

Will the hotspot image respect Framer's responsive breakpoints?

Yes, as long as you set the Embed component's width to fill its container (or use Framer's fill/fixed sizing per breakpoint). The hotspots inside are percentage-based, so they track the container's actual rendered size.

Can I animate the Embed component with Framer's motion tools?

You can animate the container (fade-in, scale, scroll-triggered reveals) the same as any other Framer layer. The hotspots and popups inside the iframe run independently and aren't affected by Framer's animation engine.

For Framer

Hotspot images inside your Framer site.

Drag in Framer's Embed component, paste one iframe, and your photo or diagram becomes clickable — without leaving the visual canvas.

Start free See the live editor

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

Native Embed component

Framer's canvas already has an Embed layer built for exactly this — no code override, no plugin marketplace.

Design-first workflow

Position the Embed layer like any other Framer element, then let motion effects wrap around it.

Breakpoint-aware sizing

Set the Embed to fill and Framer's responsive engine and the image's own percentage hotspots stay aligned together.

What you get

No code override required — use the built-in Embed layer
Works inside Framer's component and page structure
Popups render inside the iframe, independent of Framer's motion layer
Percentage hotspots track Framer's responsive width changes
Great for portfolio case studies and product marketing pages

Where this fits in a 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.

Setup at a glance

Framer · Embed component (HTML mode)

Time: About 4 minutes
Requirement: Any Framer site plan

Component: Embed → HTML
Breakpoints: All
Code required: Paste only

Step by step

How to add an interactive image to Framer

Five steps, no developer. Everything below happens once — after that you edit hotspots in Interactive Image and your Framer page updates on its own.

01
Upload your image
Create the interactive image with your artwork.
02
Add hotspots
Place dots, set styling, and write the popup cards.

Copy the snippet

Copy the responsive iframe from the Embed panel.

<div style="position:relative;width:100%;padding-top:56.25%">
  <iframe src="https://interactiveimage.com/embed/YOUR-ID"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
    scrolling="no" loading="lazy"></iframe>
</div>

The Embed panel showing the responsive iframe snippet and a copy button

04
Insert Framer's Embed
Add the Embed component from the insert menu, switch it to HTML, and paste the snippet. Set the layer to Fill width and Fit height.
05
Publish
Preview on each breakpoint and publish. The embed behaves like any other Framer layer inside stacks and grids.

Troubleshooting

Fixes for the Framer issues people hit

The embed has a fixed height that ignores my layout

Set the Embed layer's width to Fill and let the padding-based wrapper in the snippet control the height instead of a hard pixel value.

The embed looks cropped or has scrollbars

The iframe height doesn't match the image aspect ratio. Copy a fresh snippet from the Embed panel — it bakes the exact ratio into a padding-based wrapper — or set the iframe height to width ÷ aspect ratio.

Hotspots look slightly offset from the artwork

That happens when the container letterboxes the image. Interactive Image measures the rendered image box, so hotspots stay glued to the artwork — just make sure you didn't force a fixed height that differs from the image ratio.

Changes aren't showing on the live site

Save in the editor, then hard-refresh the published page. The embed always renders the latest saved version — you never need to re-paste the snippet unless the aspect ratio changed.

Guides for other platforms

The same embed works anywhere you can paste an iframe or a link.

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image