Cómo insertar un tour virtual en tu web, paso a paso

Así puedes insertar un tour virtual en tu web: copia el código del tour, pégalo en un bloque HTML en la ficha del inmueble, ajusta el tamaño y pruébalo en el móvil antes de publicar. Lo mismo sirve para una sola foto 360. Aquí tienes los pasos para WordPress, Wix y Squarespace, un código listo para copiar y una lista de lo que debes revisar en el móvil.

Qué necesitas antes de empezar

Si todavía no trabajas con tours, la guía del tour virtual inmobiliario explica qué es y cómo lo usan los compradores. Para insertarlo, ten a mano:

• El código para insertar, no solo el enlace. El enlace abre el tour en su propia página. El código es una línea que empieza por <iframe y muestra el tour dentro de la tuya.
• Un tour que pueda abrir cualquiera. Ponlo en Público. En Pro puedes desactivar Mostrar en Google y otros buscadores, para que solo lo vea quien tenga el enlace. Un tour privado muestra un aviso de "privado" dentro del marco, no las estancias.
• Permiso para editar la página. En WordPress necesitas una cuenta que pueda añadir código (lo vemos más abajo). Si otra persona lleva la web, mándale el código por email.
• Una sola foto 360 funciona igual. Conviértela en un tour de una estancia e inserta ese tour. Para ver la foto antes, ábrela en el visor 360 gratuito.

Paso 1: copia el código

Casi todas las aplicaciones de tours guardan el código en un botón llamado Compartir, Insertar o Publicar. Busca "insertar", "incrustar", "embed", "iframe" o "código" y copia la línea entera, desde <iframe hasta </iframe>.

En Vistura, abre el tour, pulsa Compartir y ve a "Insertar en una web". Pulsa "Copiar código", y la indicación te dice lo siguiente: "Pega este código en la página del inmueble de tu web." Está en todos los planes, y el código ya ocupa el ancho de la página y lleva el nombre del tour como título.

Paso 2: pégalo en tu web

Todas las plataformas tienen un bloque para código. Lo importante es saber qué impide que se vea.

WordPress (instalación propia)

1. Abre la ficha del inmueble y añade un bloque HTML personalizado (Custom HTML): con el botón para insertar bloques, o escribiendo /html en un párrafo nuevo (documentación de WordPress, en inglés).
2. Pega el código en el bloque.
3. Guarda o actualiza la página.

Si tu cuenta no tiene el permiso unfiltered_html, por ejemplo una cuenta de Colaborador, WordPress quita el <iframe> del bloque al guardar (documentación de WordPress). Mientras editas todo parece bien, y luego la página no muestra nada. Pide a un Administrador que pegue el código o que cambie tu perfil.

WordPress.com

El bloque es el mismo, pero manda el plan. WordPress.com solo deja usar iframe a los sitios con un plan que admite plugins y con las funciones de alojamiento activadas; antes de activarlas, se aplican los mismos límites que a los sitios gratuitos (soporte de WordPress.com, en inglés). En una web gratuita el código no se verá.

Wix

1. En el editor, ve a Agregar elementos > Código incrustado > Incrustaciones populares > Incrustar HTML (Centro de Ayuda de Wix).
2. Pega el código en el campo y aplícalo.
3. Ajusta el tamaño del elemento en el editor.

"Solo se muestran los códigos HTTPS y las URL", avisa Wix. Su elemento HTML es a su vez un iframe, así que el contenido no se adapta solo: pon el ancho y el alto del iframe al 100% en el código y ajusta el tamaño en el elemento (Wix, en inglés). Revisa también la vista móvil en el editor de Wix.

Squarespace

1. Añade un bloque "Código" y pega el código.
2. Deja desactivada la opción de mostrar el código fuente (sirve para enseñar el código como texto).
3. Guarda y revisa la vista previa.

"Para agregar JavaScript o un iframe a un bloque de código, tu sitio debe tener el plan Core, Plus o Advanced" (ayuda de Squarespace). Además, el código puede no verse mientras tienes la sesión iniciada, y Squarespace avisa de que el código personalizado puede estropear el aspecto de la web, sobre todo en el móvil (ayuda de Squarespace, en inglés).

Una web que viene con el software de la inmobiliaria

Muchas inmobiliarias tienen la web incluida en su programa de gestión. El camino suele ser este:

1. Abre el inmueble en el panel de gestión.
2. Busca un campo o bloque llamado HTML, Código, Insertar, Embed o Widget, a menudo junto a las fotos o los vídeos.
3. Pega el código completo, guarda y abre la ficha pública para comprobarlo.

Si no encuentras ningún campo así, pregunta al soporte del proveedor dónde se coloca un iframe en la ficha del inmueble. Diles que es un código <iframe en HTTPS y lo entenderán enseguida.

Paso 3: ajusta el marco a cualquier pantalla

El código de un tour es corto. Esto hace cada parte, para que sepas cuál cambiar:

Añade loading="lazy" cuando el tour quede debajo de las fotos. El navegador solo lo carga cuando el visitante se acerca a él al bajar por la página (MDN). Según la guía de Google para la web, funciona en todos los navegadores principales, ahorra datos, acelera el resto de la página y usa menos memoria (web.dev, en inglés).

Una altura fija queda bien en el ordenador y demasiado alta o aplastada en el móvil. Para mantener la misma forma en cualquier pantalla, dale al marco una proporción en lugar de una altura:

<iframe src="https://DIRECCION-DE-TU-TOUR" title="Piso de dos dormitorios en Valencia, tour 360"
  width="100%" loading="lazy" allow="fullscreen"
  style="border:0; aspect-ratio:4/3; max-height:80vh"></iframe>

Cambia la dirección por la de tu tour, escribe tu propio title y borra el atributo height: aspect-ratio solo funciona si una de las dos medidas queda automática. Esta propiedad funciona en todos los navegadores desde septiembre de 2021 (MDN), pero comprueba el resultado en un móvil de verdad, porque los temas y las plataformas añaden sus propios estilos.

Dos consejos de la práctica. Una forma 4/3, o más alta, queda mejor en el móvil que una franja ancha 16/9. Y max-height:80vh deja el marco más bajo que la pantalla, para que siempre quede página alrededor por donde deslizar.

Dónde poner el tour en la ficha del inmueble

1. Arriba, después de las fotos. El comprador mira primero las fotos; el tour va justo después, antes de la descripción larga.
2. Deja los datos del inmueble en la propia ficha. El precio, el texto y las características van en tu página, no solo dentro del tour, que vive en otra dirección.
3. Pon un enlace sencillo debajo del marco. Escribe "Abrir el tour 360 a pantalla completa" y enlázalo a la dirección del propio tour. En el móvil, un enlace a la página del tour deja verlo a pantalla completa.
4. Un tour por página. Varios marcos pesados en la misma página la vuelven lenta.

Paso 4: pruébalo en el móvil antes de publicar

Abre la página publicada en tu móvil y repasa esta lista:

• Pasa el tour con un pulgar. Si cada gesto gira la estancia en lugar de bajar la página, haz el marco más bajo.
• Arrastra dentro del marco. La estancia debe girar.
• Toca el enlace de debajo. El tour debe abrirse en su propia página.
• Mírala sin sesión iniciada, o en una ventana privada. Squarespace, por ejemplo, puede ocultar el código a quien está editando (ayuda de Squarespace).
• Ábrela con datos móviles, no solo con el wifi de la oficina.
• Si el marco sale vacío, revisa lo de siempre: HTTPS (Wix), el plan (WordPress.com, Squarespace), los permisos de tu cuenta (WordPress) o un tour privado.

Tu web, los portales y el email son tres trabajos distintos

• Tu web recibe el código para insertar.
• Los portales (idealista, Fotocasa, Habitaclia, pisos.com) tienen cada uno sus reglas para los tours virtuales. Antes de prometer el tour en el anuncio, consulta en las instrucciones del portal qué tours acepta y dónde va el enlace. El "Enlace para portales" de Vistura te da un enlace para cada portal, con la opción "Sin mis contactos ni mi logotipo", y cuenta las visitas de cada portal por separado (la vista Por portal es de Pro). Para carteles y escaparates, mira el código QR para el cartel inmobiliario.
• Email y mensajes. Envía una imagen del tour con un enlace a él, no el código.

Comprueba si la gente usa el tour en tu web

Un tour de Vistura insertado conserva la tarjeta del agente, WhatsApp y el formulario dentro del marco, y los contactos llegan a Leads en todos los planes. Las visitas que vienen de tu web se cuentan aparte, como "Tu web (insertado)", desde el primer día. En Pro ves ese desglose por origen, junto a las estancias vistas, el tiempo y los dispositivos, y el tour lleva el logotipo y los colores de tu inmobiliaria, sin el sello de Vistura. En Pro, una vez activada la rotación automática, la foto gira sola cuando el visitante se detiene y pasa a la siguiente estancia, ideal para una página abierta en una pantalla del escaparate. El precio de fundador es de US$24 al mes, o US$19 al mes con pago anual, para suscripciones iniciadas hasta el 31 de diciembre de 2026 (ver planes). Puedes probarlo en Gratis, con 3 tours online a la vez y la marca Vistura.

Si el tour no aparece

Conclusión

Insertar un tour son cuatro pasos: copiar el código, pegarlo en un bloque HTML o de código, ajustar el marco al móvil y probarlo con el pulgar antes de publicar. Casi todos los problemas vienen del plan de la plataforma o de los permisos de tu cuenta, no del código.

Preguntas frecuentes

¿Puedo insertar un tour virtual en una web de Wix gratis?

La ayuda de Wix sobre Incrustar HTML no pide ningún plan, solo código HTTPS. En otras plataformas depende del plan, porque WordPress.com solo muestra iframes en un plan con plugins y funciones de alojamiento activadas, y Squarespace solo en los planes Core, Plus o Advanced.

¿El tour hace más lenta la ficha del inmueble?

Mucho menos si añades loading="lazy" al código. El navegador espera a que el visitante se acerque al tour, así que las fotos y el texto de arriba cargan antes.

¿Puedo poner el código en idealista o Fotocasa?

Cada portal tiene sus propias reglas para los tours virtuales. Donde el anuncio tenga un campo de visita virtual, pega ahí el enlace del tour, y consulta la ayuda del portal para profesionales para saber qué tours muestra.

¿Tengo que cambiar el código si edito el tour?

No, si el código apunta al propio tour y no a una copia. En Vistura el código usa el identificador del tour, así que tus cambios se ven en la web al momento y el código sigue funcionando.