Can Google Sites embed an interactive image?

Yes. Insert → Embed accepts either an iframe snippet ("Embed code" tab) or a URL ("By URL" tab). Paste the snippet from Interactive Image's Embed panel and the clickable hotspots render live on the published page.

Why does my Google Sites embed show a grey box?

The embedded URL isn't publicly reachable. Publish the interactive image first — a private editor or preview URL renders as an empty block for visitors and often for you too.

Does it work on mobile?

Yes, the hotspots are tappable and stay aligned because they're stored as percentages. Google Sites keeps the block's fixed height on phones, so pick a crop that isn't extremely wide or the image will letterbox.

Is this allowed on a Google Workspace for Education site?

Embeds are permitted unless an administrator has restricted third-party iframes. If the block renders blank for students but not for you, ask your Workspace admin whether external embeds are blocked for that org unit.

Can I use it on a Google Sites intranet page?

Yes — annotated office floor plans, org charts, and equipment diagrams are common intranet uses. Anyone who can view the page sees the live image; editing it requires access to the Interactive Image account, not the site.

Do visitors need a Google account?

Only if your Google Site itself is restricted. The embed adds no login requirement of its own.

Can I update the hotspots without editing the Google Site?

Yes. Save changes in the Interactive Image editor and the embedded block reflects them on the next page load — no republish of the site needed unless the aspect ratio changed.

For Google Sites

Clickable maps and diagrams inside Google Sites.

Insert → Embed, paste, publish. Campus maps, org charts, and annotated diagrams that stay accurate on desktop and phones.

Start free See the live editor

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

Google Sites page with an embedded interactive floor plan where each room opens an information card — A campus or office plan is the most common Google Sites use — one marker per room.

Build your Google Sites map or diagram here

Upload a plan, chart, or photo and click to place hotspots. Publish with a free account, then paste the URL into Insert → Embed in Google Sites.

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.

No code required

Paste an iframe snippet or just the URL. Google Sites handles the rest.

Free with any Google account

Nothing to buy on the Google side, and a free Interactive Image plan publishes one image.

Built for schools and intranets

Campus maps, department directories, org charts, lab and equipment diagrams.

What you get

Insert → Embed → Embed code, or By URL
Hotspots stay aligned at every block size
Update the image without republishing the site
Tappable on Chromebooks, tablets, and phones
Cards can hold photos, video, and links to Drive or Classroom

Embed code or By URL — which tab to use

Google Sites gives you two ways in, and they behave slightly differently:

By URL is the quickest. Paste the embed URL and Google Sites builds the iframe for you. Use this when you're happy to size the block by dragging.
Embed code takes the full snippet. Use it when you want the wrapper's aspect-ratio behaviour, or when the By URL tab refuses a link it doesn't recognise.

Either way, the one hard requirement is that the interactive image is published. Google Sites fetches the URL as an anonymous visitor, so anything gated renders as an empty block.

Sizing the block so nothing is cropped

Google Sites doesn't read your image's aspect ratio — it uses whatever height you drag the block to. The arithmetic is simple: divide the block's width by the image's aspect ratio. A 16:9 image in a 960px-wide block wants about 540px of height. A 4:3 image wants 720px.

Because that height is fixed across breakpoints, very wide panoramas letterbox badly on phones. If mobile matters, prefer a crop closer to 4:3 or 3:2, and re-check the block after you change the section layout — Google Sites won't recompute it for you.

What schools and internal teams build with this

Campus wayfinding maps with a card per building; departmental org charts where each portrait opens a role and contact; lab and workshop equipment diagrams linking to safety procedures; annotated screenshots in an IT help page. If your image is a building layout, the floor plan tool covers room-by-room guidance, and interactive images for education has classroom-specific examples.

Setup at a glance

Google Sites · Insert → Embed → Embed code (or By URL)

Time: About 4 minutes
Requirement: Any Google account — new Google Sites

Menu: Insert → Embed
Accepts: Embed code or URL
Cost: Free with any Google account

Step by step

How to add an interactive image to Google Sites

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

01
Upload your image
Create the interactive image and upload your campus map, org chart, floor plan, or annotated screenshot.
02
Place the hotspots
Click each room, department, or feature to drop a dot, then write the card copy and links.

Copy the embed

Copy the responsive iframe from the Embed panel, or just the plain URL if you prefer the By URL tab.

<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 an Embed block
In Google Sites click Insert → Embed. Use the "Embed code" tab and paste the snippet, or the "By URL" tab and paste the embed URL, then click Insert.
05
Resize and publish
Drag the embed block's handles to the width and height you want, preview on mobile with the phone icon, then Publish.

Troubleshooting

Fixes for the Google Sites issues people hit

Google Sites shows a grey box or "can't be embedded"

The URL must be public. Publish the interactive image first, then re-insert. Private preview URLs will not render for visitors.

The embed has its own scrollbar

Google Sites uses the block height you drag, not the aspect ratio. Resize the block until the whole image fits — roughly block width ÷ image aspect ratio.

It looks fine on desktop but cropped on phones

Google Sites keeps the embed's fixed height on mobile. Choose a less wide image crop, or accept a slightly taller block so nothing is clipped at narrow widths.

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

Turn any image into a guided experience.

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

Create your interactive image