Widget

Tu botón de reserva, en tu web

Pega una línea en cualquier sitio y aparece un botón «Reservar cita». Al pulsar abre el flow de reserva de SalonNEXUS dentro de un modal — tu cliente no sale de tu web.

Demo en vivo

Esta misma página tiene el widget cargado abajo a la derecha. Pulsa el botón flotante «Reservar cita» — abre el wizard de reserva con datos del salón demo.

↘ Mira la esquina inferior derecha

El botón se ha inyectado al cargar esta página.

Demo apunta a /book/demo-pelu

Cómo embeberlo

Pega esto justo antes del cierre de </body> en tu página, sustituyendo demo-pelu por el slug de tu salón.

<script
  src="https://salonnexus.app/widget.js"
  data-salon="demo-pelu"
  defer
></script>

Modo dev (localhost): si pruebas en local y el iframe de reserva vive en otro puerto que el widget, añade data-app-url con la URL del backoffice:

<script
  src="https://salonnexus.app/widget.js"
  data-salon="demo-pelu"
  data-app-url="https://app.salonnexus.app"
  defer
></script>

Atributos del script

Atributo	Tipo	Descripción
`data-salon`	requerido	Slug del salón (lo encuentras en el backoffice).
`data-label`	opcional	Texto del botón. Default `Reservar cita`.
`data-mount`	opcional	ID o selector CSS donde inyectar el botón en línea. Si se omite, aparece como botón flotante (FAB) abajo a la derecha.
`data-app-url`	opcional	Override del backoffice. Default `https://salonnexus.com`.

API JavaScript (avanzado)

El widget expone window.SalonNEXUS con métodos para abrir/cerrar el modal programáticamente — útil si quieres pegar el botón de reserva en un menú propio en vez de usar el FAB:

window.SalonNEXUS.open();
window.SalonNEXUS.close();
console.log(window.SalonNEXUS.salon); // tu slug

Botón en línea (no FAB)

Si prefieres que el botón aparezca dentro de tu nav o un hero específico, dale al script el atributo data-mount con un selector:

<div id="reservar-aqui"></div>

<script
  src="https://salonnexus.app/widget.js"
  data-salon="demo-pelu"
  data-mount="#reservar-aqui"
  data-label="Pide cita"
  defer
></script>

¿Algo no funciona?

Si el botón no aparece, abre la consola del navegador (F12) y busca un mensaje de [salonnexus]. Los errores comunes son:

Falta data-salon en el script tag.
El slug no existe o el salón está archivado.
data-mount apunta a un elemento que no existe en tu HTML cuando el script se ejecuta. Pon el script con defer o al final del <body>.