Which Squarespace element do I use for the embed?

The Code Block. It's available on both 7.0 and 7.1, accepts raw HTML, and renders the iframe directly without stripping attributes the way the older Embed Block sometimes does.

Does the interactive image match Squarespace's fluid engine layout?

Yes. Because hotspot positions are stored as percentages of the image, the iframe content resizes with the Code Block's container as Squarespace's fluid engine changes column widths.

Can I use this in a Squarespace portfolio or gallery page?

Yes — it works on any page type that supports a Code Block, including portfolio pages, product description sections, and blog posts.

For Squarespace

Clickable hotspots on Squarespace, no plugin.

Drop one iframe into a Squarespace Code Block and turn a photo, floor plan, or diagram into something visitors can explore.

Start free See the live editor

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

Code Block, not a template hack

No custom CSS injection or template.conf edits — a standard Code Block is all you need.

Fluid-engine friendly

Percentage-based hotspots resize correctly as Squarespace's layout engine changes column widths across breakpoints.

Works in 7.0 and 7.1

The Code Block behaves the same in both editors, so this works regardless of which Squarespace version your site runs.

What you get

No app store purchase or extension required
Works inside portfolio, product, and blog page types
Popups support images, video, and buttons
Percentage positioning survives Squarespace's responsive grid
Re-editing hotspots updates every page instantly

A note on the older Embed Block

Squarespace also has a dedicated Embed Block meant for known providers like YouTube or Spotify. It works for generic iframes too, but it's pickier about URL formats and sometimes rejects an iframe pasted as raw HTML. The Code Block is the more reliable choice for a custom embed like this one, and it's what we recommend across both Squarespace versions. For layouts with several sections, see the interactive image maker or browse example embeds for inspiration.

Setup at a glance

Squarespace · Code Block on any 7.1 page

Time: About 5 minutes
Requirement: Business plan or higher (Code Blocks are gated)

Block: Code (HTML)
Plan needed: Business+
Version: 7.0 and 7.1

Step by step

How to add an interactive image to Squarespace

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

01
Upload your image
Create the interactive image and upload your visual.
02
Place and write hotspots
Drop dots on the map, plan, or product and write the card content for each one.

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 a Code Block
Click an insert point, choose Code, delete the placeholder, and paste the snippet. Leave the block type set to HTML and make sure Display Source is off.
05
Save and check mobile
Save the page, then use Squarespace's mobile preview. The embed scales to the block width automatically.

Troubleshooting

Fixes for the Squarespace issues people hit

Squarespace shows a grey "Code Block" placeholder while editing

That's expected — Squarespace disables live iframes in the editor. Exit edit mode or view the live page to see the embed.

Code Block isn't available

Code Blocks require the Business plan or higher on Squarespace. On lower plans, the embed can't be added.

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