¿Por Qué Incrustar un Gaussian Splat 3D?
Las imágenes estáticas e incluso las fotos de 360 grados solo pueden mostrar tanto. Un Gaussian Splat incrustado le da a los visitantes de tu sitio web la capacidad de caminar por una escena 3D completamente fotorrealista — girando, haciendo zoom y explorando desde cualquier ángulo — todo sin instalar una sola aplicación.
Ya seas un agente inmobiliario mostrando un listado, una empresa de construcción compartiendo el progreso del sitio con las partes interesadas, o un estudio creativo construyendo un portafolio interactivo, incrustar un visor de Gaussian Splat convierte a los espectadores pasivos en exploradores activos.
Con Splat Labs Cloud, incrustar es tan simple como copiar una sola línea de HTML.
Cómo Funciona
Cada proyecto que subes a Splat Labs Cloud obtiene una URL de visor compartible. Esa URL puede abrirse directamente en un navegador, o envolverse en una etiqueta HTML <iframe> para incrustarse dentro de cualquier página web — tu propio sitio, un blog, un listado de Zillow, una página de MLS, un documento de Notion o un CMS como WordPress, Squarespace o Webflow.
Aquí está el proceso:
Paso 1: Abre el Diálogo de Compartir
Después de subir y procesar tu Gaussian Splat en Splat Labs Cloud, abre tu proyecto. En el lado izquierdo del visor, verás un cajón de barra lateral. En la parte inferior de esa barra lateral, haz clic en el botón Compartir.
Esto abre el diálogo de Compartir, donde puedes controlar la configuración de acceso y obtener tu código de incrustación.
El diálogo de compartir de Splat Labs. Asegúrate de que "Compartir por enlace habilitado" esté marcado, luego haz clic en el botón INCRUSTAR para obtener tu código iframe.
Paso 2: Obtén tu URL de Incrustación o Código
En el diálogo de compartir:
- Asegúrate de que "Compartir por enlace habilitado" esté marcado — esto permite que cualquier persona con el enlace vea tu proyecto.
- Haz clic en el botón INCRUSTAR para expandir la sección de incrustación.
Ahora verás dos campos:
- URL de Incrustación — La URL del visor que puedes usar directamente o pegar en plataformas como Zillow, Notion o MLS.
- Código de Incrustación — Un fragmento HTML
<iframe>listo para usar que puedes copiar y pegar directamente en tu sitio web.
Después de hacer clic en INCRUSTAR, el diálogo muestra tu URL de Incrustación y el código HTML completo de incrustación — simplemente haz clic en el ícono de copiar junto a cualquiera de los campos.
Ambos campos tienen un ícono de copiar en el lado derecho. Haz clic en él para copiar el valor al portapapeles.
Esta URL carga un visor 3D interactivo que funciona en cualquier navegador moderno — de escritorio, tableta o móvil.
Paso 3: Pega el Código de Incrustación
Toma el código de incrustación (o envuelve la URL del visor en una etiqueta HTML <iframe> estándar) y colócalo en el HTML de tu sitio web:
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Eso es todo. Tus visitantes ahora pueden explorar la escena 3D completa sin salir de tu página.
Consejo profesional: Establece
width="100%"para que el visor se extienda para llenar su contenedor en cualquier tamaño de pantalla. Ajustaheightpara adaptarse a tu diseño — 500-700 píxeles funciona bien para la mayoría de los diseños.
Ejemplos en Vivo
A continuación se presentan dos escenas de Gaussian Splat alojadas en Splat Labs Cloud. Interactúa con ellas aquí mismo — haz clic y arrastra para orbitar, desplázate para hacer zoom y explora cada ángulo. Estas incrustaciones son de uso gratuito en tu propio sitio web. Siéntete libre de copiar el código de incrustación debajo de cada visor y pegarlo en tu sitio. El visor compartido incluye la marca de agua de Splat Labs.
Ejemplo 1: Obra de Construcción
Una obra de construcción de varias semanas capturada con LiDAR y procesada como un Gaussian Splat. Este es el tipo de incrustación que los equipos de construcción comparten con las partes interesadas remotas para que puedan explorar la obra sin viajar.
URL de Incrustación:
https://cloud.splatlabs.ai/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat
Código de Incrustación (copia y pega):
<iframe
src="https://cloud.splatlabs.ai/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Ejemplo 2: Niseko Village — Resort de Esquí Nevado
Una captura fotorrealista de un pueblo de resort de esquí nevado en Niseko, Japón. Este tipo de incrustación inmersiva es perfecta para turismo, hostelería y marketing de destinos — permitiendo a los posibles visitantes explorar un lugar antes de reservar.
URL de Incrustación:
https://cloud.splatlabs.ai/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3
Código de Incrustación (copia y pega):
<iframe
src="https://cloud.splatlabs.ai/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Personalización de tu Incrustación
Altura Responsiva
Para una incrustación responsiva que mantenga una relación de aspecto 16:9 en cualquier pantalla, envuelve tu iframe en un contenedor:
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
</div>
Esta técnica — a veces llamada caja de relación de aspecto — se utiliza ampliamente para incrustaciones de vídeo y mapas. Asegura que tu visor se vea genial en todo, desde un monitor 4K hasta un teléfono móvil.
Incrustación de Ancho Completo
¿Quieres que el visor salga de tu columna de contenido y abarque el ancho total del navegador? Usa este contenedor:
<div style="position: relative; width: 100vw; left: 50%; margin-left: -50vw;">
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
</div>
Comportamiento de Carga
loading="eager"— El visor comienza a cargarse inmediatamente cuando se carga la página. Mejor cuando la incrustación está por encima del pliegue o es el contenido principal.loading="lazy"— El visor solo se carga cuando el usuario lo desplaza a la vista. Mejor para páginas con múltiples incrustaciones o cuando el visor está más abajo en la página.
Guía de Incrustación Plataforma por Plataforma
El visor de Splat Labs funciona en cualquier lugar que admita HTML o iframes. A continuación se presenta una guía detallada para cada plataforma principal.
WordPress
WordPress ofrece varias formas de incrustar un iframe, dependiendo de si estás usando el Editor de Bloques (Gutenberg) o el Editor Clásico.
Editor de Bloques (Gutenberg) — recomendado:
- Abre la página o entrada donde deseas incrustar el visor.
- Haz clic en el insertador de bloques + y busca HTML Personalizado.
- Agrega el bloque HTML Personalizado a la página.
- Pega el código de incrustación iframe completo en el bloque.
- Haz clic en Vista Previa para confirmar que se renderiza correctamente, luego publica.
Editor Clásico:
- Abre tu página o entrada y cambia a la pestaña Texto (no Visual).
- Pega el código de incrustación iframe directamente donde deseas que aparezca.
- Vuelve a la pestaña Visual para obtener una vista previa, luego publica.
Usando un complemento (opcional):
Si incrustas iframes con frecuencia, el complemento iFrame (disponible en WordPress.org con más de 70.000 instalaciones activas) te permite usar un código abreviado simple en lugar de HTML sin formato:
[iframe src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat" width="100%" height="600"]
Esto funciona tanto en el Editor de Bloques como en el Editor Clásico sin necesidad de cambiar a la vista HTML.
Elementor / otros creadores de páginas:
La mayoría de los creadores de páginas como Elementor, Divi y Beaver Builder incluyen un bloque HTML o de Código. Coloca ese bloque en tu página y pega el código iframe.
Solución de problemas: Si la incrustación muestra un espacio en blanco, asegúrate de que tanto tu sitio de WordPress como el visor de Splat Labs se sirvan a través de HTTPS. El contenido mixto (iframe HTTP en una página HTTPS) es bloqueado por los navegadores modernos. Splat Labs Cloud siempre usa HTTPS, por lo que no debería ser un problema. Si estás en una configuración de WordPress Multisitio, confirma que el HTML sin filtrar esté habilitado para tu rol de usuario.
Squarespace
Squarespace admite iframes a través de Bloques de Código, pero hay un requisito de plan importante a tener en cuenta.
Requisito de plan: Agregar JavaScript o iframes a los Bloques de Código requiere planes Business, Commerce Basic, Commerce Advanced, Core, Plus o Advanced. El plan Personal solo admite HTML sin formato, Markdown y CSS en los Bloques de Código — los iframes no se renderizarán.
Cómo incrustar:
- Abre el editor de páginas en Squarespace.
- Haz clic en un punto de inserción (la línea entre las secciones de contenido) o haz clic en Agregar Bloque.
- Selecciona Código del menú de bloques.
- Pega el código de incrustación iframe completo en el editor del Bloque de Código.
- Haz clic fuera del bloque para guardar. La incrustación debería aparecer en el editor.
Si la incrustación no aparece al editar: Este es el comportamiento esperado. Squarespace a veces oculta el contenido del iframe cuando estás conectado como medida de seguridad. Haz clic en Vista Previa o ve tu sitio publicado en una ventana de incógnito para confirmar que la incrustación se está renderizando correctamente para los visitantes.
Usando un Bloque de Incrustación en lugar de un Bloque de Código:
Squarespace también tiene un Bloque de Incrustación separado que acepta URLs de servicios compatibles con oEmbed. Dado que Splat Labs Cloud no es un proveedor de oEmbed, debes usar el método del Bloque de Código descrito anteriormente — no el Bloque de Incrustación. Si pruebas el Bloque de Incrustación y pegas la URL sin formato, Squarespace puede no detectarla o mostrar un error "no compatible".
Hacer que sea responsivo:
Las columnas de contenido de Squarespace tienen un ancho máximo fijo. Para que el iframe llene el ancho completo de la columna, usa width="100%" en tu código iframe. Para la altura responsiva, envuelve el iframe en el contenedor de relación de aspecto que se muestra en la sección Personalización de tu Incrustación anterior.
Consejo: Si estás en un plan Personal de Squarespace y no puedes usar Bloques de Código con iframes, considera actualizar al plan Business — o enlaza directamente a tu URL del visor de Splat Labs como un hipervínculo estándar para que los visitantes puedan abrirlo en una nueva pestaña.
Webflow
Webflow trata el código personalizado como un elemento de diseño de primera clase a través de su elemento Incrustar (también llamado Incrustación de Código).
Cómo incrustar:
- Abre el Diseñador de Webflow para tu proyecto.
- Abre el panel de Agregar (el ícono + en la barra lateral izquierda).
- Busca o desplázate hasta Incrustar (en la sección de Componentes) y arrástralo al lienzo donde deseas que aparezca el visor.
- El editor de código se abre automáticamente — pega el código de incrustación iframe completo.
- Haz clic en Guardar y Cerrar.
El iframe se previsualizará directamente en el lienzo de Webflow. El contenido envuelto en etiquetas <iframe> muestra una vista previa en vivo en el Diseñador, por lo que deberías ver el visor de Splat Labs inmediatamente.
Requisito de plan: El elemento Incrustar está disponible en todos los planes de Webflow Workspace (Core, Growth, Agency, Freelancer) y cualquier sitio con un plan de Sitio activo. Los sitios de staging gratuitos también pueden usarlo.
Tamaño y capacidad de respuesta:
Si el iframe no establece explícitamente el tamaño, tomará el ancho completo de su elemento padre. Puedes controlar el ancho y alto del elemento Incrustar desde el panel de Estilo de Webflow al igual que cualquier otro elemento. Para el comportamiento responsivo, establece el ancho del elemento al 100% y usa una altura fija, o envuélvelo en un div con la técnica de relación de aspecto de padding-bottom.
Incrustar dentro de elementos de Colección CMS:
Si deseas incrustar un visor de Splat Labs diferente en cada página de Colección CMS (por ejemplo, un portafolio de escaneos 3D), puedes almacenar la URL del visor en un campo de texto CMS y referenciarlo dinámicamente dentro de un elemento Incrustar usando el enlace de campo CMS de Webflow. Agrega un elemento Incrustar a tu Plantilla de Colección, luego inserta la referencia del campo CMS dentro de tu atributo src del iframe.
Límite de caracteres: Los elementos Incrustar tienen un límite de 50.000 caracteres. Un solo iframe de Splat Labs está muy por debajo de este límite, por lo que esto nunca debería ser un problema.
Nota: La documentación de soporte de código personalizado de Webflow establece explícitamente que el código personalizado puede entrar en conflicto con la funcionalidad subyacente de Webflow y que su equipo de soporte no puede ayudar a depurar el código personalizado. Dicho esto, un iframe simple como el visor de Splat Labs debería funcionar sin ningún problema.
Wix
Wix proporciona un elemento HTML iFrame dedicado para incrustar contenido externo.
Editor de Wix — cómo incrustar:
- En el Editor de Wix, haz clic en el botón + (Agregar) en la barra lateral izquierda.
- Navega a Código de Incrustación → Incrustar HTML.
- Aparece un cuadro gris en tu página — arrástralo a tu posición preferida y redimensiónalo según sea necesario.
- Haz clic en el elemento, luego haz clic en Ingresar Código.
- Selecciona Código (no Dirección del Sitio Web).
- Pega el código de incrustación iframe completo en el cuadro de texto.
- Haz clic en Actualizar (o Aplicar).
Editor de Wix Studio:
- Haz clic en Agregar Elementos en el lado izquierdo del editor.
- Haz clic en Incrustar y Social.
- Selecciona Código de Incrustación para agregar el elemento a la página.
- Haz clic en Ingresar Código, pega el código iframe y haz clic en Aplicar.
Incrustar a través de URL (método alternativo):
En lugar de pegar código iframe, puedes pegar la URL del visor directamente:
- Agrega un elemento de Incrustación como se describió anteriormente.
- En lugar de seleccionar Código, selecciona Dirección del Sitio Web.
- Pega la URL del visor de Splat Labs:
https://cloud.splatlabs.ai/viewer/{project-id}?view=splat - Haz clic en Aplicar.
Este método es más simple pero te da menos control sobre los atributos de tamaño.
Notas importantes para Wix:
- La URL de incrustación debe usar HTTPS. Splat Labs Cloud siempre sirve a través de HTTPS, por lo que esto ya está manejado.
- El elemento HTML iFrame en Wix está en un entorno aislado — crea un entorno de iframe aislado. Esto significa que el visor opera independientemente de los estilos de tu página, lo cual es ideal para un visor 3D.
- El elemento iFrame de Wix no es inherentemente responsivo. Incluso si tu URL del visor es responsiva, el contenedor de iframe de Wix tiene un tamaño fijo en el lienzo. Establece el ancho y la altura en tu código iframe a
100%y dimensiona manualmente el contenedor de incrustación de Wix para los diseños de escritorio y móvil. - Móvil: El elemento iframe de escritorio no se traduce automáticamente al móvil. En el editor móvil de Wix, es posible que necesites agregar un elemento HTML de Incrustación separado posicionado y dimensionado específicamente para pantallas móviles, u ocultar el elemento de escritorio y agregar una alternativa compatible con móviles.
Requisito premium: Wix admite incrustaciones HTML iFrame en planes gratuitos y premium en el editor estándar. Sin embargo, si usas Elementos Personalizados (integraciones avanzadas de Velo/Blocks), se requiere un plan premium con un dominio conectado.
Notion
Notion no acepta código HTML sin formato ni <iframe>. En cambio, incrustas contenido pegando una URL en un bloque de Incrustación, y Notion maneja el renderizado del iframe detrás de escena.
Cómo incrustar:
- Abre la página de Notion donde deseas el visor.
- Escribe
/incrustaren una nueva línea, o haz clic en el botón + y selecciona Incrustar. - Pega la URL del visor de Splat Labs (no el código iframe — solo la URL):
https://cloud.splatlabs.ai/viewer/{project-id}?view=splat - Haz clic en Incrustar enlace.
Notion renderizará el visor en un marco en línea. Puedes redimensionarlo pasando el cursor sobre el bloque y arrastrando las asas en cualquiera de los lados.
Importante: Usa la URL, no el código iframe. El bloque de incrustación de Notion espera una URL https:// limpia. Si pegas la etiqueta HTML <iframe> completa, no funcionará. Notion usa el servicio Iframely para resolver URLs de incrustación de más de 1.900 dominios.
Si la incrustación no se carga:
- Asegúrate de que la URL del visor de Splat Labs sea accesible públicamente (debería serlo — los enlaces de visores compartidos son públicos de forma predeterminada).
- Si Notion muestra una tarjeta de marcador en lugar de una incrustación, elimina el marcador e inténtalo de nuevo usando el comando
/incrustarexplícitamente. - Algunos espacios de trabajo con configuraciones de seguridad estrictas pueden limitar las incrustaciones externas. Verifica con tu administrador de espacio de trabajo si estás en un plan Enterprise.
Tamaño: Puedes redimensionar el ancho de la incrustación arrastrando las asas. Para más espacio vertical, también es posible que quieras configurar tu página de Notion en modo Ancho Completo (haz clic en el menú ⋯ en la parte superior derecha → activa Ancho Completo).
Consejo: Las incrustaciones de Notion son geniales para la documentación interna de proyectos. Comparte una captura de Gaussian Splat de una obra de construcción, un edificio escaneado o un modelo de terreno directamente dentro de tu wiki de proyectos para que tu equipo pueda explorarlo sin salir de Notion.
Zillow / Listados MLS
Zillow y la mayoría de las plataformas MLS admiten enlaces de recorridos virtuales, pero funcionan de manera diferente de las incrustaciones iframe estándar. No pegas código iframe directamente — en cambio, proporcionas la URL del visor en un campo dedicado.
Cómo agregar a Zillow:
- Inicia sesión en tu cuenta de agente de Zillow en zillow.com.
- Navega a tu panel de Listados y selecciona la propiedad.
- Haz clic en Editar listado.
- Desplázate hacia abajo a la sección de Fotos — debajo de ella, encontrarás un campo etiquetado URL de Recorrido Virtual.
- Pega la URL del visor de Splat Labs:
https://cloud.splatlabs.ai/viewer/{project-id}?view=splat - Desplázate hacia abajo y haz clic en Actualizar para guardar.
Zillow agregará un botón "Ver Recorrido Virtual" a tu página de listado. Los visitantes hacen clic en él para abrir el visor 3D.
Cómo agregar a tu MLS:
La mayoría de los sistemas MLS (Flexmls, Matrix, Bright MLS, etc.) tienen un campo URL de Recorrido Virtual en la página de edición del listado. Pega la URL del visor de Splat Labs allí. Una vez sincronizado, el enlace del recorrido se propagará automáticamente a Zillow, Trulia, Realtor.com, Redfin y otros portales que se alimentan de tu MLS.
Notas importantes:
- Zillow muestra recorridos virtuales de terceros como un hipervínculo en la sección Hechos y Características de la página de listado. Para una colocación más prominente (que aparezca en el carrusel de fotos), Zillow actualmente favorece los recorridos de una lista seleccionada de proveedores aprobados (Matterport, iGuide, etc.) y su propia aplicación Zillow 3D Home.
- El MLS es la fuente autorizada. Si agregas la URL del recorrido virtual a tu listado MLS, aparecerá automáticamente en Zillow cuando se sincronice el listado — no necesitas agregarlo en ambos lugares.
- Tanto los enlaces de recorridos con marca como sin marca pueden ser compatibles dependiendo de tu MLS. Consulta la documentación de tu MLS para más detalles.
Incrustar en tu propio sitio web inmobiliario:
Para tu sitio web de agente personal o sitio de correduría, usa el código de incrustación iframe estándar para mostrar el visor 3D en línea en tus páginas de listado. Esto le da a los compradores una experiencia mucho más rica que un simple enlace.
Profesionales inmobiliarios: Los listados con recorridos virtuales reciben significativamente más visitas. Zillow informa que los listados con recorridos 3D obtienen hasta un 68% más de visitas que aquellos sin ellos. Incrustar un recorrido de Gaussian Splat permite a los compradores explorar cada ángulo de una propiedad — las 24 horas del día, 7 días de la semana, desde cualquier lugar.
GitHub Pages
Los sitios de GitHub Pages son HTML estático, por lo que incrustar un iframe es sencillo — pega el código directamente en tus archivos HTML o Markdown.
En un archivo HTML:
Pega el código de incrustación iframe en cualquier lugar del <body> de tu página:
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
En un archivo Markdown (con Jekyll):
GitHub Pages usa Jekyll de forma predeterminada, y el renderizador de Markdown de Jekyll (Kramdown) admite HTML en línea. Puedes pegar el iframe directamente en tu archivo .md y se renderizará cuando se construya el sitio:
Aquí hay un escaneo 3D interactivo del sitio:
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Nota sobre los archivos README de GitHub: Si estás intentando incrustar en un README.md en una página de repositorio de GitHub (no en un sitio de GitHub Pages), los iframes no se renderizarán. El sanitizador de Markdown de GitHub elimina las etiquetas <iframe> de los archivos README por razones de seguridad. Para los README de repositorios, enlaza a la URL del visor o usa una captura de pantalla con un enlace clicable:
[](https://cloud.splatlabs.ai/viewer/{project-id}?view=splat)
React / Next.js
En proyectos de React y Next.js, usa el iframe directamente en tu JSX. La etiqueta HTML <iframe> funciona de forma nativa — solo nota las diferencias en los nombres de atributos de JSX.
Componente básico de React:
export default function SplatViewer({ projectId }) {
return (
<iframe
src={`https://cloud.splatlabs.ai/viewer/${projectId}?view=splat`}
width="100%"
height="600"
frameBorder="0"
allowFullScreen
loading="eager"
style={{ border: 'none' }}
/>
);
}
Diferencias clave de JSX respecto a HTML:
frameborder→frameBorder(camelCase)allowfullscreen→allowFullScreen(camelCase)- Usa
style={{ border: 'none' }}en lugar deframeborder="0"para mayor cumplimiento con React
Componente de visor responsivo:
export default function ResponsiveSplatViewer({ projectId }) {
return (
<div style={{
position: 'relative',
paddingBottom: '56.25%',
height: 0,
overflow: 'hidden'
}}>
<iframe
src={`https://cloud.splatlabs.ai/viewer/${projectId}?view=splat`}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: 'none'
}}
allowFullScreen
loading="eager"
/>
</div>
);
}
Consideraciones de Next.js:
- El iframe carga contenido del lado del cliente, por lo que funciona bien tanto en Componentes del Servidor como en Componentes del Cliente.
- Para el rendimiento, considera usar
loading="lazy"si el visor está por debajo del pliegue. - Si necesitas diferir la carga del iframe hasta que se desplace a la vista, envuelve el componente en React
Suspenseo usa la API Intersection Observer para un control de carga diferida más preciso. - Agrega el atributo
sandboxsi deseas restringir las capacidades del iframe para una seguridad más estricta:sandbox="allow-scripts allow-same-origin".
Hugo / Gatsby / Astro / Otros Generadores de Sitios Estáticos
Cualquier generador de sitios estáticos que produzca HTML admite iframes de forma nativa. Pega el código de incrustación en tu plantilla de página, archivo de contenido o componente.
Hugo:
En tu archivo de contenido Markdown, pega el iframe directamente — el renderizador de Markdown predeterminado de Hugo (Goldmark) admite HTML en línea:
{{< rawhtml >}}
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
{{< /rawhtml >}}
Si no tienes un código abreviado rawhtml, crea uno en layouts/shortcodes/rawhtml.html con el contenido: {{ .Inner }}
Alternativamente, habilita el renderizado HTML inseguro en tu configuración de Hugo:
[markup.goldmark.renderer]
unsafe = true
Luego pega el iframe directamente en cualquier archivo .md.
Gatsby:
Usa el iframe en cualquier componente o página de React, tal como se describe en la sección de React / Next.js anterior.
Astro:
Pega el iframe directamente en cualquier componente .astro o archivo Markdown. Astro admite HTML sin formato en Markdown de forma predeterminada.
Shopify
Shopify admite HTML personalizado en varios lugares de tu tienda.
En una página o entrada de blog:
- Abre la página o entrada de blog en el administrador de Shopify.
- En el editor de texto enriquecido, haz clic en el botón <> (Mostrar HTML) para cambiar a la vista HTML.
- Pega el código de incrustación iframe.
- Vuelve al editor visual para confirmar la ubicación, luego guarda.
En una plantilla de tema Liquid:
Pega el código iframe directamente en cualquier archivo .liquid de tu tema (por ejemplo, en una sección personalizada o plantilla de página).
En una sección Liquid Personalizada (Online Store 2.0):
- Ve a Tienda en Línea → Temas → Personalizar.
- Agrega una sección Liquid Personalizado.
- Pega el código de incrustación iframe en el campo Liquid.
- Guarda.
HTML Personalizado / Cualquier Sitio Web
Si tienes acceso directo a los archivos fuente HTML de tu sitio web, incrustar es tan simple como pegar el código iframe en el <body> de cualquier página:
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Esto funciona en cualquier sitio HTML estático, cualquier sitio con renderizado del servidor (PHP, Python, Ruby, etc.) y cualquier CMS que te permita editar el código fuente de la página directamente.
Preguntas Frecuentes
¿Es gratuito incrustar?
Sí. Cada proyecto de Splat Labs se puede compartir e incrustar sin costo adicional. Las incrustaciones compartidas muestran la marca de agua de Splat Labs. Los planes Business y Enterprise ofrecen marca de etiqueta blanca reducida o sin marca.
¿Mis visitantes necesitan instalar algo?
No. El visor se ejecuta completamente en el navegador usando WebGL. Funciona en Chrome, Safari, Firefox y Edge — en escritorio, tableta y móvil.
¿Puedo controlar la posición inicial de la cámara?
Sí. Configura tu ángulo de cámara preferido en el visor de Splat Labs antes de compartir. La incrustación se cargará en esa posición exacta.
¿La incrustación afecta la velocidad de mi página?
El iframe se carga independientemente del contenido de tu página. Usar loading="lazy" garantiza que el visor solo se cargue cuando se desplace a la vista, por lo que tiene un impacto mínimo en el tiempo de carga inicial de tu página.
¿Puedo incrustar en múltiples páginas?
Absolutamente. No hay límite en cuántas páginas pueden incrustar el mismo visor. El visor se sirve desde el CDN de Splat Labs, por lo que se carga rápido en todas partes.
¿Por qué la incrustación muestra un espacio en blanco?
Las causas más comunes son el bloqueo de contenido mixto (página HTTP cargando iframe HTTPS o viceversa) y el sitio fuente bloqueando iframes a través de X-Frame-Options o encabezados de Política de Seguridad de Contenido. Splat Labs Cloud sirve todas las URL del visor a través de HTTPS y permite la incrustación de iframe de forma predeterminada, por lo que si ves un espacio en blanco, verifica que tu propio sitio también se sirva a través de HTTPS.
¿Puedo personalizar la marca del visor?
Los enlaces compartidos gratuitos incluyen la marca de agua de Splat Labs. Los planes Business y Enterprise ofrecen opciones de etiqueta blanca donde puedes eliminar o reemplazar la marca con tu propio logotipo.
¿Listo para Incrustar el Tuyo?
Crear e incrustar un visor de Gaussian Splat lleva solo unos pocos minutos:
- Regístrate gratis en cloud.splatlabs.ai
- Sube tu archivo de Gaussian Splat (formato PLY, SPLAT, KSPLAT o XGRIDS)
- Haz clic en Compartir y copia la URL de incrustación o el código iframe
- Pega en tu sitio web, blog o plataforma de listado
Splat Labs admite Gaussian Splats de cualquier fuente — PortalCam, Lixel L2 Pro, Postshot, Kiri Engine, Luma AI, XGRIDS o cualquier otra herramienta que produzca formatos de splat estándar.
¿Necesitas ayuda para incrustar en una plataforma específica? Contacta a nuestro equipo — estaremos encantados de explicártelo.
