Guía de integración

Ponle tu recorrido a cualquier sitio

Elige cómo integras: WordPress, HTML plano, React/Next.js, o el script con auto-altura. Mismo recorrido, mismo link, cuatro formas de pegarlo.

HTML universalReact / Next.jsScript (loader)WordPress
HTML universal

Wix, Squarespace, Webflow, o cualquier sitio que acepte HTML.

  1. 1Entra al recorrido → "Insertar en tu web" y activa "Publicar este recorrido".
  2. 2Copia el snippet HTML de esa pantalla (o el de aquí, cambiando el token por el tuyo).
  3. 3Pégalo en tu página, donde quieras que aparezca el recorrido.
  4. 4Si tu sitio vive en un dominio de terceros, compra una licencia para ese dominio en "Insertar en tu web" → "Licencias de dominio".
  5. 5Recarga la página — el recorrido carga inline, sin necesitar un click previo.
HTML universal
<iframe
  src="https://walko360.com/embed/5ef5b9e2ac792fd2aeb2340b00ce45bb"
  style="width:100%;height:500px;border:0;border-radius:12px;"
  loading="lazy" allowfullscreen
  allow="accelerometer; gyroscope; magnetometer; fullscreen; xr-spatial-tracking"
  title="Casa de Muestra Walko360 — Recorrido virtual 360°"
></iframe>

Ejemplo en vivo

React / Next.js

JSX listo para pegar en cualquier componente.

  1. 1Entra al recorrido → "Insertar en tu web" y activa "Publicar este recorrido".
  2. 2Copia el snippet JSX — ya trae el style como objeto y allowFullScreen en camelCase.
  3. 3Pégalo dentro de cualquier componente. Es sólo markup, no necesita "use client".
  4. 4Ajusta el style a tu propio sistema de diseño si quieres (Tailwind, CSS modules, etc.).
  5. 5Si tu sitio vive en un dominio de terceros, compra una licencia para ese dominio.
React / Next.js
<iframe
  src="https://walko360.com/embed/5ef5b9e2ac792fd2aeb2340b00ce45bb"
  style={{ width: '100%', height: 500, border: 0, borderRadius: 12 }}
  loading="lazy"
  allowFullScreen
  allow="accelerometer; gyroscope; magnetometer; fullscreen; xr-spatial-tracking"
  title="Casa de Muestra Walko360 — Recorrido virtual 360°"
/>

Ejemplo en vivo

Script (loader)

Auto-altura ✨ — recomendado si no quieres adivinar un alto fijo.

  1. 1Entra al recorrido → "Insertar en tu web" y activa "Publicar este recorrido".
  2. 2Copia las dos líneas: el div data-walko-tour y el script embed.js.
  3. 3Pégalas donde quieras — funciona incluso si el div se inserta dinámicamente después (SPA).
  4. 4El alto se ajusta solo al ancho disponible, no hace falta un height fijo.
  5. 5Si tu sitio vive en un dominio de terceros, compra una licencia para ese dominio.
Script (loader)
<div data-walko-tour="5ef5b9e2ac792fd2aeb2340b00ce45bb" data-height="500"></div>
<script src="https://walko360.com/embed.js" async></script>

Ejemplo en vivo

WordPress

Plugin oficial con shortcode y bloque de Gutenberg.

  1. 1Compra una licencia para tu dominio real de WordPress en "Insertar en tu web" → "Licencias de dominio" → "Comprar licencia".
  2. 2Importante: la license key completa no se muestra sola después de pagar — haz clic en "Rotar key" una vez para verla en texto plano y cópiala en ese momento (no se vuelve a mostrar completa).
  3. 3Descarga walko-tours.zip.
  4. 4En tu wp-admin: Plugins → Añadir nuevo → Subir plugin → elige el zip → Instalar ahora → Activar.
  5. 5Ve a Ajustes → Walko Tours (ojo: está dentro de "Ajustes", no es un menú propio) y pega tu license key → Guardar cambios.
  6. 6Confirma que diga "Licencia válida ✔" y que tu recorrido aparezca listado con su shortcode.
  7. 7Crea o edita una página, pega el shortcode [walko_tour token="..." height="500"], o usa el bloque de Gutenberg "Walko Tour" desde el buscador de bloques.
Descargar walko-tours.zip

La pantalla completa en WordPress depende de la plantilla de página de tu tema (ancho completo / en blanco) — a diferencia de HTML/React/Script, aquí no es 100% controlable por CSS propio.

WordPress
[walko_tour token="5ef5b9e2ac792fd2aeb2340b00ce45bb" height="500"]

Ejemplo en vivo