Embed 3D Models in Squarespace — No Plugin Required

Why Squarespace Makes 3D Embedding Tricky

If you've ever tried to add custom functionality to a Squarespace site, you know the frustration. Unlike WordPress, Squarespace has no plugin ecosystem. There's no app store where you can install a 3D viewer with one click. Every piece of custom functionality needs to go through either the Code Block element, the Code Injection panel, or a third-party embed.

This is actually a deliberate design choice by Squarespace. By restricting arbitrary code execution, they keep sites faster and more secure. But it means that when you need something outside their built-in feature set — like an interactive 3D model viewer — you need to get a little creative.

The good news is that Squarespace does give you enough flexibility to embed 3D models. You have two reliable approaches: the iframe method and the web component method. Both work on every Squarespace template, including the newer Fluid Engine layouts. Neither requires a paid Squarespace plan beyond the basic Personal tier, though you will need at least that tier to use Code Blocks.

Method 1: The Iframe Approach

The simplest way to get a 3D model onto your Squarespace page is with an iframe. An iframe is an HTML element that loads another webpage inside your page — think of it as a window into another site. GeometryViewer provides a hosted viewer URL for every model you upload, and you can point an iframe directly at that URL.

Step 1: Upload Your Model to GeometryViewer

Go to geometryviewer.com and upload your 3D file. We support GLB, GLTF, STL, OBJ, 3MF, and STEP formats. Once your model is uploaded, you'll get a viewer URL that looks something like https://geometryviewer.com/v/abc123. Copy this URL — you'll need it in the next step.

Step 2: Add a Code Block in Squarespace

Open the Squarespace Editor and navigate to the page where you want the 3D model. Click the insertion point where you want the viewer to appear, then select Code from the block menu. If you're using the classic editor, click an insert point and choose "Code" from the block options. In the Fluid Engine editor, drag a Code block from the panel on the left.

Step 3: Paste the Iframe Code

In the Code Block, make sure the "Display Source" toggle is turned off. Then paste the following HTML, replacing the URL with your own viewer link:

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

Click "Apply" or save the block. The 3D viewer will now appear on your page. Visitors can rotate, zoom, and pan the model directly in the embed.

Step 4: Adjust Sizing

The width="100%" attribute makes the viewer fill the available column width, which works well on most Squarespace layouts. The height="500" sets a fixed pixel height. You may want to adjust this depending on your model's proportions. For tall models like figurines, try height="600". For flat models like floor plans, height="350" may work better.

If you want the viewer to maintain an aspect ratio on different screen sizes, you can wrap it in a responsive container. Replace the code above with this:

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://geometryviewer.com/v/abc123"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
    allow="xr-spatial-tracking"
  ></iframe>
</div>

The padding-bottom: 56.25% gives you a 16:9 aspect ratio. For a square viewer, use padding-bottom: 100%. For 4:3, use padding-bottom: 75%.

Method 2: The Web Component Approach

If you want more control over the viewer — custom backgrounds, lighting, camera angles, or autoplay rotation — you can use the GeometryViewer web component instead. A web component is a custom HTML element that behaves like a native browser element. No framework required, no JavaScript knowledge needed.

Step 1: Add the Script to Code Injection

In Squarespace, go to Settings > Advanced > Code Injection. In the "Header" field, paste this single line:

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

Click Save. This loads the GeometryViewer component library on every page of your site. The script is under 20 KB gzipped and loads asynchronously, so it won't affect your page speed.

Step 2: Use the Component in a Code Block

Now, wherever you want a 3D model, add a Code Block and paste:

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

The web component gives you attributes like auto-rotate for slow spinning, camera-controls for mouse interaction, and more. Check our embed documentation for the full list of available attributes.

Which Method Should You Choose?

For most Squarespace users, the iframe method is the way to go. It's simpler, self-contained, and doesn't require touching Code Injection settings. Each Code Block is independent — you can add or remove 3D viewers without worrying about breaking anything else on the site.

Choose the web component method if you need to embed multiple models across many pages and want consistent configuration, or if you need advanced features like custom lighting, environment maps, or AR activation buttons. The one-time Code Injection setup pays off when you're embedding 3D viewers on ten or more pages.

Tips for the Best Experience

• Optimize your models. Large files mean slow loads. Keep GLB files under 10 MB for the best experience. Use tools like gltf-transform or Blender's Draco compression to reduce file size without visible quality loss.
• Test on mobile. Squarespace templates are responsive, but your embedded viewer needs to be responsive too. Always check how the viewer looks on a phone. The 16:9 responsive wrapper above handles this well.
• Use GLB format when possible. GLB is the most efficient format for web delivery. If your source file is an STL or OBJ, GeometryViewer handles the conversion automatically, but uploading a GLB directly gives you the fastest load times.
• Add a fallback. For visitors on very old browsers that don't support WebGL, consider adding a static image above or below the embed as a fallback.
• Mind the fold. Placing a 3D viewer above the fold (the visible area before scrolling) creates an immediate visual impact, but it also means the viewer competes with your page load. Below the fold is safer for performance.

Common Issues and Fixes

The Code Block shows raw HTML instead of the viewer

Make sure the "Display Source" toggle is off. When it's on, Squarespace renders your HTML as visible text instead of executing it. This is the most common mistake.

The viewer doesn't appear in the editor preview

Squarespace's editor sometimes doesn't render iframes or custom elements in the live preview. Save your changes and view the published page — the viewer should appear there. You can also use the "Preview" button in the top-left corner of the editor.

The viewer is cut off or has scrollbars

This usually means the height is too small for the model. Increase the height value, or switch to the responsive aspect-ratio wrapper. Also check that no parent element in Squarespace is applying an overflow: hidden that clips the viewer.

The model loads slowly

Reduce your model's file size. For STL files, decimate the mesh in your CAD tool. For GLB files, enable Draco mesh compression. GeometryViewer uses progressive loading and caching, but the initial download still depends on file size.