How do I add an interactive image to Squarespace?

Build the image in Interactive Image, copy the iframe snippet, then edit your Squarespace page, add a Code Block where you want the image, and paste the snippet in. Save and it is live — there is no plugin or extension to buy.

Which Squarespace element do I use for the embed?

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

Do I need a Business plan to add a Code Block?

Yes. Code Blocks and custom code require Squarespace's Business plan or higher; Personal plans do not include them. If you are on Personal, the workaround is to publish the interactive image as its own shareable link and point a button at it instead of embedding it.

Why does my Code Block show the code instead of the image?

Two usual causes: the block's mode is set to Markdown rather than HTML, or you are still looking at the editor preview. Code Blocks often render as a placeholder inside the editor and only display properly on the saved, live page — always check the published page before troubleshooting further.

Does the interactive image work with the fluid engine layout in 7.1?

Yes. The embed fills 100% of the Code Block's width and derives its height from your image's aspect ratio, and hotspot positions are percentages of the image, so everything stays aligned as the fluid engine reflows columns.

The embed is cut off or has a scrollbar. How do I fix it?

That is a height mismatch. Make sure the aspect-ratio in the snippet matches your actual image, and drag the bottom edge of the Code Block down so the block itself is not shorter than the embed. Squarespace does not auto-grow a block to fit iframe content.

Can I use it in a Squarespace portfolio, product, or blog page?

Yes — any page type that supports a Code Block, including portfolio pages, product additional-info sections, blog posts, and page sections.

Will an embedded interactive image hurt my Squarespace SEO?

Not by itself, but content inside the iframe is not indexed as part of your page. Put the headings, descriptions, and keywords in real Squarespace text blocks around the embed and use the image as the experience layer.

Can I put the interactive image in a header, footer, or every page?

Yes, by adding the snippet under Settings, Advanced, Code Injection instead of a single Code Block — though for most sites a Code Block on the specific pages that need it is easier to manage.

How do I add image hotspots in Squarespace?

Edit the page, add a Code Block where the image should sit, and paste the iframe snippet from Interactive Image. It works on Squarespace 7.0 and 7.1 including fluid engine, on any plan that allows code blocks, with no plugin — and hotspots stay aligned on mobile because positions are percentages.

For Squarespace

Clickable image hotspots on Squarespace, no plugin.

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

Start free See the live editor

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

Pasting the Interactive Image iframe snippet into a Squarespace code block — Publishing gives you one iframe snippet — paste it into any embed or HTML block.

Build your Squarespace hotspot image here

Upload your image and click to place hotspots. Publish with a free account to get the snippet you drop into a Squarespace Code Block.

InteractiveImage.com

Hover a hotspot to preview · drag to move4 hotspots · runs in your browser

Publish this image — start free See plans — Pro $5/mo

This is a live demo — nothing here is published yet. Create a free account to publish your image and get a one-line embed code for Wix, Webflow, WordPress, Squarespace or plain HTML, with hosted images, images and video in the cards, CTA buttons and edits that go live instantly. Free includes 1 published image with the Interactive Image badge; Pro removes the badge and unlocks white-label embeds.

Code Block, not a template hack

No custom CSS injection or template 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
Same embed works in Code Injection for site-wide use

Step by step in the Squarespace editor

Build the image in Interactive Image and copy the iframe from the Embed panel. It already includes your image's aspect ratio.
In Squarespace, open Pages, click the page, and press Edit.
Hover where the image should go and click the insert point (the +), then choose Code.
Clear the sample <p> content, confirm the mode dropdown says HTML, and paste the snippet.
Click Apply, drag the block to the width and height you want, then Save.
Open the live page (not the editor preview) and test a hotspot on desktop and on a phone.

The snippet itself is one element — there is nothing else to install on the page:

<iframe
  src="https://interactiveimage.com/embed/your-map-id"
  style="width:100%;border:0;aspect-ratio:1.6;overflow:hidden;display:block;"
  scrolling="no"
  loading="lazy"
  title="Interactive image"
></iframe>

Code Block vs Embed Block vs Code Injection

Option	Use it when	Watch out for
Code Block	One image on one page — the default choice	Business plan required; renders as a placeholder in-editor
Embed Block	Known providers such as YouTube or Spotify	Picky about raw iframe HTML; can strip attributes
Code Injection	Site-wide placement, header or footer	Applies everywhere; harder to undo per page

For a custom embed like this one the Code Block is the reliable path in both Squarespace versions.

Troubleshooting the four issues people actually hit

The block shows raw code. The mode is set to Markdown. Switch it to HTML in the block's dropdown.
Nothing appears in the editor. Expected. Squarespace renders many Code Blocks as a grey placeholder while editing — save and view the live page.
The embed is clipped or scrolls. The block is shorter than the embed. Drag the block taller and check the aspect ratio in the snippet matches the image.
Hotspots look off-centre on mobile. Usually a wrapper forcing a fixed height. Remove any height you added and let the aspect ratio drive it — the positioning maths is explained in why hotspots drift on mobile.

What Squarespace sites use this for

Designers and architects — annotated project photos and clickable floor plans in a portfolio.
Venues and event spaces — a site or venue map with capacities and enquiry links.
Retail and makers — shoppable lifestyle photos pointing at Squarespace product pages.
Hospitality — property maps and menus, covered in hospitality use cases.

Keeping the page indexable

Search engines do not credit your page with the text inside an iframe, so treat the embed as the interaction and keep the substance in Squarespace text blocks: a real H1, a paragraph explaining what the image shows, and a short list of the same rooms, products, or locations you hotspotted. That gives crawlers something to rank and gives visitors a fallback. More detail in SEO for interactive images.

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.

Where do I choose the map type and edit a dot?

In the account dashboard, New Map offers Image map or Mapbox map. This choice is fixed after creation. For image maps, choose Upload Background Image and Add new dot; geographic maps offer address search and Import locations. Select a dot and use Content for its type, text, media, and links, Appearance for that dot, and Map settings for shared defaults. Enable embedding and copy the current snippet before publishing it on your website.

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.

Continue exploring

Frequently asked questions

Does this work on the Squarespace mobile app editor?

Add the Code Block from a desktop browser. Once it is saved it displays fine on mobile, but pasting HTML is far easier on desktop.

Can I have several interactive images on one page?

Yes. Add a separate Code Block for each one; they do not interfere with each other.

Turn any image into a guided experience.

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

Create your interactive image