È possibile configurare e personalizzare il widget di ricerca in modo che si integri perfettamente con il design del sito web.
Dal menú Booking Engine > Pubblicare nel mio sito web scegli barra di ricerca
É possibile configurare la barra di ricerca in modo che mostri un singolo alloggio o più alloggi raggruppati in elenchi. L'elenco deve essere precedentemente creato dal motore di ricerca degli alloggi.
Nel caso di una barra di ricerca per una singola struttura ricettiva, è possibile scegliere se visualizzare il risultato nella stessa schermata o se aprire il risultato in una nuova schermata:
Nel caso in cui si scelga un elenco di alloggi, è possibile personalizzare diversi dettagli, come indicato al punto 2 dell'immagine seguente:
Per finire copia la urls del widget da configurare nella tua web.
La barra di ricerca può essere personalizzata come negli esempio mostrati a destra.
La modifica richiede una certa conoscenza tecnica delle proprietà del linguaggio CSS, perché se si modifica qualche parametro in modo errato il widget non funzionerà.
In fondo alla pagina trovai un breve video tutorial per effettuare l'integrazione.
Esempio
Per spiegare come modificare questo widget, consideriamo questo codice come esempio.
✅ Quali parametri di base si possono modificare?
data-background-color="#FFFFFF"
Si tratta di una proprietà del linguaggio CSS che definisce il colore di sfondo di un elemento, può essere il valore del colore che vuoi utilizzare o la parola "transparent".
Il colore dello sfondo può essere specificato come valore RGB esadecimale o regolare, oppure utilizzando una delle parole chiave predefinite per il colore.
data-main-color="#1AB394"
Si tratta di una proprietà del linguaggio CSS che definisce il colore principale del widget.
Il colore dello sfondo può essere specificato come valore RGB esadecimale o regolare, oppure utilizzando una delle parole chiave predefinite per il colore.
data-border-radius="3px"
Si tratta di una proprietà del linguaggio CSS che imposta l'arrotondamento degli angoli. L'arrotondamento può essere un cerchio o un'ellisse; se il valore è zero, gli angoli del widget non saranno arrotondati.
data-shadow="0 2px 20px rgb(0 0 0 / 16%)"
Si tratta di una proprietà del linguaggio CSS che definisce l'ombreggiatura del widget.
data-padding="1rem"
Si tratta di una proprietà del linguaggio CSS che definisce lo spazio di riempimento richiesto su tutti i lati di un elemento. L'area di padding è lo spazio tra il contenuto dell'elemento e il suo bordo. Non sono ammessi valori negativi.
data-show-accommodation-units="0"
Consente di mostrare le unità raggruppate. Ad esempio, se le strutture ricettive sono configurate come affitti di più unità o camere ma anche come unità completa, è possibile che si vogliano mostrare solo le unità ricettive. Per impostazione predefinita, il valore è 0; se si desidera visualizzare i risultati in base alle unità abitative, è necessario impostare il valore su 1.
Questo parametro è opzionale.
data-language="es"
Consente di visualizzare il widget in 8 lingue disponibili. Spagnolo (es), inglese (en), italiano (it), portoghese (pt), francese (fr), tedesco (de), olandese (nl), catalano (ca). Se non viene specificato, il valore predefinito sarà "es".
Questo parametro è opzionale.
Infine:
⚠️ È possibile modificare il codice, ma facendo attenzione:
class="avaibook-search-widget"
È possibile aggiungerne altri, ma mantenendo "avaibook-search-widget" perché il widget funzioni correttamente.
❌ Non è possibile modificare
data-widget-id="1"
data-widget-token="Z5jyQHzF8UoDrP7M8Qx8PQ=="
In questo video ti spieghiamo come integrarlo in pochi passi: