Embeber un tour

Un tour publicado se puede insertar en cualquier página web, campus virtual o gestor de contenidos.

¿Iframe o web component?

Los dos meten el recorrido dentro de otra web y muestran exactamente lo mismo.

El código de embebido (iframe) es la opción universal: se pega en cualquier sitio que admita HTML, incluidos Moodle, WordPress o Google Sites.
El web component hace lo mismo con una etiqueta más corta, <anda-tour>, que ajusta sola la proporción. Úsalo solo si controlas el HTML de la página y puedes añadir un <script>: muchos editores de aulas virtuales y gestores de contenidos quitan los scripts al guardar.

Para Moodle, con los pasos exactos y la opción de nota por SCORM, véase Insertar en Moodle.

Web component

Pega estas dos líneas en cualquier HTML:

<script src="https://TU-INSTANCIA/embed.js"></script>
<anda-tour slug="mi-tour" title="Mi tour virtual"></anda-tour>

El componente crea el iframe por ti (con pantalla completa, giroscopio y WebXR permitidos) y ocupa el ancho disponible con proporción 16/9. Atributos:

Atributo	Uso
`slug`	Slug del tour publicado en la instancia del script
`src`	URL completa del tour (alternativa a `slug`, para otra instancia o dominio propio)
`aspect`	Proporción, por ejemplo `4/3` o `21/9` (por defecto `16/9`)
`title`	Título accesible del iframe

Iframe clásico

<iframe
  src="https://TU-INSTANCIA/t/mi-tour"
  style="width:100%;aspect-ratio:16/9;border:0;"
  allow="fullscreen; gyroscope; accelerometer; xr-spatial-tracking"
  allowfullscreen
  title="Mi tour virtual"></iframe>

El atributo allow es el que habilita la realidad virtual dentro del iframe: sin xr-spatial-tracking el botón Modo VR aparece pero la sesión no arranca, porque el documento incrustado no tiene permiso para pedirla. La página que embebe debe servirse además por HTTPS. Véase la guía de realidad virtual.

Ambos fragmentos aparecen listos para copiar en Compartir dentro del editor.

API postMessage

El tour embebido acepta y emite mensajes para integraciones avanzadas:

// Controlar el tour
iframe.contentWindow.postMessage({ andarama: "goTo", scene: "sala-2" }, "*");
iframe.contentWindow.postMessage({ andarama: "setView", view: { yaw: 1.2, pitch: 0 } }, "*");
iframe.contentWindow.postMessage({ andarama: "setLang", lang: "en" }, "*");
iframe.contentWindow.postMessage({ andarama: "getState" }, "*");

// Escuchar sus eventos
window.addEventListener("message", (e) => {
  if (e.data?.andarama === "sceneChange") console.log("Escena:", e.data.scene);
  if (e.data?.andarama === "viewChange") console.log("Vista:", e.data.view);
  if (e.data?.andarama === "quizChange") console.log("Quiz:", e.data.state);
});

Restricción de dominios

Si el tour se publica con la visibilidad Restringido a dominios de embebido, solo podrá embeberse desde los dominios de la lista (se aplica con frame-ancestors y comprobación de Referer).

Pilotar el visor ya montado

La página del tour deja la instancia accesible en window.Andarama.instance, de modo que un integrador puede actuar sobre el visor sin volver a montarlo:

const { viewer } = window.Andarama.instance;
viewer.setView({ yaw: 1.2, pitch: 0 });
await viewer.goTo("sala-2");
viewer.vrState();   // { active, mode, hands, openHotspotId, hotspots }

Desde fuera de un iframe usa postMessage (arriba); window.Andarama solo está disponible dentro del documento del visor.