How to embed a 3D photo on any website (iframe guide)

To embed a 3D photo on a website you need one photo, a published Gifsy scene, and an <iframe>. The scene runs live in the frame — the visitor can drag it — and the snippet below works on any page that accepts HTML, from a hand-written site to Webflow, Framer, Squarespace, WordPress, Wix, Carrd, Notion and Shopify. This is the reference chapter of the guide to interactive 3D photos for websites.

Quick answer: the universal embed snippet

1. Make and publish the 3D photo. Upload one photo at gifsy.fun/create, generate, and click Publish. You get a share page and an embed snippet.
2. Copy the iframe. From the publish panel, or from the share page under the scene.
3. Paste it and set a height. Into your site's HTML or embed element. Give it a fixed height or an aspect-ratio wrapper.

This is exactly what the publish panel copies:

<iframe src="https://www.gifsy.fun/embed/<id>" style="width:100%;height:500px;border:0" loading="lazy"></iframe>

And this is the version we recommend once it is in place — a sized wrapper instead of a fixed height, and a title for screen readers:

<div style="aspect-ratio:4/3;max-width:960px">
  <iframe
    src="https://www.gifsy.fun/embed/<id>"
    title="Interactive 3D photo: describe the picture"
    loading="lazy"
    style="width:100%;height:100%;border:0"
  ></iframe>
</div>

Every attribute, explained

Why an iframe (and not a script tag)

Isolation. The Three.js viewer, its WebGL context and its styles live inside the frame, so nothing lands in your page bundle, your CSS can't leak into the scene and the scene can't leak into your layout. Your page stays static and cacheable. The cost is a fixed box: you size the frame, but you can't restyle what's inside it. For what the viewer actually draws, see how 3D photos work.

Does an embedded 3D photo slow my page?

The frame requests, in order:

• A small poster image, rendered into the frame's HTML on the server, so something paints immediately.
• scene.json — about 1 KB of settings and asset paths.
• The colour image as WebP, long edge 1440 px — typically 150–350 KB.
• The depth map as a lossless PNG — tens of KB; it is smooth greyscale, so it compresses well.
• The subject mask (PNG) and the inpainted backdrop (WebP), when the scene has a subject.
• The viewer script, which bundles Three.js.

Every asset is served through gifsy.fun with a one-year immutable cache header and an open CORS policy, so once one visitor in a region has loaded a scene, the next is served from the edge. There is no video, so no autoplay policy applies, and no AI model is downloaded — the depth estimation happened once, when the scene was made. Lazy-load anything below the fold, keep one scene per screenful, and measure the real transfer in DevTools for your own scene before you quote a number.

Platform by platform

Each one opens with the exact menu path, then the one thing that trips people up.

Webflow

Add panel → search “embed” → Code Embed → paste → Save & Close. Set the wrapper's aspect ratio at each breakpoint. Gotcha: Code Embed is locked on a free Starter site (it won't even drag onto the canvas) — it needs a paid Site plan or a paid Workspace. On the free plan, show the scene as a WebM in a Background Video element instead. Full walkthrough, tested on a free account: add a 3D photo to Webflow.

Framer

Insert → Embed → type HTML → paste. Size it with the frame like any other layer. Gotcha: Framer warns that some sites refuse to be framed — Gifsy allows it. Full walkthrough: 3D photo in Framer.

Squarespace

Add a Code block (not the Embed block, which expects an oEmbed URL) → paste → leave “Display source” off. Gotcha: code blocks that run scripts or iframes are available on Squarespace's paid plans — check the current plan list before you rely on it.

WordPress

Block editor → Custom HTML block → paste. In Elementor, the HTML widget. Gotcha: authors and contributors without the unfiltered_html capability get the iframe stripped on save — paste as an administrator or editor. Full walkthrough: WordPress without a plugin.

Wix

Add Elements → Embed Code → Embed HTML → paste. Gotcha: Wix wraps your code in its own iframe and doesn't make it responsive, so set the Wix element to the aspect ratio you want and use width:100%;height:100% on the inner iframe. HTTPS only — Gifsy is.

Carrd

Add an Embed element → Code → paste, then set the element's height in pixels; Carrd's column handles the width. Embed elements are a paid Carrd feature.

Notion

Type /embed and paste the URL — https://www.gifsy.fun/embed/<id> — not the HTML. Notion refuses raw iframes and embeds URLs through its own service; it works on published public pages. Drag the handles to resize.

Shopify

Theme editor → pick the template (Home page, or Products → Default product) → Add section → Custom Liquid → paste into the Liquid code box. Text and Rich text blocks only take basic formatting, so an iframe pasted there won't run. For a scene on just one product, alternate templates, and a metafield setup for many products: add a 3D product photo to Shopify.

Ghost, Substack, plain HTML

An HTML card, or anywhere HTML is allowed. Paste the snippet; that's all.

Accessibility and reduced motion

Give the iframe a title and put a caption next to it describing the photo — the canvas inside has no alt text. Orbit is pointer- and touch-driven today; there is no keyboard control.

The scene auto-orbits gently until the visitor moves the pointer. The viewer reads the operating system's prefers-reduced-motion setting: when it's on, the scene holds still at rest and only moves when the visitor drags or moves the pointer over it. If you'd rather show no WebGL at all for those visitors, do it host-side: hide the frame and show the scene's own still image instead.

<style>
  .g3d-fallback { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .g3d { display: none; }
    .g3d-fallback { display: block; }
  }
</style>
<div class="g3d"><iframe src="https://www.gifsy.fun/embed/<id>" …></iframe></div>
<img class="g3d-fallback" src="https://www.gifsy.fun/api/asset/<id>/image" alt="…">

Troubleshooting

The “Made with Gifsy” badge

Scenes on a free account show a small “Made with Gifsy” link at the bottom of the frame. It lives inside the iframe, so the host page can't edit it. Buying any 3D model credit pack (from $9) removes it from all your embeds, including ones already published; the embed code doesn't change. Commercial use is allowed on free all the same. If you want to credit Gifsy on your own page anyway, a plain text link is welcome and entirely optional.

FAQ

Make a 3D photo from your own image, or read how the depth, matte and planes actually work, or the 3D image effect on mouse movement with and without code. Data flow, in full: the privacy policy.