Embed 3D Models in Webflow — Custom Code Embed

Why Webflow Is Great for 3D Embeds

Webflow occupies a unique space among website builders. It gives designers the visual control of a drag-and-drop tool with the output quality of hand-written code. Clean semantic HTML, real CSS classes, and no bloated framework injected into the output. This makes Webflow one of the best platforms for embedding third-party interactive content like 3D viewers, because the generated markup doesn't fight you with unexpected styling or JavaScript conflicts.

Webflow's custom code embed element is the key to adding 3D models. Unlike some builders that sandbox custom code or strip certain HTML attributes, Webflow's embed element renders your HTML exactly as written on the published site. This means full support for iframes, custom elements, and web components with no surprises.

The one caveat is that custom code doesn't render in the Webflow Designer. You'll see a placeholder in the visual editor, and the actual 3D viewer only appears when you preview or publish the site. This is a security measure — Webflow doesn't want arbitrary scripts running inside their editor. It's a minor inconvenience, but once you know about it, you can plan your workflow accordingly.

Method 1: Iframe Embed

The fastest way to get a 3D viewer into Webflow is with an iframe pointing to a GeometryViewer URL. This method requires zero configuration and works immediately.

Step 1: Upload Your Model

Go to geometryviewer.com and upload your 3D file. GeometryViewer supports GLB, GLTF, STL, OBJ, 3MF, and STEP formats. After upload, copy the viewer URL — it will look like https://geometryviewer.com/v/abc123.

Step 2: Add an Embed Element in the Designer

Open the Webflow Designer and navigate to the page where you want the 3D model. From the Add Elements panel (the plus icon or press A), scroll down to Components or search for Embed. Drag the "Embed" element onto your canvas and drop it where you want the viewer to appear.

A code editor will open immediately. Paste this HTML:

<iframe
  src="https://geometryviewer.com/v/abc123"
  width="100%"
  height="500"
  frameborder="0"
  allow="xr-spatial-tracking"
  loading="lazy"
  style="border: none; border-radius: 12px;"
></iframe>

Click Save & Close. You'll see a grey placeholder in the Designer. Don't worry — the actual viewer appears on preview and published versions.

Step 3: Style the Container

This is where Webflow shines. Select the Embed element and use the Style panel to control its dimensions and spacing. Set the width to 100% to fill the parent container, or set a fixed width like 800px for a centered layout. Add margin, padding, or a max-width as needed.

For responsive behavior, you can use Webflow's breakpoint system. Switch to the tablet or mobile breakpoint and adjust the embed's height. On desktop, 500px height works well. On mobile, you might want 300px to keep the page scannable.

Method 2: Web Component Embed

For more control over the 3D viewer's behavior, use the GeometryViewer web component. This gives you access to attributes like auto-rotation, camera controls, custom backgrounds, and AR activation.

Step 1: Add the Script in Project Settings

Go to Project Settings > Custom Code. In the "Head Code" section, paste:

<script type="module" src="https://geometryviewer.com/embed.js"></script>

Click Save. This loads the web component library on every page. The script is small (under 20 KB gzipped) and loads asynchronously, so it won't impact your Core Web Vitals.

Step 2: Use the Component in an Embed Element

Back in the Designer, add an Embed element and paste:

<geometry-viewer
  src="https://geometryviewer.com/v/abc123"
  style="width: 100%; height: 500px; display: block; border-radius: 12px;"
  auto-rotate
  camera-controls
  ar
></geometry-viewer>

The auto-rotate attribute makes the model spin slowly when the user isn't interacting. The camera-controls attribute enables mouse and touch interaction. The ar attribute adds an AR button for mobile devices that support WebXR or AR Quick Look.

Responsive Design in Webflow

Webflow's breakpoint system is the gold standard for responsive design in visual builders, and it pairs well with embedded 3D viewers. Here's a recommended approach for making your 3D embeds look great on every screen size.

Start by wrapping your Embed element in a Div block. Give the Div a class name like "viewer-container" and set these styles:

• Desktop (base breakpoint): max-width: 800px, margin: 0 auto, height: 500px
• Tablet: max-width: 100%, height: 420px
• Mobile landscape: height: 350px
• Mobile portrait: height: 300px

Set the iframe or web component inside to width: 100% and height: 100% so it fills the container at every breakpoint. The container controls the size, and the viewer fills whatever space is available.

For aspect-ratio-based sizing, you can use the padding-bottom trick. Give the container position: relative, height: 0, and padding-bottom: 56.25% (for 16:9). Set the iframe or web component to position: absolute; top: 0; left: 0; width: 100%; height: 100%. This ensures the viewer maintains its proportions regardless of screen width.

Using 3D Viewers in Webflow CMS Collections

If you're building a portfolio, product catalog, or model library with Webflow CMS, you can dynamically embed different 3D models on each collection item page. Here's how.

In your CMS Collection, add a Plain Text field called something like "Model URL." When creating collection items, paste the GeometryViewer URL for each model into this field.

On the collection template page, you can't directly bind a CMS field to an Embed element's code. Instead, use Webflow's custom code feature in the page's before-body code to inject a script that reads the field value and creates the iframe dynamically. Alternatively, use a Link field with the viewer URL and display it as a clickable button that opens the 3D viewer in a new tab — simpler and more reliable.

For true dynamic embedding within the page, many Webflow developers use a lightweight JavaScript snippet in a global embed that reads data attributes from Div blocks. Give your CMS-bound Div block a data attribute with the model URL, and the script creates the iframe on page load. This is a few lines of JavaScript but well within what Webflow's custom code supports.

Performance and Core Web Vitals

Webflow sites tend to score well on Core Web Vitals because of the clean output code. Adding a 3D viewer can affect Largest Contentful Paint (LCP) if the viewer is above the fold and takes time to initialize. Here are some strategies to keep your metrics green.

• Use loading="lazy" on iframes. This defers loading until the user scrolls near the viewer, preventing it from blocking initial page render.
• Place the viewer below the fold. A hero section with text and a 3D viewer below creates a fast initial paint while still giving visitors an interactive experience as they scroll.
• Optimize your 3D model. Compress textures, reduce polygon count, and use GLB format for the smallest possible file transfer.
• Use Webflow's built-in image optimization for any static fallback images. If you show a thumbnail that transitions to the 3D viewer, Webflow's image CDN handles responsive sizing and WebP conversion automatically.

Common Issues

The embed shows a grey box in the Designer

This is normal. Webflow doesn't render custom code in the Designer for security reasons. Click the eye icon (Preview) or publish your site to see the actual viewer.

The viewer works on desktop but not mobile

Check that the Embed element isn't hidden on mobile breakpoints. Also verify that the container div has sufficient height on mobile. A container set to 0 height with no padding-bottom will collapse the viewer entirely.

The viewer loads but interactions feel janky

Webflow's interactions (scroll-triggered animations, hover effects) can sometimes conflict with the 3D viewer's event listeners. If you have Webflow interactions on elements near the viewer, test them carefully. The simplest fix is to ensure no Webflow interaction targets the embed or its parent container.