Cómo Integrar un Tour Virtual 360° en tu Sitio Web 2026 | Travvir

Cómo funciona la integración de un tour virtual

El método iFrame

El método estándar consiste en usar una etiqueta HTML iFrame. El iFrame carga el contenido del tour (alojado en Travvir) dentro de una ventana en tu página. Estructura básica:

<iframe
  src="https://app.travvir.com/tour/TU-ID-TOUR"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  allow="xr-spatial-tracking; gyroscope; accelerometer"
></iframe>

El atributo allowfullscreen activa el modo pantalla completa. El atributo allow concede los permisos necesarios para el giroscopio en móvil — imprescindible para una buena experiencia móvil.

Obtener el código de integración desde Travvir

En tu panel de Travvir: selecciona tu tour → haz clic en Compartir → selecciona Integrar → copia el código iFrame. El código Travvir ya incluye los permisos correctos y las proporciones preconfiguradas.

Integración por plataforma

WordPress

En el editor Gutenberg: añade un bloque "HTML personalizado" donde quieras el tour, pega el código iFrame y publica. No uses el modo "HTML" de un bloque párrafo — elimina las etiquetas iFrame. Debes usar el bloque HTML dedicado.

Squarespace

Añade un bloque Embed a tu página, cambia a la opción "Código de integración" (no la integración por URL) y pega el código iFrame. Squarespace conserva los iFrames y los muestra correctamente.

Wix

En el editor Wix: Añadir → Integrar → HTML iFrame → pega tu código. Redimensiona el componente en el lienzo para ajustar las dimensiones.

Webflow

Añade un elemento Embed en tu lienzo de Webflow, pega el código iFrame en el campo HTML. Webflow renderiza los iFrames de forma nativa con interactividad completa, incluido el giroscopio en móvil.

Optimizar la integración para el rendimiento

Carga diferida (lazy loading)

Añade loading="lazy" a tu etiqueta iFrame para que el tour solo se cargue cuando el usuario haga scroll hasta él. Esto mejora notablemente el tiempo de carga inicial de la página.

Altura mínima recomendada

Define una altura mínima de 500 px para una navegación cómoda en escritorio. En móvil, usa un ratio responsive con CSS (ej.: padding-bottom: 56.25%) para que el tour se adapte automáticamente a la pantalla.

Preguntas frecuentes

¿La integración ralentiza mi web?

No si usas lazy loading. El tour virtual solo se carga cuando el visitante hace scroll hasta él, lo que preserva la velocidad de carga inicial.

¿Puedo integrar varios tours en la misma página?

Técnicamente sí, pero no es recomendable. Opta por un tour por página, o usa pestañas para cargar un solo tour a la vez.