Cómo añadir un widget de reserva directa a tu web

Actualizado

¿Estás harto de pagar un 15-20 % de comisión a Airbnb, Booking.com y otras OTA en cada reserva? Con la función Reserva directa de Nowistay puedes aceptar reservas directamente en tu propia web, manteniendo el control total de tu negocio, de la relación con tus huéspedes y de tus ingresos.

Esta guía te acompaña en toda la configuración: ajustar tu widget de reserva, configurar los pagos y los impuestos, integrarlo en tu web y gestionar las reservas directas.

Requisitos previos

Antes de poder usar la Reserva directa, asegúrate de tener:

  • Al menos una propiedad conectada con Nowistay PMS
  • Una suscripción AI Channel Manager activa
  • Una cuenta de Stripe conectada para procesar los pagos

Puedes comprobar y configurar todo esto desde la página de Integraciones de tu panel de Nowistay.

Página de integraciones que muestra la Reserva directa como Activo

Paso 1: accede a la configuración de la Reserva directa

  1. Ve a Integraciones en el menú de la izquierda.
  2. Busca “Reserva directa” en la lista. Debería aparecer como “Activo” si cumples todos los requisitos previos.
  3. Haz clic en “Configurar” para abrir el panel de Reserva directa.

El panel te permite seleccionar una propiedad, elegir un idioma y copiar el código de integración para tu web.

Panel de Reserva directa con el selector de propiedad, el idioma y el código de integración

Paso 2: configura los ajustes de tu widget

Haz clic en el icono de ajustes (el engranaje) en la parte superior derecha del panel de Reserva directa para personalizar tu widget.

Modo de pago

Elige cómo pagan los huéspedes su reserva:

  • Pago completo: el huésped paga el 100 % del importe total en el momento de la reserva.
  • Pago fraccionado: el huésped paga un porcentaje por adelantado (por ejemplo, el 30 %) y el saldo restante se cobra automáticamente a su tarjeta antes de la llegada.

Si eliges Pago fraccionado, puedes configurar:

  • Porcentaje del primer pago (%): el porcentaje que se cobra en el momento de la reserva (entre el 10 % y el 90 %).
  • Días antes de la llegada para el segundo cobro: cuántos días antes del check-in se cobra automáticamente el saldo restante (de 1 a 60 días).

Ajustes del widget con Pago completo seleccionado

Ajustes del widget con Pago fraccionado seleccionado

Apariencia

  • Color principal: elige un color hexadecimal que encaje con tu marca. Se usará en los botones y en los elementos destacados del widget de reserva.
  • Fuente: elige entre Roboto, Inter, Open Sans, Lato, Montserrat o Poppins.

Términos y condiciones

Añade la URL de los términos y condiciones para mostrar una casilla obligatoria en el formulario de reserva. Los huéspedes deberán aceptar tus condiciones antes de completar su reserva.

Haz clic en “Guardar ajustes” cuando hayas terminado.

Paso 3: configura los impuestos

Puedes configurar los impuestos de cada propiedad individualmente. Estos impuestos se calculan y se añaden automáticamente al total de la reserva que ven tus huéspedes.

  1. En el panel de Reserva directa, selecciona la propiedad que quieres configurar.
  2. Haz clic en el botón “Impuestos”.
  3. Verás una lista de los impuestos existentes. Haz clic en Añadir impuesto para crear uno nuevo.

Panel de impuestos con un impuesto existente

Para cada impuesto, configura:

  • Nombre del impuesto: un nombre descriptivo (por ejemplo, “Tasa turística”, “IVA”, “Gastos de limpieza”).
  • Categoría: Tasa turística, Impuesto o Cargo. Elige Tasa turística para el impuesto turístico: solo los importes de Tasa turística se registran como impuesto de la reserva, se muestran en los detalles de la reserva y aparecen en la factura del huésped.
  • Cálculo: Porcentaje (%) o Monto fijo en tu moneda.
  • Valor: la tasa (por ejemplo, 5 para el 5 %, entre 0 y 100) o el importe fijo (por ejemplo, 2,50).
  • Se aplica:
    • Por estancia: se aplica una sola vez a toda la reserva.
    • Por noche: se multiplica por el número de noches.
    • Por huésped por noche: un importe fijo se multiplica por el número de huéspedes y por el número de noches. Un porcentaje se aplica cada noche al precio de la noche dividido entre todos los huéspedes, y se cobra por cada huésped sujeto al impuesto.

Formulario para añadir un impuesto

Ajustes opcionales para las tasas turísticas

Según cómo se aplique el impuesto, aparecen opciones adicionales en el formulario:

  • Niños exentos (Por huésped por noche): los huéspedes menores del límite de edad no pagan. Siguen contando cuando un porcentaje reparte el precio de la noche entre los huéspedes.
  • Tope por persona y noche (Porcentaje, Por huésped por noche, opcional): lo máximo que se cobra por huésped y por noche, como exige la normativa para los alquileres amueblados sin clasificar en Francia.
  • Máx. de noches gravadas (Por noche o Por huésped por noche, opcional): solo se gravan las primeras noches de la estancia, para las ciudades que gravan un número limitado de noches.

El límite de edad se define una sola vez por propiedad en Niños: huéspedes menores de (edad), entre 1 y 25 (18 por defecto). Los huéspedes menores de esta edad cuentan como niños, y el widget de reserva muestra la edad junto al número de niños. Cada impuesto de la lista muestra un breve resumen de sus opciones, como “niños exentos” o “primeras 7 noches”.

Ejemplo: tasa turística de un alquiler sin clasificar en Francia

Una estancia de 4 noches a 200 € la noche para 2 adultos y 2 niños, con un impuesto del 5 % aplicado Por huésped por noche, con un tope de 2,30 € por persona y noche y niños exentos (comprueba la tasa y el tope de tu ciudad):

  • Precio de la noche por huésped: 200 € ÷ 4 huéspedes = 50 €.
  • 5 % de 50 € = 2,50 €, limitado a 2,30 €.
  • Se cobra solo a los 2 adultos: 2 × 2,30 € = 4,60 € por noche.
  • Total de la estancia: 4 × 4,60 € = 18,40 €.

Puedes añadir tantos impuestos como necesites. Todos aparecerán en el desglose de precios que ven tus huéspedes durante el proceso de reserva.

Paso 4: copia el código de integración y elige un idioma

De vuelta en el panel principal de Reserva directa:

  1. Selecciona tu propiedad en el menú desplegable.
  2. Elige el idioma del widget de reserva. Idiomas disponibles: inglés, francés, español, alemán, italiano, neerlandés, portugués, ruso y chino.
  3. Haz clic en el botón “Copiar” junto al código de integración.

El código de integración tiene este aspecto (<REPLACE_WITH_YOUR_TOKEN> será tu propio token):

Para mostrar el widget en otro idioma, basta con cambiar el menú desplegable Idioma: el código de integración se actualiza automáticamente con el language correcto.

Puedes integrar varios widgets en distintos idiomas en páginas separadas de tu web. Por ejemplo, usa un widget en inglés en tu página en inglés y un widget en francés en tu página en francés. Todos usan el mismo token de propiedad, solo con un código de idioma diferente.

Paso 5: añade el widget a tu web

El código de integración funciona en cualquier web que admita HTML personalizado. Así se añade en los creadores de webs más populares:

WordPress

  1. Edita la página en la que quieres que aparezca el widget de reserva.
  2. Añade un bloque “HTML personalizado” (editor Gutenberg) o cambia a la pestaña “Texto” (editor clásico).
  3. Pega el código de integración.
  4. Guarda o publica la página.

Webflow

  1. Abre tu página en el Webflow Designer.
  2. Añade un elemento “Embed” (que se encuentra en “Components” en el panel izquierdo).
  3. Pega el código de integración en el editor de código.
  4. Guarda y publica tu sitio.

Wix

  1. Abre tu página en el editor de Wix.
  2. Haz clic en “Añadir elementos”, luego en “Embed y redes sociales”, “Embed personalizado” y “Insertar un widget”.
  3. Haz clic en “Introducir código” y pega el código de integración.
  4. Redimensiona el elemento para que encaje con el diseño de tu página.
  5. Publica tu sitio.

Squarespace

  1. Edita tu página y añade un nuevo bloque “Código”.
  2. Pega el código de integración.
  3. Haz clic en “Aplicar” y guarda la página.

Cualquier otra web

Si tienes acceso al código fuente HTML de tu web, pega el código de integración donde quieras que aparezca el widget de reserva. El script creará automáticamente un iframe y cargará el formulario de reserva.

Este es un ejemplo de una web de una propiedad con el widget de Reserva directa integrado:

Ejemplo de web de una propiedad con el widget de reserva integrado

Paso 6: configura los descuentos

Puedes configurar descuentos según la duración de la estancia:

  1. Selecciona tu propiedad en el menú desplegable.
  2. Haz clic en el botón “Descuentos”.
  3. Haz clic en “Añadir descuento”.
  4. Elige la duración de la estancia a la que quieres aplicar un descuento (de 2 noches a 12 semanas).
  5. Elige el porcentaje de descuento que se aplicará.

Los descuentos se aplican automáticamente al total de la reserva. El descuento se aplica al total de las noches en tarifa neta, antes de añadir los gastos de limpieza y los impuestos. El huésped ve el descuento en el desglose del total.

Un widget para todas tus propiedades

Si gestionas varias propiedades, no necesitas integrar un widget distinto para cada una. El panel de Reserva directa también ofrece un modo “Varios alojamientos” que genera un único widget que muestra todas tus propiedades en una sola página.

Cómo configurarlo

  1. En el panel de Reserva directa, cambia de “Un solo alojamiento” a “Varios alojamientos” en la parte superior del panel.
  2. Selecciona las propiedades que quieres incluir en el widget. Puedes buscar por nombre y usar “Seleccionar todo” para incluirlas todas.
  3. Elige el idioma del widget, haz clic en “Copiar” para obtener el código de integración y añádelo a tu web exactamente como se describe en el Paso 5.

Qué ven tus visitantes

El widget muestra todas las propiedades seleccionadas con su foto, su ciudad, su capacidad y un precio inicial “desde X/noche”, para que los visitantes vean de un vistazo el presupuesto de cada propiedad.

Widget de varias propiedades que muestra todas las propiedades con sus precios iniciales y una barra de búsqueda de fechas

Una barra de búsqueda permite a los visitantes elegir sus fechas de check-in y check-out y el número de huéspedes. Entonces el widget muestra qué propiedades están disponibles en esas fechas, cada una con el precio total de la estancia, para que los visitantes comparen y elijan. Las propiedades demasiado pequeñas para el grupo o que no están libres en esas fechas aparecen claramente marcadas como no disponibles.

Al hacer clic en “Reservar” en una propiedad, se abre su proceso de reserva con las fechas y el número de huéspedes ya rellenados. El huésped revisa el desglose del precio y completa el pago, exactamente igual que con el widget de una sola propiedad. También puede volver a la lista en cualquier momento para elegir otra propiedad.

Los ajustes de apariencia (color y fuente), el modo de pago, los impuestos y los descuentos que has configurado en los pasos anteriores también se aplican a este widget.

Cómo funciona para tus huéspedes

Esta es la experiencia paso a paso de un huésped que reserva directamente en tu web:

1. Consultar la disponibilidad y elegir las fechas

El widget muestra un calendario con las fechas disponibles y los precios por noche. Tu huésped selecciona sus fechas de check-in y check-out. Las fechas no disponibles aparecen automáticamente en gris y se aplican las restricciones de estancia mínima y máxima.

Vista del calendario con las fechas disponibles y sus precios

Fechas seleccionadas con el check-in y el check-out indicados

2. Elegir el número de huéspedes

El huésped selecciona cuántas personas se alojarán, hasta la capacidad máxima que hayas configurado para la propiedad.

Selector del número de huéspedes

3. Revisar el precio e introducir los datos personales

El widget muestra un desglose de precios detallado: la tarifa de cada noche, los descuentos, los gastos de limpieza, los impuestos aplicables y el importe total. Después el huésped rellena sus datos: nombre, apellidos, email, teléfono y, opcionalmente, su dirección.

Un aviso informa al huésped de que las fechas se reservan durante 30 minutos mientras completa la reserva.

Si has configurado una URL de términos y condiciones, el huésped debe marcar la casilla de aceptación antes de continuar.

Desglose de precios y formulario de datos del huésped

Formulario del huésped completado con el botón Reservar y pagar

4. Completar el pago

Tras hacer clic en “Reservar y pagar”, el huésped es redirigido a una página de pago de Stripe segura. Puede pagar con tarjeta de crédito, tarjeta de débito y cualquier otro método de pago que hayas activado en tu cuenta de Stripe (Klarna, Bancontact, iDEAL, etc.).

Página de pago de Stripe con los métodos de pago

5. Reserva confirmada

Una vez completado el pago, todo ocurre automáticamente:

  • La reserva se crea en tu panel de Nowistay.
  • Las fechas se bloquean en todos los canales conectados (Airbnb, Booking.com, etc.) para evitar reservas duplicadas.
  • Se genera una tarea de limpieza automáticamente si tienes activada la automatización de limpieza.
  • Tanto tú como el huésped recibís un email de confirmación con todos los detalles de la reserva.

Crear una reserva directa manual con solicitud de pago

A veces un huésped te contacta directamente (por teléfono, email o redes sociales) y quiere reservar. En lugar de hacerle pasar por el widget de tu web, puedes crear una reserva manual y enviarle una solicitud de pago por email.

Cómo funciona

  1. Ve a la sección Reservas en el menú de la izquierda.
  2. Haz clic en “Añadir reserva”.
  3. Selecciona la propiedad y rellena las fechas, los datos del huésped (el email es obligatorio), los detalles de precio y la moneda.
  4. Marca la opción “Solicitar pago al huésped”.
  5. Haz clic en “Crear”.

Formulario de reserva manual con la opción de solicitud de pago

El flujo de pago

  • El huésped recibe un email con un enlace de pago seguro.
  • La reserva aparece con el estado de pago pendiente en tu panel.
  • El enlace de pago es válido durante 35 minutos. El huésped hace clic en él y paga en una página de pago de Stripe segura.
  • Una vez pagada, la reserva se confirma automáticamente: las fechas se bloquean en todos los canales y se crean las tareas de limpieza.

Si el pago caduca

Si el huésped no completa el pago a tiempo, el enlace caduca. Puedes generar un nuevo enlace de pago desde los detalles de la reserva. El huésped recibirá un email nuevo con un enlace actualizado. Puedes hacerlo tantas veces como haga falta hasta que el huésped complete el pago.

¿Listo para poner tu alojamiento en piloto automático?

Únete a más de 1.000 gestores de alojamientos que ahorran horas cada semana con la comunicación con huéspedes impulsada por IA.