Cómo insertar un tour virtual en tu web (con el código)

Un tour virtual vende más dentro de tu web que como un enlace que quizá nadie pulse. Insertarlo permite al visitante recorrer el inmueble sin salir de tu página. Es copiar y pegar, siempre que uses el código adecuado.

El código de inserción

Todo tour que se puede insertar te da un <iframe>. Esta es la versión que recomendamos, ya adaptable (ocupa todo el ancho y mantiene la proporción 16:9):

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://roomtourapp.com/embed/tu-tour"
    title="Visita virtual 360°"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

Qué hace cada parte:

aspect-ratio:16/9 en la caja mantiene la forma del tour en cualquier pantalla. Sin ella, muchas plantillas aplastan el iframe a 150 píxeles de alto.
allow="…gyroscope; accelerometer…" permite mirar alrededor moviendo el móvil. Sin él, el navegador bloquea los sensores dentro del iframe.
allowfullscreen hace que funcione el botón de pantalla completa.
loading="lazy" hace que el tour solo cargue cuando el visitante llega a él, así tu página sigue siendo rápida.
title es lo que leen los lectores de pantalla. Describe el inmueble.

Con RoomTour no tienes que escribirlo: en la ficha del tour del panel web tienes el código listo para copiar, con la dirección de tu tour.

Dónde pegarlo

WordPress (editor de bloques): añade un bloque HTML personalizado y pega el código. En el editor clásico, cambia antes a la pestaña Texto.
Wix: Añadir → Insertar código → Insertar HTML, pega el código y estira la caja al ancho de la sección.
Squarespace: añade un bloque Código y pega el código.
Webflow: arrastra un elemento Embed a la página y pega el código.
HTML a mano: pégalo donde quieras que aparezca el tour.

Portales inmobiliarios

Los portales no dejan pegar código: tienen un campo para el enlace del tour virtual. Usa ahí el enlace corto del tour, no el código de inserción. Lo contamos paso a paso en cómo poner un tour virtual en idealista y Fotocasa.

Problemas habituales

El tour se ve como una franja estrecha. La plantilla ignora la altura del iframe. Usa la caja con aspect-ratio de arriba.
No se puede mirar alrededor moviendo el móvil. Falta el atributo allow o tu editor lo elimina. Pega el código completo.
La página va lenta. Comprueba que sigue el loading="lazy" y que solo hay un tour por página.
Dos logos. Si tu web ya lleva tu marca, usa el modo insertado del tour, que oculta el logo del proveedor. Las direcciones /embed/ de RoomTour lo hacen.

Preguntas frecuentes

¿Cómo inserto un tour virtual en mi web?

Copia el código de inserción del tour (un iframe) y pégalo en un bloque de HTML o de código de tu página. Usa la versión adaptable para que mantenga la forma en el móvil.

¿Cómo es el código de un tour virtual?

Es un iframe que apunta al tour, con permiso para pantalla completa y para los sensores de movimiento del móvil, de modo que el visitante pueda mirar alrededor moviendo el teléfono. La versión adaptable lo mete en una caja con proporción fija.

¿Un tour insertado hace más lenta mi web?

No si carga en diferido: con loading="lazy" el tour solo empieza a cargar cuando el visitante llega a él. Evita poner varios tours en la misma página.

¿Puedo insertar el tour en idealista o Fotocasa?

Los portales no admiten código de inserción, pero tienen un campo para el enlace del tour virtual. Pega ahí el enlace del tour. Lo explicamos en nuestra guía sobre idealista y Fotocasa.