Vai al contenuto principale
Accedi
English (US) Español Français
Menu

Motore di Prenotazione: Barra di Ricerca e Widget Calendario Incorporabili

Victor
  • Aggiornato

Barra di ricerca e widget del calendario incorporabili

Il nostro motore di prenotazione è dotato di funzionalità utili come upselling, ricerca avanzata e configurazione rapida. Tuttavia, potrebbe non servire come sostituto completo per siti web creati su misura. Inoltre, potresti voler offrire ai tuoi ospiti l'opzione di prenotare le tue inserzioni senza dover lasciare il tuo sito web o reindirizzarli al tuo motore di prenotazione. È qui che entrano in gioco i nostri widget del motore di prenotazione. Per saperne di più su come collegare il motore di prenotazione al tuo sito web esistente, dai un'occhiata al nostro webinar.

Widget

Barra di ricerca incorporabile del motore di prenotazione

  1. Per utilizzare la barra di ricerca, è necessario avere un motore di prenotazione pubblicato (pubblicalo andando su impostazioni del motore di prenotazione -> pubblica)

  2. Incorpora il seguente codice nel punto desiderato del sito web (WordPress / Wix ti permettono di incorporare codici HTML)

    mceclip0.png

    <script src="https://d2q3n06xhbi0am.cloudfront.net/widget.js?1640277196"></script>
    <script>
    window.searchBar({
    baseUrl: 'https://UpstatePlace.holidayfuture.com/',
    showLocation: true,
    color: '#cc2dcf',
    rounded: true,
    openInNewTab: true, // or false  
    font: 'Open Sans',
    });
    </script>
    <div id="hostaway-booking-widget"></div>

     

  3. Modifica le righe 4-9 nel codice secondo i parametri rilevanti:

    1. baseUrl: dovrebbe essere l'URL del motore di prenotazione. Può essere un URL holidayfuture o personalizzato. Se è l'URL holidayfuture o un URL di sottodominio personalizzato, dovrebbe apparire come 'https://UpstatePlace.holidayfuture.com/' tuttavia, se è un URL di dominio principale personalizzato, dovrebbe apparire come 'https://www.mydomain.com/' (importante includere il carattere ')

    2. showLocation: può essere true/false. Determina se la barra di ricerca ha o meno un filtro di posizione. L'elenco delle posizioni è preso dal motore di prenotazione (che utilizza la città dell'annuncio come posizione)

    3. color: un codice colore HEX che influisce sul colore del pulsante di ricerca. Ad esempio '#cc2dcf' (importante includere il carattere '). Cerca "HEX color picker" su Google per ottenere il colore HEX che si adatta al tuo sito

    4. rounded: può essere true/false. Determina se la barra di ricerca ha angoli arrotondati o quadrati

    5. openInNewTab: può essere true/false. Determina se i risultati della ricerca si aprono in una nuova scheda o nella corrente

    6. font: determina il carattere del testo nella barra di ricerca. (importante includere il carattere ')

Widget Calendario

Il widget calendario incorporabile è un codice che può essere inserito in un sito web per visualizzare un calendario simile a quello presente nelle pagine di elenco 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 un elenco specifico, in base alle impostazioni specifiche di Hostaway.

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

  2. 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, // o 1
        openInNewTab: true, // o false
        font: 'Open Sans',
        rounded: true, // o false
        button: {
          action: 'checkout', // o 'inquiry'
          text: 'Prenota ora',
        },
        clearButtonText: 'Cancella date',
        color: {
          mainColor: '#ff0000',
          frameColor: '#000000',
          textColor: 'green',
        },
      })
    </script>

     

  3. 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

      • 'Prenota ora' (importante includere il carattere ')

      • "clearButtonText": 'Cancella date', 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

  4. Il widget visualizza un calendario con 1/2 mesi (secondo le impostazioni) dove viene mostrata la disponibilità dell'annuncio. Il pulsante di azione porta gli ospiti alla pagina di checkout/richiesta dell'annuncio

  5. Consente solo un widget del calendario per pagina

  6. Esempi di widget con impostazioni diverse:

widget1.png

widget2.png


Integrazione dei prodotti Hostaway con il tuo sito web

Oltre ai widget di Ricerca e Calendario, gli utenti possono sfruttare la documentazione API di Hostaway per facilitare la sincronizzazione del calendario del loro sito web e l'integrazione dei pagamenti Stripe con la piattaforma Hostaway, permettendo ai loro ospiti di prenotare direttamente attraverso il loro sito web. Questo consente agli utenti di integrare facilmente la funzionalità di prenotazione di Hostaway nel loro sito web esistente, offrendo ai loro clienti la comodità di prenotare direttamente dal loro sito.

Articoli correlati