Embed on your site

Publish the project first, then open Publish, choose the Embed tab and press Copy snippet. It looks like this:

<script src="https://svc.facet3d.studio/facet-viewer.js" async></script>
<facet-viewer token="YOUR_TOKEN" interaction="global"
  style="display:block;width:100%;height:600px;border-radius:12px;overflow:hidden"></facet-viewer>

Paste it wherever your site builder takes custom code. The token is your project's embed key: it is unguessable, and only the project's owner can see it.

Size and shape ​

The scene fills the element. Change width, height and border-radius in the style to fit your layout, or size it with your own CSS class. The scene picks its breakpoint from the real size of the element, so a narrow column gets the phone layout even on a desktop.

Interaction ​

The interaction attribute decides how the scene follows the cursor:

What visitors can do beyond that, orbit, zoom, move objects and drift, is set in the Publish panel's Settings and applies to the embed as well. See Publish.

On each platform ​

Webflow, Framer, Wix Studio, plain HTML ​

The same snippet works everywhere custom code is allowed.

• Webflow: add an Embed element and paste the snippet. To use several scenes on one page, you can put the <script> line once in the page's custom code instead.
• Framer: use an Embed component and paste it as HTML.
• Wix Studio: use a Custom Element.
• HTML: paste it into the page.

Notion, WordPress, Ghost, Discourse, Slack ​

Paste the scene's embed link on a line of its own, and these platforms show the scene in place of the link:

https://embed.facet3d.studio/e/YOUR_TOKEN

To make your embed link, put your token after https://embed.facet3d.studio/e/. In WordPress, paste it into a block. In Notion, choose Embed if it asks.

These platforms only allow a plain frame, so the cursor follows the scene only while it is over it. Where you can paste custom code, the snippet is the better choice.

React ​

import { useEffect } from 'react';

const SRC = 'https://svc.facet3d.studio/facet-viewer.js';

export default function FacetViewer({ token, interaction = 'global', style }) {
  useEffect(() => {
    if (!document.querySelector(`script[src="${SRC}"]`)) {
      const s = document.createElement('script');
      s.src = SRC;
      s.async = true;
      document.head.appendChild(s);
    }
  }, []);

  return (
    <facet-viewer
      token={token}
      interaction={interaction}
      style={{ display: 'block', width: '100%', height: 600, borderRadius: 12, overflow: 'hidden', ...style }}
    />
  );
}

Then use <FacetViewer token="YOUR_TOKEN" />. There is no package to install.

Next.js ​

In the App Router, make it a client component and load the script with next/script:

'use client';
import Script from 'next/script';

export default function FacetViewer({ token, interaction = 'global', style }) {
  return (
    <>
      <Script src="https://svc.facet3d.studio/facet-viewer.js" strategy="afterInteractive" />
      <facet-viewer
        token={token}
        interaction={interaction}
        style={{ display: 'block', width: '100%', height: 600, borderRadius: 12, overflow: 'hidden', ...style }}
      />
    </>
  );
}

With JavaScript ​

To place a scene from your own script:

<div id="hero3d" style="width:100%;height:600px"></div>
<script src="https://svc.facet3d.studio/facet-viewer.js"></script>
<script>
  FacetViewer.mount('#hero3d', { token: 'YOUR_TOKEN', interaction: 'global' });
</script>

Fast pages ​

• An embed loads a lighter copy of your scene, with compressed models and smaller textures, made when you publish. The share page keeps full quality.
• By default the scene starts loading only when it scrolls into view. Change this with Load 3D in the Publish panel's Settings.
• A scene that is not moving rests, so it costs almost nothing while a visitor reads the page.
• Check Perfs in the Publish panel before you publish for a quick read on how heavy the scene is.

Transparent scenes ​

Give the scene a transparent background and your page shows through behind it, so the 3D sits on your own design.

Updating ​

The embed always shows the last published version. Make changes, press Update in the Publish panel, and every page embedding the scene shows the new version without touching the snippet.

Branding ​

Embeds show a small Made with Facet mark. Radiance can turn it off with Display Facet branding in the Publish panel's Settings.