3D viewer for websites: embed your 3D models and augmented reality without coding

To display a 3D model on your website without coding, upload your GLB or USDZ file to Visuality, copy the generated iframe code, then paste it into an HTML block on your page. The viewer appears instantly: rotate, zoom and an augmented reality button on iPhone and Android, with no app to install.

By the Visuality team Published on Updated on 8 min read

Create my free account See the augmented reality demo

What are the ways to embed a 3D model on a website?

Visuality hosts your 3D models and gives you several ways to display them. Choose according to your platform and your technical skills:

Ways to embed the Visuality 3D viewer
Method Best for What you do Skills required
Iframe code Any website or CMS that accepts HTML Copy and paste one line of code into the page None
Link or QR code Emails, social media, printed materials, trade shows Share the viewer URL or print its QR code None
Shopify App Shopify stores Link an object to each product, then add the block to the theme None
PrestaShop Module PrestaShop 1.7 to 8.x stores Install the free module, paste the API key, link objects to products Back-office access
REST API Custom applications and catalogs Create and list your objects programmatically, then retrieve their viewer URL Developer

How do you embed the 3D viewer with an iframe?

  1. Create your Visuality account: the free trial doesn't require a credit card.
  2. Upload your 3D model: in the 3D Object Library, click “Add an Object”, choose “I Already Have My 3D Object” and upload a GLB or USDZ file. No file yet? Choose “My Object is Not Modeled” to generate it from a photo.
  3. Adjust the object: real-world size, floor or wall placement, background image and thumbnail are all set from the object's page.
  4. Copy the code: click “View / Share”, then, in the “Direct integration on your website (IFrame)” section, click “Copy to clipboard”.
  5. Paste the code into your page: add an HTML (or “embed”) block where you want the viewer, paste the code, publish, then test the page on a smartphone.
Direct integration on your website (IFrame) section of the View / Share page, with the code to copy

The generated code fits on one line; 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 cleaner embed, we recommend adding a size, an accessible title and lazy loading:

<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>
  • width and height reserve space for the viewer and prevent the page from shifting while it loads.
  • title describes the iframe content for people using a screen reader.
  • loading, set to lazy, only loads the viewer as the visitor approaches it, which speeds up the initial page display.
  • allow enables WebXR augmented reality and full screen from inside the iframe.

The complete guide, with a demo video, is in the documentation: embed the 3D viewer on a page.

Which websites and CMSs does the viewer work with?

The iframe code works in any CMS that accepts an HTML block or an iframe. Depending on the tool, this block is called “Custom HTML”, “Embed” or “Code”:

  • WordPress: add a Custom HTML block in the editor, then paste the code.
  • Wix, Webflow, Squarespace: use the code embed element provided by the page editor.
  • Custom-built site: paste the code into the product page HTML template, next to the photos.
  • Shopify and PrestaShop: use the Shopify app or the PrestaShop module instead, which automatically display the right object on each product page.

Some entry-level website builder plans restrict custom code: if the block is not available, check the terms of your plan.

Link, QR code or iframe: which should you choose?

The iframe displays the model directly in your page. The link and the QR code open the viewer full screen: they are useful when you can't edit the page, or to move a visitor from desktop to smartphone.

  • Share link: in an email, a message or a social media post.
  • QR code: on a printed catalog, an in-store label, a trade show booth, or next to the viewer for desktop visitors.
  • QR code HTML: Visuality also provides ready-to-paste code that displays a clickable QR code on your page.

Add an augmented reality QR code to a product page

Visuality or Google's free model-viewer component?

model-viewer is an open-source web component published by Google under the Apache 2.0 license. It is free and very capable, and the Visuality viewer is in fact built on it. The difference lies in everything you have to build around it.

Comparison between model-viewer and Visuality (checked on October 15, 2026)
Criterion model-viewer (open source) Visuality
Price Free Monthly subscription
3D file hosting Up to you (server or CDN) Included, unlimited views
Setup Write the page's HTML and JavaScript Copy and paste an iframe code
USDZ file for iPhone Provided by you (ios-src attribute) or generated in the browser when augmented reality launches Generated on the server, scale baked in, heavy models lightened
QR code and share link Up to you to set up Included
3D model creation Not included AI from a photo, custom modeling on quote
Display customization Complete, through code Settings available in the interface

Choose model-viewer if you have a developer, already optimized models and want to control every detail of the display, with no subscription.

Choose Visuality if you want to publish quickly without managing hosting, the USDZ version or QR codes, or if you don't have 3D models yet.

How do you keep a page fast with a 3D model?

  • Lighten the GLB file: limit the polygon count and the texture size. A lighter model loads faster, especially on mobile.
  • Let Visuality optimize the iPhone version: the USDZ file generated for AR Quick Look caps textures at 2048 pixels and reduces very heavy models to about 200,000 triangles.
  • Load the viewer on demand: the iframe's loading attribute, set to lazy, delays loading until the visitor approaches it.
  • Reserve the space: a fixed width and height prevent layout shifts while the viewer loads.
  • Test on a real smartphone: check the loading time and augmented reality on an entry-level device, not just on desktop.

To prepare your files properly: GLB or USDZ: which 3D format for augmented reality?

Frequently asked questions

Upload the GLB file to Visuality, open “View / Share” and copy the iframe code provided. Paste it into an HTML block on your page: the model appears in an interactive 3D viewer, with augmented reality on mobile. You have no server or JavaScript to manage.

Yes, as long as the tool accepts an HTML block or an iframe: a Custom HTML block in WordPress, a code embed element in Wix, Webflow or Squarespace. Some entry-level plans restrict custom code; check the terms of your plan.

Yes, on smartphones and tablets, with Safari, Chrome or Edge: the augmented reality button opens AR Quick Look on iPhone and iPad, and Scene Viewer or WebXR on Android. On desktop, the viewer stays in 3D; add the QR code so visitors can continue on their phone.

No. Uploaded models are hosted by Visuality, with unlimited views and no per-view fee. Plans differ in the number of 3D objects you can publish and the monthly AI conversion quota.

model-viewer is a free open-source component: you host the files, write the code and manage the USDZ version for iPhone. Visuality, which is built on this component, provides all of this out of the box, plus QR codes, share links and AI 3D model generation.

Yes. Object groups bring several models together behind a single link, QR code and iframe code: visitors switch from one model to another with a selector, one object at a time. This is useful for presenting a furniture set, a showcase or a product range. Showing several objects at once in augmented reality requires the Android app.

Access links are disabled while the license is inactive, so the embedded viewer stops appearing on your website. It works again as soon as the subscription is reactivated, without you having to change the code on your pages.

Sources

  1. google/model-viewer (Apache 2.0 license) — Google, Verified on October 15, 2026
  2. model-viewer documentation (ios-src and ar-modes attributes) — Google, Verified on October 15, 2026
  3. <iframe>: loading, allow and title attributes — MDN Web Docs, Verified on October 15, 2026

Ready to get started with augmented reality?

Create your Visuality account and start viewing your products in 3D and augmented reality in minutes. Free 7-day trial, no commitment.

Further reading