Booking Website: Widget Calendario – Hostaway

Il nuovo motore di prenotazione offre funzionalità come upselling, ricerca avanzata e configurazione rapida. Tuttavia, a causa delle sue opzioni di personalizzazione intrinsecamente limitate, potrebbe non essere un sostituto completo per siti web creati su misura. Inoltre, potresti voler consentire agli ospiti di prenotare le tue inserzioni senza lasciare il tuo sito web.

Il widget calendario incorporabile è un codice che può essere inserito in un sito web per visualizzare un calendario simile a quello presente nelle pagine delle inserzioni del motore di prenotazione. Ha opzioni di stile e personalizzazione. Quando gli ospiti cliccano sul pulsante di azione, vengono indirizzati alle pagine di checkout o di richiesta di una specifica inserzione, secondo le impostazioni specifiche di Hostaway.

Consente solo un widget calendario per pagina.

Come configurarlo:

Per utilizzare il widget del calendario, è necessario avere un motore di prenotazione pubblicato nel tuo account Hostaway

Incorpora il seguente codice nel punto desiderato del tuo sito web. Poiché il widget si collega alla pagina di checkout/richiesta di un annuncio specifico, consigliamo di incorporarlo accanto alle informazioni sull'annuncio

<div id="hostaway-calendar-widget"></div>
<script src="https://d2q3n06xhbi0am.cloudfront.net/calendar.js"></script>
<script>
  window.hostawayCalendarWidget({
    baseUrl: 'https://www.mywebsite.com/',
    listingId: 40467,
    numberOfMonths: 2, // or 1
    openInNewTab: true, // or false
    font: 'Open Sans',
    rounded: true, // or false
    button: {
      action: 'checkout', // or 'inquiry'
      text: 'Book now',
    },
    clearButtonText: 'Clear dates',
    color: {
      mainColor: '#ff0000',
      frameColor: '#000000',
      textColor: 'green',
    },
  })
</script>

Modifica le righe 5-10, 12-13 e 16-18 nel codice secondo i parametri rilevanti:
1. baseUrl: dovrebbe essere l'URL del motore di prenotazione. Può essere un URL holidayfuture o personalizzato. Ad esempio 'https://drakeshome.holidayfuture.com/' (importante includere il carattere ')
2. listingId: l'ID dell'annuncio Hostaway
3. numberOfMonths: può essere 1 o 2. Determina quanti mesi vengono visualizzati nel widget
4. openInNewTab: può essere true o false. Determina se la pagina di checkout/richiesta si aprirà nella stessa scheda (quando impostato su false) o in una nuova (quando impostato su true).
5. font: può essere un nome di font. Vedi l'elenco dei font qui. Determina il font utilizzato nel widget (importante includere il carattere ')
6. rounded: può essere true o false. Determina se il calendario avrà un aspetto arrotondato o quadrato
7. action: può essere 'checkout' o 'inquiry' (importante includere il carattere '). Determina se il pulsante di azione porta alla pagina di checkout o di richiesta dell'annuncio
8. text: determina il testo mostrato sul pulsante di azione ed è importante separare questi
  - Book now(importante includere il carattere ')
  - ButtonText: 'Clear dates', il testo può essere modificato
9. mainColor: un codice colore HEX che influisce sul colore del pulsante di azione. Ad esempio '#cc2dcf' (importante includere il carattere ')
10. frameColor: stesso di mainColor ma per la cornice del widget
11. textColor: stesso di mainColor ma per il testo nel widget
Il widget visualizza un calendario con 1/2 mesi (secondo le impostazioni) in cui viene mostrata la disponibilità dell'annuncio. Il pulsante di azione porta gli ospiti alla pagina di checkout/richiesta dell'annuncio.
Esempi di widget con impostazioni diverse:

Come configurarlo:

Articoli correlati