Widget de reserva

El widget coloca tu página de reserva pública dentro de tu propio sitio web. Una etiqueta <script>, sin paso de build, sin clave API: dibuja un iframe que se ajusta a su contenido.

1. Activarlo y autorizar tus dominios

Ajustes de la organización → Reserva pública → Widget de reserva. Activa el widget y enumera los dominios autorizados a mostrarlo — hasta 10.

  • Introduce un nombre de host, opcionalmente con un puerto: villa-suar.com, www.villa-suar.com, localhost:4010. Sin https://, sin ruta, sin comodín.
  • www.villa-suar.com y villa-suar.com son dos dominios distintos: añade los dos si tu sitio responde en ambos.
  • Solo se admiten sitios en https://, salvo localhost, que también funciona en http:// para las pruebas locales. Un dominio sin puerto solo cubre el puerto por defecto.

El widget solo funciona mientras la reserva pública esté abierta. Cerrar un tipo de reserva en la misma pestaña también lo cierra en el widget.

Cualquier sitio que no esté en la lista lo rechaza el propio navegador: la página de reserva envía una política frame-ancestors que solo nombra tus dominios.

2. Pegar el script

Copia el fragmento que muestra la pestaña, o escríbelo tú mismo:

html
<script
  src="https://www.villaslot.io/widget.js"
  data-organization="your-organization-slug"
  data-mode="hourly"
  data-locale="en"
  async
></script>
AtributoValoresPor defecto
data-organizationel slug de tu organizaciónobligatorio
data-modehourly o overnighthourly
data-localeen, fr o esen

El widget aparece exactamente donde está la etiqueta. Para ofrecer los dos tipos, pega dos etiquetas — una por data-mode. Cualquier otro atributo data-* se ignora.

3. Qué pasa al reservar

El cliente reserva dentro del widget. El pago se abre siempre en una pestaña nueva en VillaSlot, nunca dentro del iframe — los datos de la tarjeta nunca se escriben en un marco de tu página. El cliente también recibe el enlace de reserva por email, para poder volver a pagar más tarde.

Cuando se crea una reserva, el script emite un evento villaslot:booking-created en su propio elemento <script>. Úsalo para tus analíticas:

html
<script>
  document
    .querySelector('script[src$="/widget.js"]')
    .addEventListener('villaslot:booking-created', () => {
      // e.g. send a conversion event
    })
</script>

El evento no lleva ningún dato del cliente.

Apariencia

El widget sigue los ajustes de Apariencia de la página pública — tema y color principal — y no el tema de tu sitio web ni el de la cuenta de VillaSlot del visitante. Los cambios se aplican en la siguiente carga, sin modificar el fragmento.