Skip to main content

​
Acceder al Módulo Booking Search Widget

Para comenzar a configurar el buscador de reservas, primero debes acceder al área de componentes globales del encabezado (Header).
1

Ingresa al editor

Abre el editor de cualquier página de tu sitio web.
2

Selecciona la pestaña Header

Haz clic en la pestaña “Header” ubicada en la parte superior del editor. Al hacerlo, se activará el área de trabajo correspondiente a los componentes globales superiores.
Imagen

​
Agregar el Módulo

Una vez en la sección del Header, puedes agregar el widget del buscador de reservas.
1

Abre el panel de componentes

Haz clic en el ícono (+) para desplegar el panel de todos los componentes disponibles.
Imagen
2

Busca el widget

En el campo de búsqueda del panel, escribe “Booking” o “boo” para filtrar y encontrar rápidamente el módulo.
3

Arrastra el módulo al Header

Localiza el módulo “Booking Search Widget” y arrástralo al área de trabajo del Header. La ubicación ideal es debajo del Hero o de la barra de navegación principal.
Imagen
Este módulo está diseñado exclusivamente para el Header. No podrás agregarlo en el cuerpo de una página (Page) ni en el pie de página (Footer).

​
Configurar el Módulo

Después de agregar el widget, puedes personalizar su apariencia y funcionalidad.
1

Selecciona el componente

Pasa el cursor sobre el Booking Search Widget que acabas de agregar al Header.
2

Abre el panel de edición

Haz clic en el botón verde de Editar que aparece sobre el componente. Se abrirá un panel lateral con todas las opciones de configuración disponibles.
Imagen

​
Elementos del Buscador

El Booking Search Widget incluye los campos esenciales para que tus clientes puedan iniciar una reserva:
  • Selector de fechas: Campos para Check-in y Check-out.
  • Cantidad de huéspedes: Selector para adultos y, opcionalmente, niños.
  • Código promocional: Un campo para aplicar descuentos.
  • Botón de búsqueda: El botón que inicia la consulta de disponibilidad.
Imagen

​
Configuración Visual

Desde el panel de edición, puedes ajustar el diseño del widget para que se alinee con la identidad de tu marca. Las opciones pueden incluir:
  • Colores: Personaliza los colores del botón principal y del texto.
  • Estilo: Modifica la apariencia del contenedor, como bordes o sombras.
  • Espaciado: Ajusta los márgenes y rellenos para integrarlo perfectamente en tu diseño.
Imagen
Para maximizar la visibilidad y facilitar el proceso de reserva directa, te recomendamos colocar el Booking Search Widget:
  • Debajo del Hero principal de tu página de inicio.
  • En una posición destacada y visible sin necesidad de hacer scroll (above the fold).
Una buena ubicación mejora significativamente la tasa de conversión.

​
Guardar y Publicar los Cambios

Una vez que estés satisfecho con la configuración, aplica los cambios para que sean visibles en tu sitio web.
1

Guarda los cambios

Haz clic en el botón Guardar cambios para guardar tu progreso en el editor.
Imagen
2

Publica el Header

Presiona el botón Publicar Header. Esto aplicará las modificaciones a todas las páginas de tu sitio web que utilizan este encabezado global.
Imagen
Recuerda que el Header es un componente global. Cualquier cambio que publiques afectará a todas las páginas del sitio.
Antes de finalizar, realiza una última verificación para asegurar una experiencia de usuario óptima:
  • Alineación: Confirma que el buscador esté correctamente alineado con otros elementos del Header.
  • Contraste: Asegúrate de que el botón de búsqueda tenga un buen contraste de color para ser fácilmente identificable.
  • Diseño responsive: Revisa cómo se ve y funciona el buscador en dispositivos móviles.
  • Conexión: Verifica que tu motor de reservas (POS) esté correctamente vinculado al sitio para que el buscador funcione.
  • ¿Cómo agregar el buscador de reservas en FW4?
  • ¿Dónde debe colocarse el Booking Search Widget?
  • ¿Cómo editar el diseño del buscador de reservas?
  • ¿Por qué el Booking Search Widget solo puede usarse en el Header?
  • ¿Cómo publicar los cambios del Header correctamente?