Docs
Account

Embed a scene

Learn how to place a shared Blurry scene on a website, site builder, Notion page, or document tool that supports embeds.

Blurry embeds scenes via an iframe.

Before you embed

Your scene needs an active share link before another page can display it.

Follow Share a scene first if the scene is not shared yet. Once sharing is enabled, you can copy the embedding script with the copy button.

Add the embed code to a website

Paste the iframe code into the part of your site that accepts custom HTML.

The generated code includes the shared scene URL, embed=true, a title, and inline sizing styles.

Configure advanced embedding settings

The Advanced options controls change the iframe code that Blurry generates.

These settings do not change the scene itself:

  • Full width: sets width: 100% so the iframe fills the available horizontal space
  • Full height: sets height: 100% so the iframe follows the height of its parent container
  • Square aspect ratio: sets aspect-ratio: 1 and height: auto for square layouts
  • Min-height (px): adds a minimum height, such as min-height: 400px
  • Capture scroll only on focus: adds scroll-capture=focus so the page scrolls normally until someone clicks or taps the viewer

Keep Capture scroll only on focus on for pages that continue above or below the viewer. This prevents the embedded scene from taking over scroll gestures while a visitor scrolls the page.

Turn it off only when the viewer occupies a focused, full-screen, or app-like area where scroll-to-zoom should respond immediately.

Embed in site builders and document tools

Use the iframe code when the destination supports custom HTML. Use the share link when the destination only accepts a web address.

Blurry embeds work in places that support iframe or web embeds:

  • Custom websites and web apps: paste the iframe into your HTML, React component, content management system template, or page builder
  • Site builders: use a custom embed or custom HTML block in tools such as Framer, Wix, Webflow, WordPress, or Squarespace
  • Document tools: paste the shared scene link or iframe into tools such as Notion or Coda, depending on what the tool accepts
  • Client portals and internal tools: add the iframe anywhere your portal allows embedded web content

Some platforms block iframes or strip custom HTML for security. If the viewer does not appear, paste the shared scene link into the platform's embed block, or link to the Blurry scene instead.

Embed in Notion

Use the shared scene link in Notion instead of the iframe code.

To embed a scene in Notion:

  1. Copy the shared scene link from Blurry
  2. Paste the link into a Notion page
  3. Choose Embed
  4. Resize the embedded block as needed

Troubleshoot embeds

Start with the iframe, the shared URL, and the parent container when an embed does not look right.

  • The viewer is blank: confirm sharing is enabled and the scene has finished processing
  • The iframe has no height: give the iframe or its parent container a height, minimum height, or aspect ratio
  • The page cannot scroll past the scene: enable Capture scroll only on focus
  • The destination removes the iframe: use the share link or a platform-specific embed block instead of custom HTML
  • The scene opens in Blurry instead of inline: check that the iframe src includes embed=true