Quick start
Install with two lines
Publish a model, add your website in Cadloom, and copy its viewer URL. Never use the private model-file URL.
<script type="module" src="https://YOUR-CADLOOM-DOMAIN/sdk/cadloom-embed-v1.js"></script>
<cadloom-viewer
src="YOUR_PUBLISHED_VIEWER_URL"
title="Interactive 3D product viewer"
height="min(72vh, 720px)">
</cadloom-viewer>Responsive by default
The component fills its container. Use the height attribute when your design needs a fixed or fluid height.
Website platforms
Use the same viewer everywhere
React and Next.js
// app/components/ProductViewer.tsx
"use client";
import Script from "next/script";
export function ProductViewer({ viewerUrl }: { viewerUrl: string }) {
return <>
<Script type="module" src="https://YOUR-CADLOOM-DOMAIN/sdk/cadloom-embed-v1.js" />
<cadloom-viewer src={viewerUrl} title="Interactive 3D product viewer" />
</>;
}WordPress and WooCommerce
<!-- Add a Custom HTML block to the product or page. -->
<script type="module" src="https://YOUR-CADLOOM-DOMAIN/sdk/cadloom-embed-v1.js"></script>
<cadloom-viewer src="YOUR_PUBLISHED_VIEWER_URL" title="Interactive 3D product viewer"></cadloom-viewer>Wix
<!-- Settings → Advanced → Custom code, then add to the body. -->
<script type="module" src="https://YOUR-CADLOOM-DOMAIN/sdk/cadloom-embed-v1.js"></script>
<!-- In an Embed HTML element: -->
<cadloom-viewer src="YOUR_PUBLISHED_VIEWER_URL" title="Interactive 3D product viewer"></cadloom-viewer>JavaScript API
Listen and control
The element emits cadloom-ready, cadloom-activated, cadloom-loaded, and cadloom-error. Commands are scoped to the Cadloom iframe.
const viewer = document.querySelector("cadloom-viewer");
viewer.addEventListener("cadloom-loaded", () => console.log("3D is ready"));
viewer.addEventListener("cadloom-error", (event) => console.error(event.detail.message));
viewer.activate();
viewer.fit();
viewer.view("front");
viewer.fullscreen();Security
Allow the viewer on your site
Add every production and preview origin under Websites in Cadloom. The iframe must include allow="fullscreen; xr-spatial-tracking". If you use a Content Security Policy, allow the Cadloom delivery origin in frame-src and script-src.
Content-Security-Policy:
frame-src 'self' https://YOUR-CADLOOM-DOMAIN;
script-src 'self' https://YOUR-CADLOOM-DOMAIN;Troubleshooting
Common checks
- Confirm the model is published, not only saved.
- Confirm the exact site origin is active under Websites.
- Give the viewer container a visible height.
- Allow third-party frames and fullscreen in your page policy.
- Use HTTPS for mobile AR and production websites.