Si ya has creado un tour en Tours y quieres integrarlo en tu web, no necesitas escribir código desde cero. Tras publicarlo, accedes a Mis Tours, seleccionas el tour, abres el menú de tres puntos y pulsas Integración. Desde ahí eliges la opción adecuada para tu sitio — HTML, React, Angular, WordPress o Wix — y copias el código generado.
En esa misma ventana puedes activar o desactivar la integración y decidir en qué dominios puede mostrarse el tour. En la práctica, tienes control total sobre dónde aparece la visita virtual, sin tener que volver al editor ni modificar el contenido del tour.
Para el visitante, el resultado es sencillo: el recorrido virtual 360° se abre directamente en tu página. No lo envías a otro sitio, no lo sacas de la página de presentación ni le obligas a buscar la galería por separado. Puede explorar las habitaciones, las mesas, el apartamento, el showroom o el espacio de eventos justo donde tienes la descripción, la oferta, el formulario de contacto o el botón de reserva.
En resumen
- Un tour virtual integrado en tu web aparece directamente en tu página, no como un enlace externo a otra plataforma.
- En Tours, el código se obtiene desde Mis Tours, una vez que el tour ha sido publicado.
- Los pasos son: Mis Tours → menú de tres puntos → Integración → elegir plataforma → copiar el código.
- En la ventana de integración puedes activar o desactivar la visualización del tour en sitios externos.
- Puedes configurar los dominios en los que el tour puede aparecer, para evitar que se copie en cualquier sitio.
- Hay opciones de código para HTML, React, Angular, WordPress y Wix.
- Si modificas el tour en el editor, la versión integrada en tu web se actualiza automáticamente.
- El tour integrado puede incluir escenas 360°, puntos interactivos, reservas integradas y estadísticas de uso.
¿Qué significa integrar un tour virtual en tu web?
Integrar un tour virtual en tu web significa que el visitante puede explorar un espacio en 360° directamente en tu página. No ve solo una imagen grande ni lo envías a una galería externa. Puede girar la imagen, pasar de una estancia a otra, pulsar sobre puntos interactivos y descubrir detalles que las fotografías convencionales no muestran con la misma claridad.
Para un hotel, esto puede suponer una presentación más convincente de las habitaciones. Para un restaurante, puede significar que los clientes vean el ambiente y la sala antes de reservar. Para el sector inmobiliario, puede reducir las preguntas innecesarias, porque el visitante entiende mejor la distribución y las dimensiones del espacio antes de solicitar una visita.
Desde el punto de vista técnico, la integración se realiza mediante un código generado por la plataforma. Lo copias desde Tours y lo pegas en tu sitio web. En WordPress o Wix lo insertas en un elemento HTML. En un sitio desarrollado a medida lo colocas en el código de la página. En proyectos con React o Angular utilizas la variante específica para esa tecnología.
La mayor ventaja es que mantienes al visitante en el mismo contexto. El recorrido virtual puede estar junto a la descripción de la habitación, el formulario de contacto, los precios o el botón de reserva. Eso hace la experiencia más fluida y fácil de usar.
¿Cómo obtienes el código de integración en Tours?
En Tours, el código de integración se genera automáticamente. No tienes que construirlo a mano ni buscar ajustes ocultos en la aplicación. Una vez que el tour está publicado, lo encuentras en tu lista de tours y abres la integración directamente desde ahí.
- Accede a tu cuenta de Tours.
- Abre la página Mis Tours.
- Localiza el tour publicado que quieres mostrar en tu web.
- Pulsa en el menú de tres puntos junto al tour.
- Selecciona la opción de integración.
- Comprueba que la integración está activada.
- Añade o modifica los dominios permitidos.
- Elige la variante de código para HTML, React, Angular, WordPress o Wix.
- Copia el código que aparece y pégalo en la página de tu sitio web donde quieras mostrarlo.
Cada tour tiene su propia configuración de integración. Esto es especialmente útil cuando gestionas varias ubicaciones, varias propiedades o varias páginas de presentación. Puedes tener un tour para la recepción, otro para las habitaciones, otro para el restaurante y otro para una sala de eventos, cada uno con su propio código y sus propios dominios permitidos.
¿Qué puedes configurar en la ventana de integración?
La ventana de integración no es solo el lugar donde copias el código. También es donde controlas cómo se utiliza el tour en sitios externos. Desde aquí puedes desactivar la integración, permitir solo ciertos dominios y elegir el código adecuado para la plataforma que usas.
- Activar o desactivar: puedes detener la visualización del tour en sitios externos sin eliminar el tour de tu cuenta.
- Dominios permitidos: eliges en qué sitios puede aparecer el tour, por ejemplo el dominio del hotel, del restaurante o de la agencia inmobiliaria.
- Elección de plataforma: puedes seleccionar HTML, React, Angular, WordPress o Wix.
- Código listo para copiar: tras elegir la plataforma, el código correspondiente aparece bajo el selector.
- Configuración independiente por tour: cada tour publicado puede tener sus propias reglas de integración.
La lista de dominios permitidos es útil para mantener el control. Por ejemplo, si has creado un tour para el sitio oficial de un hotel, puedes permitir que aparezca solo en ese dominio. Si alguien copia el código e intenta usarlo en otro sitio, la integración puede bloquearse.
¿Qué opción elegir: HTML, React, Angular, WordPress o Wix?
No todos los sitios web están construidos igual, por eso Tours te ofrece varias opciones de código. La idea es que no tengas que adaptar la integración manualmente, sino elegir la variante adecuada y copiar el código generado.
| Plataforma | Cuándo elegir esta opción | Dónde pegar el código |
|---|---|---|
| HTML | Para sitios personalizados, páginas sencillas o plataformas que aceptan código HTML | En el código de la página o en un bloque HTML personalizado |
| React | Para sitios o aplicaciones construidos con React o Next.js | En el componente donde quieres que aparezca el tour |
| Angular | Para proyectos desarrollados con Angular | En la plantilla del componente correspondiente |
| WordPress | Para sitios WordPress, independientemente de si usas Gutenberg, Elementor, Divi o el editor clásico | En un bloque HTML, elemento HTML o módulo de código |
| Wix | Para sitios construidos con el editor Wix | En el elemento de integración HTML del editor |
Si no sabes qué opción elegir, la regla es sencilla: WordPress para WordPress, Wix para Wix, React para React o Next.js, Angular para Angular, y HTML para cualquier otro sitio que acepte código personalizado.
Integrar un tour virtual en WordPress
En WordPress, la integración es bastante sencilla. Seleccionas la opción WordPress en Tours, copias el código y lo pegas en la página donde quieres que aparezca el tour. No necesitas ningún plugin específico para tours virtuales, siempre que tu tema o editor te permita añadir HTML personalizado.
- En Gutenberg, añades un bloque HTML personalizado y pegas el código.
- En Elementor, usas el elemento HTML y colocas el código en la sección deseada.
- En Divi, utilizas el módulo de código.
- En WPBakery, puedes usar un elemento para HTML sin formato o código personalizado.
- En el editor clásico, cambias a la vista Texto / HTML e insertas el código donde lo necesites.
Merece la pena prestar atención al espacio donde colocas el tour. Si lo metes en una sección demasiado pequeña, la experiencia no se verá bien. En escritorio, una altura de unos 600 px suele ser un buen punto de partida, y en móvil conviene revisar la página antes de publicarla.
Integrar un tour virtual en Wix
En Wix, seleccionas la opción Wix en Tours y copias el código generado. Después accedes al editor de Wix y añades un elemento de integración HTML en la zona de la página donde quieres que aparezca el tour.
- Abre la página deseada en el editor de Wix.
- Añade un elemento nuevo desde el menú +.
- Elige la sección de integración o código personalizado.
- Selecciona el elemento HTML.
- Pega el código generado por Tours para Wix.
- Ajusta el ancho y la altura para escritorio y móvil.
- Publica la página y prueba el tour en el sitio en vivo.
Si el tour aparece recortado en Wix, en la mayoría de los casos el problema es el tamaño del elemento HTML, no el código de Tours. Amplía la zona donde has colocado el tour, revisa la versión móvil y asegúrate de haber publicado la última versión de la página.
Integración en React, Angular, Webflow, Squarespace o HTML
Si tu sitio no está en WordPress ni en Wix, elige la opción que mejor se adapte a tu proyecto. Para un sitio desarrollado desde cero, la opción HTML suele ser suficiente. Para aplicaciones modernas, puedes usar el código para React o Angular.
- React / Next.js: usa el código para React y colócalo en el componente donde quieres que aparezca el tour.
- Angular: usa el código para Angular en la plantilla del componente correspondiente.
- Webflow: añade un elemento de integración y pega el código HTML de Tours.
- Squarespace: añade un bloque de código y pega la variante HTML.
- Shopify: coloca el código en una sección HTML personalizada o en una plantilla de página, según el tema que uses.
- HTML puro: inserta el código directamente en el lugar donde quieres que se cargue el tour.
Si tu plataforma no permite código personalizado, puedes usar el enlace público del tour o el código QR generado por Tours. Aun así, si tienes la posibilidad, la integración directa es la mejor opción para páginas comerciales, porque el visitante permanece junto a la oferta, el formulario o el botón de reserva.
¿Cómo crear el tour antes de integrarlo?
Antes de llegar al código de integración, necesitas tener un tour publicado. En Tours, la creación del tour se hace de forma visual: subes las escenas 360°, las organizas y añades los puntos interactivos que necesitas.
- Crea tu cuenta en getours.app y accede a la aplicación Tours.
- Abre Mis Tours y pulsa el botón para crear un nuevo tour.
- Completa el nombre del tour y la categoría; opcionalmente puedes añadir ubicación, precio o etiquetas.
- Sube la primera escena 360° y dale un nombre claro.
- En el editor, añade escenas adicionales, puntos de navegación, información, imágenes, vídeo, enlaces externos y grupos de escenas.
- Si quieres vincular ciertos puntos al sistema de reservas, puedes organizarlos con etiquetas internas.
- Publica el tour y elige la visibilidad adecuada.
- Tras publicarlo, vuelve a Mis Tours, abre el menú de tres puntos y selecciona Integración.
En resumen, el editor es donde construyes la experiencia 360°, y la ventana de integración es desde donde publicas el tour en tu web y controlas dónde puede mostrarse.
¿Puedes tener reservas en el tour integrado?
Sí. Si has configurado las reservas integradas en Tours, funcionan también en el tour integrado en tu web. El visitante puede explorar el espacio y enviar una reserva o una solicitud sin salir de la página.
- Reserva a nivel de tour: puedes mostrar un botón de reserva disponible durante todo el recorrido virtual.
- Reserva a nivel de escena: puedes activar la reserva solo en determinadas habitaciones o zonas.
- Reserva a nivel de grupo: puedes agrupar varias escenas, útil para tipos de habitaciones, apartamentos o espacios distintos.
- Reserva mediante punto interactivo: un punto del tour puede abrir la ventana de reserva para una mesa, una habitación, un espacio o una visita.
- Reservas por etiquetas: varios puntos interactivos pueden compartir el mismo calendario si están vinculados mediante la misma etiqueta.
Las reservas se configuran por separado, en el Gestor de reservas. Allí estableces la disponibilidad, las reglas de capacidad, la aprobación manual o automática y las personas que gestionan las solicitudes. Después conectas el gestor al tour, a determinadas escenas, a grupos de escenas o a puntos interactivos.
Si ya usas un PMS, un channel manager u otras plataformas de reservas, Tours puede funcionar como un canal visual adicional. En los casos en que la disponibilidad se gestiona en varios lugares, la aprobación manual te ayuda a evitar solapamientos.
¿Qué ve el visitante en el tour integrado?
El visitante ve exactamente la experiencia que has construido en el editor de Tours. No es solo una imagen panorámica colocada en la página, sino una visita virtual interactiva que puede incluir navegación, información, enlaces, reservas integradas y estadísticas de uso en segundo plano.
- Escenas 360° que el visitante puede girar en todas las direcciones.
- Navegación entre habitaciones o zonas mediante puntos interactivos.
- Puntos informativos con texto, imágenes o vídeo.
- Enlaces externos a menús, catálogos, páginas de producto o formularios.
- Botón de reserva o puntos interactivos que abren el proceso de reserva.
- Contenido en varios idiomas, si lo has configurado en el tour.
- Estadísticas de uso sobre visitas, escenas consultadas e interacciones.
¿Por qué no se muestra el tour en la web?
Si has pegado el código en tu web pero el tour no aparece, no significa necesariamente que la integración esté rota. En la mayoría de los casos falta alguna configuración o el código se ha colocado en un lugar que no lo muestra correctamente.
- Comprueba que el tour está publicado. Un tour sin publicar no aparecerá correctamente en la web.
- Verifica que la integración está activa en Mis Tours → menú de tres puntos → integración.
- Revisa los dominios permitidos. El dominio de tu sitio debe estar en la lista aceptada.
- Asegúrate de haber elegido la variante de código correcta: WordPress para WordPress, Wix para Wix, React para React, Angular para Angular y HTML para el resto de casos.
- Si usas Wix o un constructor visual, aumenta la altura del elemento donde has colocado el tour.
- Comprueba que tu plataforma permite código HTML o código externo. Algunos planes gratuitos pueden tener limitaciones.
- Publica la página después de pegar el código. A veces el tour aparece en la vista previa pero no en el sitio en vivo si los cambios no se han publicado.
La comprobación más rápida es volver a la ventana de integración, verificar que la integración está activa, que el dominio está permitido y que el código elegido corresponde a tu plataforma. En muchos casos el problema se resuelve sin tocar nada en el tour.
Comparativa con otras plataformas de tours virtuales
Muchas plataformas de tours virtuales ofrecen alguna forma de integración en web. La diferencia aparece cuando quieres algo más que mostrar el tour: control sobre dominios, reservas integradas, estadísticas de uso, contenido en varios idiomas u opciones de código para distintas tecnologías.
| Característica | Tours (getours.app) | Matterport | Kuula | Roundme |
|---|---|---|---|---|
| Código de integración en web | ✅ HTML, React, Angular, WordPress y Wix | ✅ Disponible | ✅ Disponible | ✅ Disponible |
| Dominios permitidos para la integración | ✅ Configurables desde la ventana de integración | ⚠️ Depende del plan y la configuración | ⚠️ Depende del plan y la configuración | ⚠️ Depende del plan y la configuración |
| Activar o desactivar por tour | ✅ Control independiente para cada tour publicado | ⚠️ Depende de la configuración del tour | ⚠️ Depende de la configuración del tour | ⚠️ Depende de la configuración del tour |
| Reservas integradas en el tour | ✅ Disponibles en Tours, también en tours integrados en web | ❌ No es la dirección principal | ❌ No es la dirección principal | ❌ No es la dirección principal |
| Puntos interactivos | ✅ Navegación, información, reservas y enlaces externos | ✅ Disponibles | ✅ Disponibles | ✅ Disponibles |
| Estadísticas de uso | ✅ Disponibles en el panel de Tours | ✅ Según el plan | ⚠️ Según el plan | ⚠️ Según el plan |
| Contenido multilingüe | ✅ Configurable en Tours | ⚠️ Limitado o indirecto | ⚠️ Limitado o indirecto | ⚠️ Limitado o indirecto |
| Código QR para el tour | ✅ Generado automáticamente | ⚠️ Según la configuración | ⚠️ Según la configuración | ⚠️ Según la configuración |
En Tours, la idea no es solo colocar una panorámica en tu web, sino convertir el recorrido virtual en una parte útil de tu página: presentación, interacción, reserva, solicitud de información o análisis del interés de los visitantes.
Preguntas frecuentes
¿Cómo obtengo el código de integración de mi tour virtual en Tours?
Una vez que el tour está publicado, accedes a la página Mis Tours, pulsas en el menú de tres puntos junto al tour y seleccionas integración. En la ventana que se abre puedes activar la integración, configurar los dominios permitidos y elegir el código para HTML, React, Angular, WordPress o Wix.
¿Tengo que publicar el tour antes de integrarlo en mi web?
Sí. Primero creas y publicas el tour, luego vas a la página Mis Tours y abres la ventana de integración. Desde ahí copias el código adecuado para tu sitio web.
¿Qué son los dominios permitidos en la integración del tour virtual?
Los dominios permitidos son los sitios web en los que el tour puede mostrarse. Por ejemplo, puedes permitir que aparezca solo en el dominio de tu hotel, restaurante o agencia. Así tienes mayor control sobre dónde se utiliza el tour.
¿Puedo desactivar la integración sin eliminar el tour?
Sí. Desde la ventana de integración puedes detener la visualización del tour en sitios externos. El tour permanece en tu cuenta y puedes reactivarlo cuando quieras.
¿Funciona el código de integración en WordPress?
Sí. Seleccionas la opción WordPress en Tours y pegas el código en un bloque HTML, elemento HTML o módulo de código, según el editor que uses: Gutenberg, Elementor, Divi, WPBakery o el editor clásico.
¿Funciona el código de integración en Wix?
Sí. Seleccionas la opción Wix en Tours, luego colocas el código en un elemento de integración HTML del editor de Wix. Después ajustas el tamaño del elemento y publicas la página.
¿Qué elijo si tengo un sitio personalizado, React o Angular?
Para un sitio personalizado elige HTML. Para React o Next.js elige la opción React. Para Angular elige la opción Angular. Tours te muestra el código correspondiente en cuanto seleccionas la plataforma.
¿El tour integrado se actualiza automáticamente cuando hago cambios en Tours?
Sí. Si modificas escenas, puntos interactivos, textos u otros ajustes en el editor de Tours, los cambios se reflejan también en el tour integrado en tu web. Normalmente no necesitas copiar el código de nuevo.
¿Puedo integrar un tour virtual con reservas en la web de un hotel?
Sí. En Tours puedes conectar las reservas integradas al tour completo, a una escena, a un grupo de escenas o a un punto interactivo. Para hoteles, esto puede ser útil para habitaciones, recepción, restaurante o salas de eventos.
¿Puedo integrar un tour virtual de un inmueble o para solicitar una visita?
Sí. El tour puede colocarse en la página de la propiedad, y los puntos interactivos pueden dirigir al visitante hacia una solicitud de visita, un formulario de contacto o una reserva de cita.
¿Por qué no aparece el tour integrado en mi web?
Comprueba que el tour está publicado, que la integración está activa, que el dominio de tu sitio está permitido y que has copiado la variante de código correcta. En Wix o en constructores visuales, revisa también el tamaño del elemento HTML, porque un espacio demasiado pequeño puede hacer que el tour parezca recortado o invisible.
¿Puedo añadir varios tours virtuales en el mismo sitio web?
Sí. Cada tour publicado tiene su propio código de integración y su propia configuración. Puedes tener tours distintos en páginas diferentes, por ejemplo para habitaciones, restaurante, recepción, showroom o salas de eventos.
¿Puedo usar un código QR en lugar del código de integración?
Sí. Tours puede generar un código QR para los tours publicados. El código QR es útil para materiales impresos, recepciones, folletos o carteles. Para la web, la integración directa suele ser mejor opción, porque el visitante puede explorar el tour sin abandonar la página.
¿Necesito un desarrollador para integrar el tour?
En la mayoría de los casos, no. En WordPress y Wix puedes añadir el código desde el editor visual. Para sitios a medida, React o Angular, es más adecuado que lo instale un desarrollador, pero el código ya está generado por Tours.
Si quieres probar la integración, puedes empezar con un tour sencillo. Creas la cuenta, publicas el primer tour, accedes a Mis Tours, abres la integración y copias el código para tu plataforma. En pocos minutos puedes tener un recorrido virtual 360° visible directamente en tu web, con puntos interactivos, reservas integradas y estadísticas de uso listas para el mundo real.
