-

Welcome to...Agriturismo Baratti

Book online (widget embedded)

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 nel punto della pagina HTML in cui vuoi visualizzare il widget:

<script data-quovai-location-tag="agriturismobaratti" data-quovai-lang="en" data-quovai-widget="embedded" 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: embedded, crea i campi di scelta arrivo, scelta partenza e il bottone di verifica disponibilità nel punto del sito dove viene inserito il codice

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="embedded" src="https://booking.quovai.com/openworld/widget.min.js" async></script>
</div>

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