Embedding & iframes

Embed your Splat Labs projects directly on any website so visitors can explore your 3D scenes without leaving the page — no app, no plugin, no account required.

Overview

Every Splat Labs project gets a shareable viewer URL that can be embedded on any website using a standard HTML <iframe> tag. The embedded viewer is fully interactive — visitors can orbit, zoom, and explore just like they would on Splat Labs Cloud.

Embeds work on:

• Custom websites and landing pages
• CMS platforms (WordPress, Squarespace, Webflow, Wix, Shopify)
• Real estate listing sites (Zillow, MLS, Realtor.com)
• Documentation tools (Notion, Confluence)
• Static site generators (Hugo, Gatsby, Astro)
• React / Next.js applications

Getting Your Embed Code

Step 1: Open the Share Dialog

1. Open your project on Splat Labs Cloud
2. In the viewer, look at the left sidebar drawer
3. At the bottom of the sidebar, click the Share button
4. The Sharing dialog opens

Step 2: Get Your Embed URL or Code

In the sharing dialog:

1. Make sure "Link sharing enabled" is checked — this allows anyone with the link to view your project
2. Click the EMBED button to expand the embed section

You will see two fields:

• Embed URL — The viewer URL to use directly or paste into platforms like Zillow, Notion, or MLS
• Embed Code — A ready-made HTML iframe snippet you can copy and paste into your website

Click the copy icon next to either field to copy the value to your clipboard.

Step 3: Create the iframe

If you copied the URL (instead of using the EMBED button), wrap it in a standard HTML iframe tag:

<iframe
  src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

Step 3: Paste into Your Website

Drop the iframe code into your website's HTML wherever you want the viewer to appear. That's it — your visitors can now explore the full 3D scene.

Live Examples

These are real Splat Labs projects embedded right here in the docs. Click and drag to orbit, scroll to zoom.

Construction Site

Embed code for this viewer:

<iframe
  src="https://cloud.rockrobotic.com/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

Niseko Village — Snowy Ski Resort

Embed code for this viewer:

<iframe
  src="https://cloud.rockrobotic.com/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

Customization Options

Responsive Embed (16:9 Aspect Ratio)

Wrap the iframe in a container to maintain a consistent aspect ratio on any screen size:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

This aspect-ratio box technique is the same one used for responsive YouTube and Google Maps embeds.

Full-Width Embed

Break the viewer out of a content column and span the full browser width:

<div style="position: relative; width: 100vw; left: 50%; margin-left: -50vw;">
  <iframe
    src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

Loading Behavior

Platform Guides

WordPress

Block Editor (Gutenberg):

1. Click the + block inserter and search for Custom HTML
2. Add the Custom HTML block to your page
3. Paste the iframe embed code
4. Click Preview to confirm, then publish

Classic Editor:

1. Switch to the Text tab (not Visual)
2. Paste the iframe code where you want it
3. Switch back to Visual to preview, then publish

Page builders (Elementor, Divi, Beaver Builder):

Drop an HTML or Code block onto your page and paste the iframe code.

Squarespace

1. Open the page editor
2. Click an insert point or Add Block
3. Select Code from the block menu
4. Paste the iframe embed code
5. Click outside the block to save

Use the Code Block, not the Embed Block. Since Splat Labs is not an oEmbed provider, the Embed Block will not recognize the URL.

Webflow

1. Open the Webflow Designer
2. Open the Add panel (+) on the left sidebar
3. Drag an Embed element (under Components) onto the canvas
4. Paste the iframe code in the code editor
5. Click Save & Close

The iframe previews live on the Webflow canvas. Available on all Workspace and Site plans.

CMS Collection pages: Store the viewer URL in a CMS text field and reference it dynamically inside an Embed element using Webflow's field binding.

Wix

Wix Editor:

1. Click + (Add) → Embed Code → Embed HTML
2. Drag the element to your preferred position
3. Click the element → Enter Code
4. Select Code, paste the iframe, and click Update

Alternative — URL method:

1. Add an Embed element
2. Select Website Address instead of Code
3. Paste the viewer URL directly

Notion

Notion does not accept raw HTML. Use the Embed block with the viewer URL instead:

1. Type /embed on a new line
2. Paste the viewer URL (not the iframe code):

   https://cloud.rockrobotic.com/viewer/{project-id}?view=splat

3. Click Embed link

Resize the embed by dragging the side handles.

Zillow / MLS Listings

Zillow and MLS platforms use a Virtual Tour URL field — you paste the URL, not iframe code.

Zillow:

1. Log in to your agent account → Listings dashboard
2. Select the property → Edit listing
3. Find the Virtual Tour URL field (below the Photos section)
4. Paste the viewer URL
5. Click Update

MLS (Flexmls, Matrix, Bright MLS, etc.):

Paste the viewer URL into the Virtual Tour URL field. The tour link syndicates automatically to Zillow, Trulia, Realtor.com, Redfin, and other portals.

GitHub Pages

Paste the iframe directly into your HTML or Markdown files. Jekyll's Kramdown renderer supports inline HTML in .md files.

<iframe
  src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

README workaround — linked screenshot:

[![3D Scan Preview](screenshot.png)](https://cloud.rockrobotic.com/viewer/{project-id}?view=splat)

React / Next.js

Use the iframe in JSX with camelCase attribute names:

export default function SplatViewer({ projectId }) {
  return (
    <iframe
      src={`https://cloud.rockrobotic.com/viewer/${projectId}?view=splat`}
      width="100%"
      height="600"
      frameBorder="0"
      allowFullScreen
      loading="eager"
      style={{ border: 'none' }}
    />
  );
}

JSX differences from HTML:

Responsive wrapper:

export default function ResponsiveSplatViewer({ projectId }) {
  return (
    <div style={{
      position: 'relative',
      paddingBottom: '56.25%',
      height: 0,
      overflow: 'hidden'
    }}>
      <iframe
        src={`https://cloud.rockrobotic.com/viewer/${projectId}?view=splat`}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          border: 'none'
        }}
        allowFullScreen
        loading="eager"
      />
    </div>
  );
}

Shopify

In a page or blog post:

1. Open the page in the Shopify admin
2. Click the Show HTML button to switch to HTML view
3. Paste the iframe code
4. Switch back to visual editor and save

Custom Liquid section (Online Store 2.0):

1. Go to Online Store → Themes → Customize
2. Add a Custom Liquid section
3. Paste the iframe code
4. Save

Hugo / Astro / Other Static Site Generators

Hugo: Enable inline HTML in your config, then paste the iframe directly into Markdown files:

[markup.goldmark.renderer]
  unsafe = true

Astro: Paste the iframe directly into any .astro component or Markdown file — Astro supports raw HTML in Markdown by default.

Gatsby: Use the iframe in React components, same as the React / Next.js guide above.

Troubleshooting

Embed shows a blank space

The most common cause is mixed-content blocking — an HTTP page loading an HTTPS iframe (or vice versa). Splat Labs Cloud always uses HTTPS, so make sure your website does too.

Embed does not load in the editor

Some platforms (Squarespace, Wix) hide iframe content while you are logged in as an editor. View your published page in an incognito window to verify.

Embed is cut off or too small

Adjust the height attribute in your iframe code. 500–700 pixels works well for most layouts. For a responsive approach, use the aspect-ratio container technique described above.

Embed is blocked by Content Security Policy

If your website has a strict Content-Security-Policy header, add https://cloud.rockrobotic.com to your frame-src directive:

Content-Security-Policy: frame-src https://cloud.rockrobotic.com;

Branding & Plans

See Pricing for plan details.

Next Steps

• Sharing Projects — Share links and privacy settings
• Portals — Connect multiple scenes into walkthroughs
• Read our full Embedding Tutorial on the blog for even more detail