Intégrer la visionneuse 3D et la réalité augmentée sur une page web (iframe)

Par l'équipe Visuality · Publié le 22/10/2024 · Mis à jour le 15/10/2026 · 3 min de lecture

---

En bref

Pour intégrer la visionneuse 3D de Visuality sur une page, copiez le code iframe proposé dans « Visualiser / Partager » et collez-le dans un bloc HTML. Vos visiteurs font pivoter le modèle et lancent la réalité augmentée sur leur smartphone, sans application à installer.

Dans cet exemple, la visionneuse 3D est intégrée à la fiche du produit : le client peut l'afficher en 3D ou en réalité augmentée.

Prérequis

• Un compte Visuality avec un abonnement actif ou un essai en cours.
• Un objet 3D importé dans la Librairie d'objets 3D, au format GLB ou USDZ.
• Un site ou un CMS qui accepte un bloc HTML ou une iframe (WordPress, Wix, Webflow, Squarespace…).

---

Étapes

1. Dans la Librairie d'objets 3D, cliquez sur le bouton « Visualiser / Partager » de l'objet.
2. Dans la rubrique « Intégration directe sur votre site (Iframe) », cliquez sur « Copier dans le presse-papier ».
3. Dans votre page, ajoutez un bloc HTML (ou « embed ») à l'endroit voulu et collez le code.
4. Publiez la page, puis testez-la sur un smartphone en lançant la réalité augmentée.

Le code copié ressemble à ceci ; l'identifiant à la fin de l'adresse est propre à chaque objet :

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

Pour une visionneuse responsive, chargée en différé et accessible, ajoutez ces attributs :

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

---

Bon à savoir

• La réalité augmentée se lance sur smartphone et tablette, avec Safari, Chrome ou Edge ; sur ordinateur, la visionneuse reste en 3D.
• Les groupes d'objets disposent aussi de leur propre code iframe : la visionneuse présente leurs modèles via un sélecteur, un objet à la fois. Pour afficher plusieurs objets simultanément en réalité augmentée, utilisez l'application Android.
• Un modèle léger se charge plus vite : limitez le poids du fichier GLB et la taille de ses textures.
• Si votre licence devient inactive, les liens d'accès et la visionneuse intégrée sont désactivés jusqu'à sa réactivation.

Vous disposez également d'autres moyens de partage comme un QR code ou même un lien d'accès direct à votre objet.

Pour comparer toutes les méthodes d'intégration : visionneuse 3D pour site web · application Shopify · QR code sur une fiche produit

---

Questions fréquentes

Comment rendre l'iframe responsive ?

Remplacez la largeur fixe par width=100%, et gardez une hauteur fixe d'environ 500 pixels. La visionneuse occupe alors toute la largeur de son conteneur, sur ordinateur comme sur mobile, sans déformer le modèle 3D.

La réalité augmentée fonctionne-t-elle depuis l'iframe ?

Oui, sur smartphone et tablette : le bouton de réalité augmentée ouvre AR Quick Look sur iPhone et iPad, et Scene Viewer ou WebXR sur Android. Ajoutez l'attribut allow avec xr-spatial-tracking pour autoriser le mode WebXR.

Le code change-t-il si je modifie mon objet ?

Non. L'adresse de la visionneuse reste la même lorsque vous modifiez l'échelle, le fond ou le fichier 3D de l'objet. Les modifications apparaissent automatiquement sur toutes les pages où le code est intégré.

Des questions ? N'hésitez-pas à nous contacter par mail sur contact@visuality.fr ou par téléphone au 05 35 54 20 41 !

---

Articles liés