-

Welcome to...Agriturismo Baratti

Book online (widget top bar)

This template shows the varying means of integrating the Quovai booking booking widget into your website. The widget can be inserted in the topbar, as an embedded booking form on any part of your website and as a booking button with popup. For any information relating to the integration of the TuscanyAway widget, do not hesitate to contact us at supporto@quovai.com

Click here for the documentation relating to the integration.


Come integrare il widget?

Copia ed incolla il seguente codice dopo l'apertura del tag <body> della pagina HTML:

<script data-quovai-location-tag="agriturismobaratti" data-quovai-lang="en" data-quovai-widget="topbar" src="https://booking.quovai.com/openworld/widget.min.js"></script>
						

Parametri

  • data-quovai-location-tag: il tag univoco per la struttura assegnato da Quovai booking
  • data-quovai-lang: il codice lingua per il widget, al momento disponibile in inglese (en), tedesco (de) e italiano (it)
  • data-quovai-widget: il tipo di widget: topbar, crea una barra superiore contenente i campi di richiesta disponibilità e prenotazione
  • data-quovai-logo: il tipo di logo Quovai booking di fianco alla form di prenotazione: none (nessun logo), normal (logo orizzontale completo), small (logo piccolo)

Come modificare lo stile dei campi e dei bottoni del widget

I gestori di siti Web possono personalizzare l'aspetto visivo del widget usando i CSS. Le classi del widget Quovai hanno il prefisso "quovai-". Le classi disponibili includono "quovai-container", "quovai-booking-form", "quovai-arrival", "quovai-departure", "quovai-embedded", "quovai-button" e "quovai-topbar". I gestori sono invitati ad usare il loro strumento di analisi web (Chrome Developer Tools, Firebug, ecc) per verificare a quali elementi tali classi CSS vengono applicate. I gestori possono utilizzare le specificità delle regole CSS per effettuare l'override degli stili predefiniti. Per esempio, per sostituire il colore del testo del widget, includere il widget in un div con un id, e utilizzare tale id per realizzare un selettore CSS con elevata selettività (!important):

<div id="myid">
  <script data-quovai-location-tag="agriturismobaratti" data-quovai-widget="topbar" src="https://booking.quovai.com/openworld/widget.min.js" async></script>
</div>

<style>
#myid .quovai-container {
  color: red;
}
</style>