Todas las plataformas / Guía
Modelo 3D y AR en Webflow
En Webflow usas el elemento Code Embed. En la plantilla de producto (Ecommerce o CMS) puedes tomar el ID del modelo de un campo, para que cada producto muestre su modelo.
- Plugin / app
- No hace falta
- Dónde pegas el código
- Add → Code Embed
- AR en el móvil
- Sí, Android y iPhone
Opción 1: Code Embed en una página
Para una página concreta. El código personalizado requiere un plan de pago de Webflow (de sitio o de workspace).
Paso 1
Copia el código de 3DView
Entra en tu cuenta, ve a «Mis modelos» y, en el modelo, pulsa «Código para tu web»: el código se copia al instante. Las pestañas Shopify, WooCommerce y «Cualquier web» solo indican dónde pegarlo; el código es el mismo.
Copia el código de 3DView Paso 2
Añade el elemento Code Embed
En el Designer abre el panel Add (A) y arrastra «Code Embed» a la página.
Añade el elemento Code Embed Paso 3
Pega el código
Pega el código en la ventana de código y pulsa «Save & Close».
Pega el código Paso 4
Publica
Pulsa Publish y comprueba la web publicada (en el Designer no ves el modelo).
Publica
Opción 2: La plantilla de producto, con un campo CMS
Un solo Code Embed en la plantilla; cada producto muestra su modelo.
Paso 1
Copia el código de 3DView
Entra en tu cuenta, ve a «Mis modelos» y, en el modelo, pulsa «Código para tu web»: el código se copia al instante. Las pestañas Shopify, WooCommerce y «Cualquier web» solo indican dónde pegarlo; el código es el mismo.
Copia el código de 3DView Paso 2
Añade un campo
En la colección Products (o tu colección CMS) añade un campo Plain text llamado «Model 3D ID».
Paso 3
Rellena el ID
El ID del modelo es la parte después de /embed/ en el código copiado. Ponlo en el campo de cada producto.
Paso 4
Pon el Code Embed en la plantilla
En la plantilla Product (Template) añade un Code Embed, pega el código de abajo y sustituye [Model 3D ID] por tu campo desde «+ 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>
El código que pegas
Así es el código copiado de 3DView (en el tuyo aparece el ID del modelo en lugar de MODEL_ID). Puedes cambiar la altura (height:480px); el resto déjalo igual. Añade ?controls=0 después del ID para ocultar la barra de ajustes bajo el modelo.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Sofá Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
Cómo comprobar que funciona
- En el ordenador: el modelo se carga, gira con el ratón y el botón «Ver en el móvil» muestra un código QR para AR.
- En Android (Chrome): pulsa el botón AR en la esquina del modelo. Se abre el visor AR de Google y colocas el producto en la habitación, a tamaño real. El móvil debe ser compatible con ARCore.
- En iPhone/iPad (Safari): pulsa el botón AR. Se abre AR Quick Look, sin ninguna app.
- Prueba desde Safari o Chrome, no desde el navegador interno de Facebook/Instagram: ahí AR no arranca.
Problemas frecuentes y soluciones
No puedo añadir Code Embed
En el plan gratuito de Webflow, el código personalizado no se publica. Necesitas un plan de sitio de pago o un workspace de pago.
El código desaparece o se convierte en texto al guardar
El editor lo ha limpiado: pega el código en el modo HTML / código fuente, no en el modo visual (los pasos de arriba indican el botón exacto). Si sigue desapareciendo, la plataforma no admite iframes: usa el enlace y el código QR de «Compartir / QR».
El modelo es demasiado pequeño o aparece cortado
Aumenta la altura en el código: height:480px pasa, por ejemplo, a height:600px. El ancho (100%) se adapta solo a la columna. En el móvil suelen bastar 400–500px.
El botón AR no aparece o no arranca en iPhone
AR en iPhone requiere Safari (o Chrome en iOS) y un iPhone/iPad con iOS 12 o posterior. 3DView prepara automáticamente la versión para iPhone (USDZ). Abre directamente el enlace del modelo (el botón «Ver en AR» de tu cuenta): si ahí funciona, tu plataforma bloquea AR en los marcos incrustados; pon bajo el modelo un enlace «Ver en AR» a ese enlace.
El navegador avisa de «contenido no seguro» o el modelo no se carga
No cambies la dirección del código a http://. En una web https, los navegadores bloquean los marcos http (contenido mixto). Deja la dirección tal cual: https://www.3dview.ai/embed/…
Aparece el logo de 3DView en el modelo
Lo quitas por modelo, desde tu cuenta: «Quitar logo», un único pago en créditos. El código sigue siendo el mismo.
¿Hace más lenta la página?
No: el código lleva loading="lazy", así que el modelo solo se carga cuando llega a la pantalla. El alojamiento está incluido, sin suscripción.
Ilustraciones simplificadas, no capturas de pantalla; los menús pueden verse algo distintos en tu versión.
Preguntas frecuentes
¿Necesito una app de Webflow?
No. Code Embed viene incluido en Webflow.
¿Puedo usar la opción con script?
Sí: pones el script /embed.js una sola vez en Site settings → Custom code y luego <view3d-model> en un Code Embed. El iframe basta para la mayoría de las webs.
¿Aún no tienes un modelo 3D?
Escanea el producto con el móvil o parte de una foto. Recibes el código para tu web, el enlace con QR y AR incluidos.
Crea tu primer modelo