Embed guide

1. Quick start (any website)

Paste into your product page template.

<!-- 1. Load the viewer once per page (in <head> or before </body>) -->
<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>

<!-- 2. Place the viewer where the product images go -->
<model-viewer
  src="https://YOUR-MODEL-URL/product.glb"
  ios-src="https://YOUR-MODEL-URL/product.usdz"
  alt="3D model of Oak dining table"
  ar
  ar-modes="webxr scene-viewer quick-look"
  ar-scale="fixed"
  ar-placement="floor"
  camera-controls
  touch-action="pan-y"
  shadow-intensity="1"
  style="width:100%; height:480px;">
  <button slot="ar-button">View in your room</button>
</model-viewer>

• ar-scale="fixed" keeps AR at the size the model was built (pinch-to-resize off).
• ios-src is the iPhone USDZ file.

2. Finish / colour buttons

Switching happens in 3D; AR opens the selected finish.

<!-- Optional: finish buttons (models with several finishes) -->
<div class="finishes">
  <button data-variant="Golden Oak">Golden Oak</button>
  <button data-variant="Gunstock">Gunstock</button>
</div>
<script>
  const viewer = document.querySelector('model-viewer');
  document.querySelectorAll('[data-variant]').forEach((b) =>
    b.addEventListener('click', () => { viewer.variantName = b.dataset.variant; }));
</script>

3. Shopify

1. In Shopify admin, go to Online Store → Themes → … → Edit code.
2. Open your product template section (for example main-product.liquid) and paste the snippet where the media gallery is.
3. To use a different model per product, store the GLB URL in a product metafield (for example custom.model_glb) and use {{ product.metafields.custom.model_glb }} as the src.
4. Save, open a product on your phone, and tap View in your room.

4. WooCommerce / WordPress

1. Add a Custom HTML block (or your page builder’s HTML widget) to the product description or a product tab.
2. Paste the snippet and replace the URLs with the ones we send for that product.
3. If your theme strips <script> tags, load the viewer script once with a header/footer scripts plugin.

5. Iframe (page builders, marketplaces) Coming soon

Not available yet. Planned format for sites that can’t run scripts (the link doesn’t exist yet):

<iframe src="https://YOUR-VIEWER-LINK" title="3D view"
  style="width:100%;height:480px;border:0" allow="xr-spatial-tracking; fullscreen"></iframe>

Until then, use the snippet above, or contact us and we’ll look at it with you.

6. Links & QR codes Coming soon

Not available yet. Shareable links and QR codes for showroom tags and catalogues are on the roadmap.

7. Analytics Coming soon

Not available yet. Until then, track AR-button clicks in your own analytics.

Troubleshooting

Need a hand? Contact us and we’ll embed it for you.