How to Embed a 3D Tour on a Website (Webflow, WordPress, Shopify, Squarespace)

A finished 3D capture does not go onto a website the way a photo does. There is no upload button in Webflow or Shopify that accepts a Gaussian splat file, so how to embed a 3D tour on a website comes down to one thing: pasting a small piece of code, usually an iframe, into a page you do not fully control.

The scene stays hosted wherever it was processed. The embed is a frame, not a copy.

Four builders cover most of the traffic a marketer deals with: Webflow, WordPress, Shopify and Squarespace. Each treats a raw iframe differently, and on three of the four, the plan you pay for decides whether the tour shows up at all.

What actually happens when you embed a 3D tour on a page?

An embed is not a file transfer. The page you are editing holds a small block of HTML, usually an <iframe src="..."> tag, pointing at a URL hosted somewhere else: the platform that processed and stores the 3D scene. When a visitor loads your page, their browser makes a second request to that URL and renders the result inside a sandboxed rectangle. The scene's textures, camera path and file size never touch your site's own server.

The same mechanism runs a YouTube video or a Calendly widget. What differs with a 3D tour is what sits inside the frame: a WebGL canvas rendering a live, walkable scene rather than a flat video, so a visitor can drag, zoom and step through rooms without leaving your page.

Two other delivery methods sit next to a raw iframe: oEmbed, which auto-generates the embed from a bare link for a short allowlist of providers, and a resizable JavaScript snippet. Captures Studio's share panel outputs the iframe version directly, alongside a one-time link and a QR code, so the same walkthrough opens on a phone, a tablet or a VR headset with no separate app for any of them.

How to embed a 3D tour on a website, platform by platform

The mechanics above are the same everywhere. What changes is where the box lives in the editor, and whether your plan lets a raw tag through at all.

Webflow

Webflow calls its raw-HTML container the Embed element, dragged in from the Add panel inside the Designer. Paste the iframe tag and the canvas shows a placeholder until you preview or publish, since iframe content does not render live in the Designer itself.

The Embed element only ships on a paid plan: Core, Growth, Agency or Freelancer Workspace, or an active Site plan. The free Starter tier does not carry it (Webflow Help Center, 2026). Default sizing is fixed pixels, which breaks on a phone unless wrapped in a Div block with the height set by a CSS aspect-ratio rule instead.

WordPress

Two different products share the name, and the instructions diverge. Self-hosted WordPress.org, running on your own server, has no restriction: drop a Custom HTML block into the post or page editor, paste the iframe, done.

WordPress.com, the hosted version, filters iframe, script, form, embed and object tags out of the Custom HTML block by default. Surviving a save needs both a paid plan and hosting features activated by installing at least one plugin (WordPress.com Support, 2026). Skip either step and the tag vanishes after saving, with no error explaining why.

Shopify

Shopify has no dedicated 3D-tour block, so the route is a Custom Liquid section: in the theme editor, Add section, Custom Liquid, then paste the iframe into the Liquid code field. It only appears on a theme built on Online Store 2.0, such as Dawn; an older, unconverted theme needs its Liquid files edited directly.

Product pages are the harder case. A Custom Liquid section drops onto most page and template types, but whether it is available on the product template specifically depends on the theme's own section list, not on Shopify's plan tier.

Squarespace

Squarespace's equivalent is the Code Block, inserted from the same menu as an image or text block, with "Display Source" toggled on before the iframe goes in.

JavaScript and iframes in a Code Block run only on the Core plan and up, covering Plus, Advanced, Business and both Commerce tiers. The entry-level plan strips them the same way WordPress.com does (Squarespace Help Center, 2026).

All trademarks belong to their respective owners. No affiliation, partnership or endorsement is implied.

Where it holds up

An embed is the only realistic way to put a live, interactive 3D scene on a page you do not fully control. Nothing to self-host, no video file eating your CDN bandwidth, and the tour updates the moment you republish it, without touching the site page again.

It travels beyond the frame, too. The same link that generates the embed doubles as a standalone URL and a QR code, which matters because listings with a 3D Home tour were viewed 43% more than those without (Zillow, 2022). A flyer, a follow-up email and the listing page can all point at one walkable scene. On a product page, the same mechanism is what lets a shopper turn an object over on the page: products carrying 3D or AR content saw a 94% higher conversion rate (Shopify).

Editing stays live. Add a hotspot or move a camera stop, and every page embedding that tour picks up the change on the next load, because the page never held more than a pointer. Browse the community gallery for embeds already running on other sites.

Where it falls down

An iframe is sandboxed by design, and that sandbox is where most trouble starts. A Content-Security-Policy header that does not allowlist the tour's domain in frame-src blocks the whole box silently, with no console error a marketer would recognise. Custom Shopify themes and enterprise WordPress builds are where this shows up most.

Ad blockers and strict privacy extensions treat third-party iframes as trackers for a meaningful share of visitors, so a blank rectangle is not a hypothetical.

The plan-gating above is not a minor inconvenience. A WordPress.com site below Business will let you paste the iframe and publish, showing nothing wrong until someone views it, because the tag is stripped after save with no warning at edit time.

Page weight is a real cost, too. A WebGL viewer loading eagerly competes for bandwidth, so an iframe that loads only once it scrolls into view is worth the extra step on an image-heavy page.

None of this is unique to 3D. A YouTube embed fails the same CSP check, and a Calendly widget disappears from the same stripped plan. A tour is just the failure hardest to miss, since a blank rectangle where a room should be reads worse than a missing video.

What does a good first embed actually look like?

Start from the share panel, not the code. Set the hotspots and camera path in the editor first and generate the embed snippet last, since re-embedding after every small edit is wasted motion once the pointer updates on its own. The interactive capture tutorial covers that setup end to end if the scene itself is not finished yet.

Paste the snippet into a staging page before the live one, and load it on a phone held in portrait, not only on a wide monitor in the office. A fixed-pixel embed that looks right at 1440 pixels wide is routinely half cut off at 390.

Check what surrounds it. A tour dropped under a hero image with no caption reads as filler; one placed where a buyer or guest would ask "what does this actually look like" earns the click. The Gaussian splatting piece on real estate listings and the Gallery Park hotel case study both place the tour directly below the price or booking block for that reason, not at the bottom of the page.

If the destination page sits behind a strict CSP, or a client wants the embed's domain to read as their own rather than a third party's, a white-labelled viewer on a custom domain, available on Captures Studio's enterprise tier, solves both.

FAQ

Do you need a developer to embed a 3D tour?

No, not for the embed step itself. Pasting an iframe into Webflow's Embed element, a WordPress Custom HTML block, a Shopify Custom Liquid section or a Squarespace Code Block is a copy-paste job once the snippet exists. A developer helps only if a Content-Security-Policy header needs a new domain allowlisted, a one-line server-side change, not a redesign.

Why did my embed disappear after I saved the page?

Almost always a stripped tag, not a bug. WordPress.com removes iframe, script and several other tags from the Custom HTML block unless the site is on a paid plan with hosting features activated, and Squarespace does the same below its Core plan. The page saves without an error either way, so the first sign is usually a blank space where the tour should be.

Can I add a 3D tour to Shopify without upgrading my theme?

You need a theme built on Online Store 2.0, such as Dawn, since that is what exposes the Custom Liquid section in the theme editor. Most themes shipped or updated since 2021 already qualify. An older, unconverted theme requires editing the theme's Liquid files directly instead.

Does embedding a 3D tour slow down my page?

It adds one more request, the same as any third-party video or widget would. Loading it lazily, so the iframe only fires once it scrolls into view, keeps it from competing with the rest of the page on first load. A fixed-pixel embed with no lazy loading on an already slow page is the combination that actually causes a visible delay.

Does the embedded tour work on mobile without an app?

Yes. A Gaussian splat scene renders in the browser's own WebGL canvas, the same technology already running the rest of the page, so it opens on a phone, tablet or VR headset with no separate app required.

The embed code itself takes thirty seconds to paste. Almost all of the real work sits upstream: the plan tier hosting the page, the theme or workspace that decides whether a Custom Liquid section or a Custom HTML block even exists, and the wrapper CSS that keeps a fixed-pixel box from breaking on a phone.

Get those three right once, and the tour behaves like any other embedded object on the page: a pointer, not a file, so a hotspot added later shows up everywhere that pointer already lives, with nothing to re-upload.