Todas las colecciones
Motor de reservas
Widgets
¿Cómo insertar y editar el widget de búsqueda?
¿Cómo insertar y editar el widget de búsqueda?

Motor de reservas, Barra de búsqueda, widget

Héctor Herrero avatar
Escrito por Héctor Herrero
Actualizado hace más de una semana

Puedes editar y personalizar el widget de búsqueda para que quede perfectamente integrado con el diseño de tu página web.

Desde el menú Motor de reservas > Publicar en mi web, selecciona Barra de búsqueda:

Es posible configurar la barra de búsqueda para que muestre un solo alojamiento o varios agrupados en listados. El listado tiene que estar creado previamente desde el Buscador de alojamientos.

En caso de una barra de búsqueda para un solo alojamiento, puedes escoger si mostrar el resultado en la misma pantalla o abrir el resultado en una nueva pantalla:

En caso de escoger un listado de alojamientos, puedes personalizar varios detalles, como indicado en el punto 2 de la siguiente foto:

Al finalizar, copia la url del widget para configurarla en tu web.

La barra de búsqueda se puede personalizar como en los ejemplos que mostramos a la derecha.

Debes tener en cuenta que la edición requiere ciertos conocimientos técnicos para conocer las propiedades de CSS, ya que si modificas algún parámetro de manera incorrecta tu widget no funcionará.

Ejemplo de código personalizado

Para explicar como editar este widget, consideraremos este código como ejemplo.

<script type="text/javascript" src="http://book.localhost.com/widgets/search/dist/index.js" defer></script><div class="avaibook-search-widget" data-widget-id="1" data-widget-token="Z5jyQHzF8UoDrP7M8Qx8PQ==" data-background-color="#FFFFFF" data-main-color="#1AB394" data-border-radius="3px" data-shadow="0 2px 20px rgb(0 0 0 / 16%)" data-padding="1rem" data-show-accommodation-units="0" data-language="es"></div>

✅ ¿Qué parámetros básicos puedes editar?

  • data-background-color="#FFFFFF"

Es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "transparente".

Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.

  • data-main-color="#1AB394"

Es un propiedad de CSS que define el color principal del widget.

Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.

  • data-border-radius="3px"

Es una propiedad CSS que establece un redondeo de las esquinas. El redondeo puede ser un círculo o una elipse, si el valor es cero, no se redondearán las esquinas del widget.

  • data-shadow="0 2px 20px rgb(0 0 0 / 16%)"

Es una propiedad CSS que define el sombreado del widget.

  • data-padding="1rem"

Es una propiedad CSS define el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). no se permiten valores negativos.

  • data-show-accommodation-units="0"

Permite mostrar tus unidades agrupadas. Es decir, si tienes alojamientos configurados tus alojamientos como alquiler multi-unit o por habitaciones y como completo, es posible que quieras mostrar únicamente las unidades alojativas. Por defecto el valor es 0, si quieres mostrar los resultados según tus unidades alojativas debes configurar el valor 1.

Este parámetro es opcional.

  • data-language="es"

Permite mostrar el widget en 8 idiomas disponibles. Español (es), ingles (en), italiano (it), portugués (pt), francés (fr), alemán (de), neerlandés (nl), catalán (ca) . Sino se especifica por defecto será 'es'.

Este parámetro es opcional.

⚠️ Puedes editar pero con cuidado

  • class="avaibook-search-widget"

Puedes añadir otras clases adicionales, es recomendable tener conocimientos en CSS o apoyarse en un programador con estos conocimientos, ten en cuenta que siempre debes mantener la clase "avaibook-search-widget" para que el widget funcione correctamente.

❌ No está permitido editar

  • data-widget-id="1"

  • data-widget-token="Z5jyQHzF8UoDrP7M8Qx8PQ=="

¿Ha quedado contestada tu pregunta?