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. 1Activa "Exponer al plugin" en Recorridos → [tu propiedad] → Plugin y preview.
  2. 2Copia el snippet HTML de esa pantalla (o el de aquí, cambiando el token por el tuyo).
  3. 3Pegalo 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 Recorridos → Plugin.
  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. 1Activa "Exponer al plugin" en Recorridos → [tu propiedad] → Plugin y preview.
  2. 2Copia el snippet JSX — ya trae el style como objeto y allowFullScreen en camelCase.
  3. 3Pegalo 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. 1Activa "Exponer al plugin" en Recorridos → [tu propiedad] → Plugin y preview.
  2. 2Copia las dos líneas: el div data-walko-tour y el script embed.js.
  3. 3Pegalas 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 Recorridos → Plugin → 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 copiala en ese momento (no se vuelve a mostrar completa).
  3. 3Descarga walko-tours.zip.
  4. 4En tu wp-admin: Plugins → Añadir nueva → 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