Pon el mapa en tu web

Lo básico

<div id="mapa-centro"></div>
<script src="https://www.wodai.eu/embed.js" data-venue="slug-del-centro" async></script>

Antes, en Ajustes del centro → Webs que pueden mostrar el mapa, añade el dominio de tu web. Si no está en la lista, el navegador no dejará mostrar el mapa (así nadie más puede usar el tuyo).

Opciones

<div id="mapa-centro"></div>
<script
  src="https://www.wodai.eu/embed.js"
  data-venue="slug-del-centro"
  data-floor="ID-DE-LA-PLANTA"
  data-tenant="ID-DE-LA-TIENDA"
  data-view="all"
  data-floors="menu"
  data-route="off"
  data-directory="off"
  data-search="off"
  data-people="on"
  data-theme="dark"
  data-lang="ca"
  data-height="800"
  async
></script>

• data-floor: abre en esa planta.
• data-tenant: abre directamente en una tienda (con su ficha).
• data-theme: light (por defecto) o dark.
• data-lang: es, ca, en…
• data-view="all": abre con todas las plantas apiladas.
• data-floors: cómo va el selector de plantas. Sin él, automático (lista en escritorio, desplegable en el móvil); "menu", desplegable siempre (para muchas plantas); "list", la lista siempre a la vista; "off", sin selector (se queda en la elegida).
• data-route="off", data-directory="off", data-search="off": quitan «Cómo llegar», el directorio o el buscador (por ejemplo, para enseñar solo el mapa).
• data-people="on": gente paseando por los pasillos (familias, mayores, sillas de ruedas).
• data-height: alto en píxeles (640 por defecto).
• data-target: id del contenedor si no es mapa-centro.

Eventos para tu analítica

El contenedor recibe mapa:tenant-selected cuando alguien abre una tienda y mapa:route-started cuando pide una ruta.

<script>
  const mapa = document.getElementById("mapa-centro");
  mapa.addEventListener("mapa:tenant-selected", (e) => {
    // e.detail = { tenantId, name, category }
    gtag("event", "ver_tienda", { tienda: e.detail.name });
  });
  mapa.addEventListener("mapa:route-started", (e) => {
    // e.detail = { tenantId?, name?, target?, accessible? }
    gtag("event", "ruta", { destino: e.detail.name ?? e.detail.target });
  });
</script>