3DView.ai
Créer

Toutes les plateformes / Guide

Modèle 3D et AR sur Webflow

Sur Webflow, vous utilisez l'élément Code Embed. Dans le modèle de produit (Ecommerce ou CMS), vous pouvez prendre l'ID du modèle dans un champ, pour que chaque produit affiche son modèle.

Plugin / application
Pas nécessaire
Où coller le code
Add → Code Embed
AR sur mobile
Oui, Android et iPhone

Option 1: Code Embed sur une page

Pour une page précise. Le code personnalisé nécessite une offre Webflow payante (site ou workspace).

  1. Étape 1

    Copiez le code depuis 3DView

    Connectez-vous, allez dans « Mes modèles » et, sur le modèle, cliquez sur « Code pour le site » : le code est copié aussitôt. Les onglets Shopify, WooCommerce et « Tout site » indiquent seulement où le coller ; le code est le même.

    Copiez le code depuis 3DView

  2. Étape 2

    Ajoutez l'élément Code Embed

    Dans le Designer, ouvrez le panneau Add (A) et faites glisser « Code Embed » sur la page.

    Ajoutez l'élément Code Embed

  3. Étape 3

    Collez le code

    Collez le code dans la fenêtre de code et cliquez sur « Save & Close ».

    Collez le code

  4. Étape 4

    Publiez

    Cliquez sur Publish et vérifiez le site publié (le modèle n'est pas visible dans le Designer).

    Publiez

Option 2: Le modèle de produit, avec un champ CMS

Un seul Code Embed dans le modèle ; chaque produit affiche son propre modèle 3D.

  1. Étape 1

    Copiez le code depuis 3DView

    Connectez-vous, allez dans « Mes modèles » et, sur le modèle, cliquez sur « Code pour le site » : le code est copié aussitôt. Les onglets Shopify, WooCommerce et « Tout site » indiquent seulement où le coller ; le code est le même.

    Copiez le code depuis 3DView

  2. Étape 2

    Ajoutez un champ

    Dans la collection Products (ou votre collection CMS), ajoutez un champ Plain text nommé « Model 3D ID ».

  3. Étape 3

    Renseignez l'ID

    L'ID du modèle est la partie après /embed/ dans le code copié. Saisissez-le dans le champ de chaque produit.

  4. Étape 4

    Placez Code Embed dans le modèle

    Dans le modèle Product (Template), ajoutez Code Embed, collez le code ci-dessous et remplacez [Model 3D ID] par votre champ via « + Add Field ».

<iframe src="https://www.3dview.ai/embed/[Model 3D ID]" title="[Name]" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>

Le code à coller

Voici le code copié depuis 3DView (chez vous, l'ID du modèle remplace MODEL_ID). Vous pouvez changer la hauteur (height:480px) ; ne modifiez pas le reste. Ajoutez ?controls=0 après l'ID pour masquer la barre de réglages sous le modèle.

<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Canapé Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>

Comment vérifier que ça fonctionne

  • Sur ordinateur : le modèle se charge, tourne à la souris, et le bouton « Voir sur le téléphone » affiche un code QR pour l'AR.
  • Sur Android (Chrome) : touchez le bouton AR dans le coin du modèle. La visionneuse AR de Google s'ouvre et vous placez le produit dans la pièce, en taille réelle. Le téléphone doit être compatible ARCore.
  • Sur iPhone/iPad (Safari) : touchez le bouton AR. AR Quick Look s'ouvre, sans aucune application.
  • Testez depuis Safari ou Chrome, pas depuis le navigateur intégré de Facebook/Instagram : l'AR n'y démarre pas.

Problèmes fréquents et solutions

Je ne peux pas ajouter de Code Embed

Avec l'offre gratuite de Webflow, le code personnalisé n'est pas publié. Il vous faut une offre de site payante ou un workspace payant.

Le code disparaît ou devient du texte après l'enregistrement

L'éditeur l'a nettoyé : collez le code en mode HTML / code source, pas en mode visuel (les étapes ci-dessus indiquent le bouton exact). S'il disparaît encore, la plateforme n'autorise pas les iframes : utilisez le lien et le code QR de « Partager / QR ».

Le modèle est trop petit ou coupé

Augmentez la hauteur dans le code : height:480px devient par exemple height:600px. La largeur (100 %) s'adapte toute seule à la colonne. Sur mobile, 400–500px suffisent en général.

Le bouton AR n'apparaît pas ou ne démarre pas sur iPhone

L'AR sur iPhone demande Safari (ou Chrome sur iOS) et un iPhone/iPad sous iOS 12 ou plus récent. 3DView prépare automatiquement la version iPhone (USDZ). Ouvrez directement le lien du modèle (bouton « Voir en AR » dans votre compte) : si ça marche là, votre plateforme bloque l'AR dans les cadres intégrés ; ajoutez sous le modèle un lien « Voir en AR » vers ce lien.

Le navigateur signale un « contenu non sécurisé » ou le modèle ne se charge pas

Ne remplacez pas l'adresse du code par http://. Sur un site https, les navigateurs bloquent les cadres http (contenu mixte). Laissez l'adresse telle quelle : https://www.3dview.ai/embed/…

Le logo 3DView apparaît sur le modèle

Vous le retirez par modèle, depuis votre compte : « Retirer le logo », un paiement unique en crédits. Le code reste le même.

Est-ce que ça ralentit la page ?

Non : le code contient loading="lazy", le modèle ne se charge donc que lorsqu'il arrive à l'écran. L'hébergement est inclus, sans abonnement.

Illustrations simplifiées, pas des captures d'écran ; les menus peuvent être un peu différents dans votre version.

Questions fréquentes

Ai-je besoin d'une application Webflow ?

Non. Code Embed est inclus dans Webflow.

Puis-je utiliser l'option avec script ?

Oui : ajoutez le script /embed.js une seule fois dans Site settings → Custom code, puis <view3d-model> dans Code Embed. L'iframe suffit pour la plupart des sites.

Vous n'avez pas encore de modèle 3D ?

Scannez le produit avec votre téléphone ou partez d'une photo. Code pour le site, lien avec QR et AR inclus.

Créer votre premier modèle