Embed the 3D viewer and augmented reality on a web page (iframe)

By the Visuality team · Published on October 22, 2024 · Updated on October 15, 2026 · 3 min read

---

In short

To embed the Visuality 3D viewer on a page, copy the iframe code provided in “View / Share” and paste it into an HTML block. Your visitors rotate the model and launch augmented reality on their smartphone, with no app to install.

In this example, the 3D viewer is embedded in the product page: customers can view it in 3D or in augmented reality.

Prerequisites

• A Visuality account with an active subscription or an ongoing trial.
• A 3D object uploaded to the 3D Object Library, in GLB or USDZ format.
• A website or CMS that accepts an HTML block or an iframe (WordPress, Wix, Webflow, Squarespace…).

---

Steps

1. In the 3D Object Library, click the object's “View / Share” button.
2. In the “Direct integration on your website (IFrame)” section, click “Copy to clipboard”.
3. On your page, add an HTML (or “embed”) block where you want the viewer and paste the code.
4. Publish the page, then test it on a smartphone by launching augmented reality.

The copied code looks like this; the ID at the end of the address is unique to each object:

<iframe src='https://visuality.fr/en/viewer/object/YOUR-ID'></iframe>

For a responsive, lazy-loaded and accessible viewer, add these attributes:

<iframe src="https://visuality.fr/en/viewer/object/YOUR-ID"
        title="Product 3D viewer"
        width="100%" height="500"
        style="border: 0;"
        loading="lazy"
        allow="xr-spatial-tracking; fullscreen"
        allowfullscreen></iframe>

---

Good to know

• Augmented reality launches on smartphones and tablets, with Safari, Chrome or Edge; on desktop, the viewer stays in 3D.
• Object groups also have their own iframe code: the viewer shows their models through a selector, one object at a time. To display several objects at once in augmented reality, use the Android app.
• A lighter model loads faster: limit the size of the GLB file and of its textures.
• If your license becomes inactive, access links and the embedded viewer are disabled until it is reactivated.

You also have other sharing options, such as a QR code or even a direct access link to your object.

To compare all the embedding methods: 3D viewer for websites · Shopify app · QR code on a product page

---

Frequently asked questions

How do I make the iframe responsive?

Replace the fixed width with width=100%, and keep a fixed height of about 500 pixels. The viewer then fills the full width of its container, on desktop and mobile alike, without distorting the 3D model.

Does augmented reality work from inside the iframe?

Yes, on smartphones and tablets: the augmented reality button opens AR Quick Look on iPhone and iPad, and Scene Viewer or WebXR on Android. Add the allow attribute with xr-spatial-tracking to enable WebXR mode.

Does the code change if I edit my object?

No. The viewer address stays the same when you change the object's scale, background or 3D file. Changes appear automatically on every page where the code is embedded.

Any questions? Feel free to contact us by email at contact@visuality.fr or by phone at 05 35 54 20 41!

---

Related articles