Pode editar e personalizar o widget de pesquisa para que esteja perfeitamente integrado com o design do seu website.
Por favor lembrem-s que a edição requer algum conhecimento técnico das propriedades do CSS, porque se modificar qualquer parâmetro incorrectamente, o widget não funcionará.
Exemplo de código
Para explicar como editar este widget, vamos considerar este código como um exemplo.
<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>
✅ Que parâmetros básicos se podem editar?
data-background-color="#FFFFFF"
É uma propriedade CSS que define a cor de fundo de um elemento, seja um valor de cor ou a palavra "transparente".
A cor de fundo pode ser especificada como um valor hexa-decimal ou RGB regular, ou utilizando uma das palavras-chave de cor pré-definidas.
data-main-color="#1AB394"
É uma propriedade do CSS que define a cor principal do widget.
A cor de fundo pode ser especificada como um valor hexa-decimal ou RGB regular, ou utilizando uma das palavras-chave de cor pré-definidas.
data-border-radius="3px"
É uma propriedade do CSS que estabelece um arredondamento dos cantos. O arredondamento pode ser um círculo ou uma elipse, se o valor for zero, os cantos do widget não serão arredondados.
data-shadow="0 2px 20px rgb(0 0 0 / 16%)"
É uma propriedade do CSS que define o sombreado do 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-lhe mostrar as suas unidades agrupadas. Ou seja, se tiver alojamentos configurados como unidades múltiplas ou aluguer de quartos e como completos, poderá querer mostrar apenas as unidades de alojamento. Por defeito o valor é 0, se quiser mostrar os resultados de acordo com as suas unidades de alojamento deve definir o valor para 1.
Este parâmetro é opcional.
data-language="pt"
Permite que o widget seja exibido em 8 línguas disponíveis. Espanhol (es), inglês (en), italiano (it), português (pt), francês (fr), alemão (de), holandês (nl), catalão (ca). Se não for especificado, o padrão será 'pt'.
Este parâmetro é opcional.
⚠️ Pode editar mas tenha cuidado
class="avaibook-search-widget"
Pode acrescentar outras classes adicionais, é aconselhável ter conhecimentos em CSS ou contar com um programador com esses conhecimentos, não se esqueça que deve sempre manter a classe "avaibook-search-widget" para que o widget funcione correctamente.
❌ A edição não é permitida
data-widget-id="1"
data-widget-token="Z5jyQHzF8UoDrP7M8Qx8PQ=="
Neste video pode ver como inseri-lo na sua página web: