How to add an interactive 3D photo to Squarespace (Code block, not Embed block)

Squarespace has two blocks that look like the right one for an interactive 3D photo, and only one of them is. The Embed block wants a URL it can look up (YouTube, Vimeo, Spotify); a Gifsy scene is an <iframe> you paste as HTML, so it belongs in a Code block. Get that right and the rest is five minutes. This is the Squarespace chapter of the guide to interactive 3D photos for websites.

Quick answer: the 5 steps

1. Make the 3D photo. Upload one photo at gifsy.fun/create, generate, and click Publish. Copy the iframe.
2. Add a Code block. Edit the page → click an insert point → Code. Not the Embed block.
3. Paste and set the type. Paste the iframe; leave the type as HTML; keep 'Display source' off.
4. Size it. Wrap the iframe in a div with an aspect ratio, or give it a fixed height, so it fills the block on every screen.
5. Save and check on a phone. Drag sideways to orbit; swipe to scroll.

Code block, not Embed block

The Embed block is an oEmbed client: you give it a link, Squarespace asks that site for an embeddable player, and drops the result in. That works for services that publish oEmbed endpoints. It does not know what to do with a raw iframe. The Code block simply renders whatever HTML you paste, which is exactly what the Gifsy snippet is. If you have already tried the Embed block and got a broken link or a “can't embed this URL” message, that is why.

Plan requirement

Squarespace treats Code blocks that run scripts or iframes as a paid-plan feature. Its help centre lists them as available on the current paid tiers; older third-party guides still say “Business plan and above”, but Squarespace has renamed its plans since, so check the plan page you are actually on rather than trusting a screenshot from 2023. On a free trial the block appears in the editor; the plan decides whether visitors see the scene.

Step by step

1. Make and publish your scene at gifsy.fun/create. Copy the snippet from the publish panel.
2. In Squarespace, open the page in the editor and hover where the scene should go until the insert point appears. Click it.
3. Choose Code from the block menu (search “code” if the menu is long).
4. Paste the snippet into the block. Leave the type set to HTML. Make sure Display source is off — on, it prints your code as text.
5. Click outside the block, then Save. Preview the page; the scene renders on the live site even if the editor shows a placeholder.

The copied snippet is a fixed 500 px tall. That is fine for a first look; the next section replaces it with something that fits phones.

Sizing on phones

Squarespace blocks are fluid-width, so a fixed 500 px iframe becomes a tall sliver on a phone. Paste this instead — a wrapper with an aspect ratio and an iframe that fills it:

<div style="position:relative;width:100%;aspect-ratio:4/3">
  <iframe
    src="https://www.gifsy.fun/embed/<id>"
    title="Interactive 3D photo: …"
    loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"
  ></iframe>
</div>

Use 4/3 or 16/9 for a landscape scene and 3/4 for a portrait. If you want a different ratio on phones, add a <style> tag with a @media (max-width: 640px) rule inside the same Code block; Squarespace passes it through. Keep loading="lazy" for anything below the fold and remove it for a scene that sits at the top of the page.

If code blocks aren't available on your plan

You can still show the scene, just not the draggable version. Export a GIF or WebM from the Gifsy workshop and use an Image block (GIF) or a Video block (upload the clip, set it to loop). Visitors see the orbit; they can't steer it. Link the image to the scene's share page on gifsy.fun so the live version is one click away.

FAQ

Make a 3D photo from your own image. Related: the full iframe embed guide, the WordPress version, and how 3D photos work.