Los widgets son piezas de código que puedes insertar fácilmente en tu web para mostrar formularios, calendarios o botones de reserva personalizados. Son compatibles con la mayoría de plataformas web y no requieren conocimientos técnicos complejos para su implementación.
Beneficios principales:
Crear fácilmente elementos interactivos para fomentar la reserva directa.
Personalizar colores, textos y formatos para ajustarlo a tu sitio.
Ofrecer una experiencia de compra rápida y amigable sin necesidad de redireccionar al usuario.
Desde AvaiBook puedes insertar widgets en tu página web para que los viajeros reserven directamente desde tu sitio.
1. Accede a la creación de widgets
En tu panel de AvaiBook, ve a Motor de reservas → Publicar en mi web → Widgets.
En caso de no tener ningún widget creado, el sistema te mostrará automáticamente las opciones disponibles para comenzar.
2. Elige el tipo de widget
Puedes seleccionar entre dos opciones principales:
Calendario de disponibilidad
Formulario (Barra de búsqueda)
Haz clic en Seleccionar tras elegir el tipo.
Widget Calendario
Elige estilo, color y alojamiento asociado.
🔹 Tipo de calendario
Puedes elegir entre diferentes formatos de calendario:
Calendario mensual (opción seleccionada por defecto)
Calendario trimestral
Calendario anual
Calendario matriz
👉 Esto define cuántos meses se mostrarán en el widget visible para el usuario.
🔹 Selección de color
Tienes disponibles 10 colores para personalizar el aspecto del widget. El color seleccionado se aplicará principalmente a los elementos visuales como botones y bordes del calendario.
Colores disponibles:
🔹 Selección de alojamiento
Debes seleccionar a cuál de tus alojamientos deseas asociar este widget. El menú desplegable te permite elegir entre los alojamientos que ya tienes configurados en tu cuenta.
🔹 Vista previa del widget
En el lado derecho, puedes ver una vista previa del calendario tal como se mostrará en tu web, incluyendo:
El mes seleccionado (junio 2025 en la imagen).
Días disponibles (libres) y ocupados, con su respectiva leyenda (blanco = libre, gris = ocupado).
Botón de "RESERVA ONLINE", que los usuarios pueden pulsar para iniciar una reserva.
Guarda la configuración actual del widget y pasa al siguiente paso.
Antes de finalizar la creación del widget, revisa detenidamente la información señalada en el punto 1 de la imagen. En esta sección puedes:
Cambiar el nombre del widget.
Ajustar el ancho y alto del widget general.
Modificar el tamaño del calendario interno.
Activar o desactivar:
El botón de reserva
Fondo transparente
Borde transparente
Personalizar colores:
Fondo, borde, textos
Cabecera y días de la semana
Una vez que hayas verificado o editado estos campos según tus preferencias, haz clic en Guardar (punto 2) para finalizar el proceso y generar el código del widget.
Haz clic en Copiar para obtener el código del widget y pegarlo en tu web.
Widget Formulario (Barra de búsqueda)
Con esta herramienta puedes generar una barra de búsqueda personalizada que permitirá a los viajeros buscar y reservar entre uno o varios de tus alojamientos directamente desde tu página web.
Opciones disponibles en la configuración:
Tipo de búsqueda
Puedes elegir si el buscador funcionará sobre:
Alojamientos individuales
Listados (conjuntos de alojamientos agrupados)
Alojamiento
Elige si deseas mostrar todos los alojamientos o uno específico desde el desplegable.
Resultados
Opciones para mostrar:
Unidades alojativas
Zonas
Filtros visibles en la barra
Decide qué filtros mostrar antes de realizar la búsqueda:
Ninguno
Zonas
Alojamientos
Comportamiento al abrir resultados
Define cómo se abrirá la página de resultados:
En una nueva pestaña
En la misma pestaña
Visualización previa
En el lateral derecho puedes ver diferentes ejemplos del diseño visual del buscador, adaptables al estilo de tu web.
Código HTML para insertar
Al final, puedes copiar el código generado con el botón "Copiar código". Este código debe pegarse dentro del HTML de tu página web, en la ubicación donde quieras que aparezca el buscador.
💡 Este buscador es compatible con todo tipo de webs, incluyendo páginas hechas con WordPress. No se requieren conocimientos avanzados de programación para su uso.
Tras configurar, haz clic en Guardar, asigna un nombre identificativo al widget y define tamaño y colores. Finalmente, pulsa Guardar de nuevo y copia el código generado para insertar en tu web.
Si quieres información más detallada puedes acceder al artículo ➡️ Barra de búsqueda
A tener en consideración:
En caso de que ya cuentes con algún widget creado, al acceder al menú motor de reservas y a la sección 'Publicar en mi web' > 'Widgets', encontrarás en la parte superior derecha el botón para crear uno nuevo.
Cómo editar un widget que esté creado en AvaiBook
Una vez hayas creado un widget en AvaiBook, incluso si ya lo has insertado en tu página web, puedes modificarlo en cualquier momento de forma sencilla directamente desde la plataforma.
Para ello, accede al menú: Motor de reservas > Publicar en mi web > Widgets.
En esta sección, verás el listado completo de los widgets que has creado. A la derecha de cada uno, se muestran diferentes acciones disponibles que te permitirán editar, visualizar/obtener el código o eliminar el widget según lo necesites.
Si quieres información más detallada puedes acceder al artículo ➡️ Cómo editar un widget predefinido en AvaiBook incluso después de insertarlo en tu web
Aprende a tu ritmo y desde cualquier lugar. ¡Únete para crecer juntos!