Integrar el tour virtual de Casavo Virtual Tools en los anuncios de tu web o portal es muy sencillo. Puedes elegir entre diversas modalidades de integración:
- Integrar un iframe para mostrar el tour al cargar la página (opción recomendada).
- Integrar un iframe pero mostrarlo solo después de que el usuario haga click en un botón.
- Integrar nuestro widget que, una vez pulsado, mostrará una ventana delante del anuncio.
Integrar un iframe para mostrar el tour al cargar la página
Es la modalidad más simple, práctica y funcional para integrar Casavo Virtual Tools. Escoge un área de la página adaptada (como el bloque que aloja las imágenes o una eventual cabecera) e integra el iframe con este código (sustituye el contenido de scr por la URL de tu tour virtual).
<iframe src=”https://viewer.realisti.co/bhVQVk/?viewMode=embed” width=”900px” height=”450px” allowfullscreen>
La visita virtual se abrirá automáticamente al cargar la página. Puedes personalizar las dimensiones del iframe a tu gusto pero atendiendo al apartado de diseño. Introduce siempre la opción allowfullscreen para permitir al usuario utilizar esta modalidad.
Atención: incluye siempre el parámetro viewMode=embed para permitir al visor saber que esta embed en un sitio web y realizará el proceso de carga más rápido.
Integrar un iframe pero mostrarlo solo después de que el usuario haga click en un botón.
Si prefieres puedes mostrar el iframe con la visita virtual solo cuando el usuario decida verlo, puedes elegir cargar Realisti.co al presionar un botón con un link.
Un ejemplo sencillo de código html para implementar la carga diferida es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Toggle Iframe on Button Click</title>
<style>
#myIframe {
display: none; /* Hide iframe initially */
width: 100%;
height: 400px;
border: 2pxsolid#ccc;
}
</style>
</head>
<body>
<h1>My Portfolio</h1>
<button id="toggleIframeBtn">Toggle Iframe</button>
<iframe id="myIframe" src="LINK DE VISITA VIRTUAL" width="900px" height="450px" allowfullscreen title="My Iframe"></iframe>
<script>
document.getElementById('toggleIframeBtn').onclick = function() {
var iframe = document.getElementById('myIframe');
if (iframe.style.display === "none") {
iframe.style.display = "block"; // Show the iframe
} else {
iframe.style.display = "none"; // Hide the iframe
}
};
</script>
</body>
</html>
NOTA: el ejemplo anterior tiene únicamente fines explicativos y no debe considerarse una solución plug and play.
Parámetros del viewer
El visualizador de Casavo Virtual Tools expone una serie de opciones de configuración que favorecen la flexibilidad de integración y personalización de la visita virtual. Se gestiona a través de la valorización de los siguientes parámetros en el URL.
| Parámetro | Valores | Descripción | Default |
| viewMode | embed | Este parámetro permite esconder los elementos secundario de la interfaz del visor. Debe incluirse automáticamente en caso de embed en un iframe. | embed |
| hideLogo | true / false | Este parámetro permite, a los clientes autorizados, a esconder la marca de agua. | false |
| defaultTarget | true / false | Este parámetro permite personalizar ciertos colores (solo en casos concretos). | false |
| hideFullscreen | true / false | Este parámetro permite esconder el icono de Fullscreen. | false |
| hideTutorial | true / false | Este parámetro permite esconder el tutorial inicial mostrado al inicio de la visita. | false |
| alwaysAutorotate | true / false | Este parámetro permite modificar la función de rotación. | false |
Diseño
El viewer de Casavo Virtual Tools ha sido diseñado para ser compatible con el mayor número de dispositivos posible y para ser integrado en un iframe que soporte la mayor parte de resoluciones posibles. La altura mínima recomendada es de 450px. El ratio anchura/altura del viewer máximo recomendado es de 2:1.
Por ejemplo:
- Width: 900px; Height: 450px - OK
- Width: 600px; Height: 450px - OK
- Width: 1200px; Height: 450px - KO
Opción a pantalla completa
El usuario puede decidir visualizar la visita virtual a pantalla completa en cualquier momento haciendo click en el icono situado en la parte superior derecha. Para poder usar esta función es necesario especificar el atributo allowFullscreen en el iframe.
Exit link
El visualizador integrado no proporciona links que lleven a páginas externas.
Rendimiento
El visualizador integrado es regularmente actualizado y viene sometido periódicamente a tests de rendimiento para poder garantizar el mejor uso y compatibilidad con todos los navegadores.
Navegadores soportados
Nuestro visualizador integrado soporta los siguientes navegadores:
- Mozilla Firefox 10 o superior.
- Google Chrome 20 o superior.
- Apple Safari 5.1 o superior.
- Microsoft Internet Explorer 10 o superior.
- Apple Safari mobile (iOS 7.1 o superior).
- Android default browser (Android 4.0 o superior).
- Google Chrome for Android / iOS 20 o superior.
Dominios y endpoints
- static1.realisti.co
- static2.realisti.co
- media.realisti.co
- www.googletagmanager.com
- www.google-analytics.com
Cookies
El visualizador integrado puede salvar las siguientes cookies:
| Nome | Dominio |
| sessionid | .realisti.co |
| _ga | .viewer.realisti.co |
| _gid | .viewer.realisti.co |
| _gat_UA-73768116-2 | .viewer.realisti.co |
Puedes consultar nuestra política de privacidad y cookies en el siguiente enlace: realisti.co/privacy