Motore di prenotazioneConfigurazione del motore

Inserimento di un widget per le prenotazioni sul Suo sito web

Cinque tipi di widget del sito web, sette lingue e una sola riga di codice. Come scegliere la forma più adatta al Suo sito web, personalizzarne lo stile in modo che si armonizzi con il resto e inserirlo nel punto in cui genererà il maggior numero di prenotazioni dirette.

Dove trovarlo
Booking EngineWebsite Widgets
È necessaria l'autorizzazione
booking-engine.widget.edit
Ultimo controllo
15 agosto 2026

La maggior parte degli ospiti che prenotano direttamente con voi inizia dalla Sua pagina web, non dalla Sua pagina di prenotazione. Il widget è ciò che collega le due parti: un campo di ricerca delle date, o semplicemente un pulsante, che si trova sul Suo sito e indirizza l’ospite alla Sua pagina di prenotazione Prostay con le date già inserite. Questa schermata lo genera e Le fornisce l’unica riga di codice necessaria per installarlo.

Che cos’è effettivamente il widget

Si tratta di un singolo tag script. Lo incollate una volta nel Suo sito web e il widget viene visualizzato ovunque lo collochiate. Tutto ciò che scegli in questa schermata viene trasmesso in quell’unica riga, il che comporta due vantaggi: il tuo sviluppatore web non ha praticamente nulla da fare e modificare il widget in un secondo momento richiede semplicemente di copiare una nuova riga, anziché ricostruire nulla.

Il widget non gestisce direttamente le prenotazioni. Raccoglie le date e reindirizza l’ ospite alla Sua pagina di prenotazione, che è l’elemento che personalizzate per definire l’aspetto del Suo Motore di prenotazione . I due elementi vengono configurati separatamente ed è opportuno renderli visivamente simili.

Come è strutturata la schermata

La schermata Website Widgets. Un selettore di lingua type impostato su Horizontal si trova accanto a un selettore di lingua Preferred Widget Language impostato su English, con Customize button text e Button Color sotto di essi. Un pannello “Preview Style” mostra una barra di check-in e check-out con un pulsante dorato Check availability. Sotto di esso, il tag script generato e la domanda “Open booking page in a new window?” impostata su Yes.
Ogni controllo presente in questa schermata è contenuto in un’unica riga di codice in fondo alla pagina.
  1. Tipo di widget. La forma del widget. Cinque opzioni disponibili: questa è l’unica scelta in questa schermata che conta davvero.
  2. Lingua preferita del widget. La lingua in cui è scritto il widget stesso.
  3. Stile di anteprima. Il widget così come apparirà, aggiornato man mano che si apportano modifiche.
  4. Il codice di incorporamento. Cliccateci sopra per copiarlo. È questo che va inserito nel Suo sito web.

I cinque tipi di widget

Sceglie in base allo spazio a disposizione, non a quale appaia migliore su questa schermata. Un widget che deve essere inserito in una colonna stretta apparirà meno gradevole di uno scelto appositamente per lo spazio a sua disposizione.

Il pannello “Stile di anteprima” con il widget “Horizontal”: un campo “Check-in Date” con la data 22/08/2026, un campo “Check-<span translate="no">out Date</span>” con la data 25/08/2026 e un pulsante dorato “Check availability”, tutti disposti su un’unica riga.
Orizzontale. Una sola riga, motivo per cui si adatta a una barra di intestazione e a nulla di più stretto.
TipoDi cosa si tratta e dove va posizionato
Horizontal Sia i campi data che il pulsante in un’unica riga. L’impostazione predefinita e la scelta giusta per uno spazio ampio: sotto un’immagine hero o nella parte superiore di una home page.
Stacked Gli stessi campi disposti verticalmente. Per una barra laterale, una colonna stretta o ovunque la versione orizzontale risulterebbe schiacciata.
Floating bar Una fascia nel colore del Suo marchio che riporta un breve messaggio accanto alle date. È l’unico tipo dotato di un proprio messaggio e di un proprio sfondo, il che lo rende la scelta ideale per una campagna: parcheggio gratuito, prenoti direttamente, terza notte a metà prezzo.
Large Button Un pulsante e nient’altro. Nessuna data: l’ospite le seleziona nella pagina di prenotazione. Utilizzatelo laddove un selettore di date risulterebbe di disturbo, ad esempio nella pagina di descrizione della camera.
Small Button Lo stesso, ma più piccolo. Realizzato per una barra di navigazione, accanto al Suo numero di telefono.
Il pannello "Preview Style" con il widget "Floating bar": una banda blu recante il messaggio "Prenotate direttamente e parcheggiate gratis", un campo "Check-in Date", un campo "Check-<span translate="no">out Date</span>" e un pulsante dorato "Check availability".
La barra mobile è l’unico tipo dotato di un messaggio e di un colore di sfondo propri.
Il pannello “Preview Style” con il widget “Large Button”: un unico pulsante dorato con la scritta “Check availability”, senza campi per la data.
I due tipi di pulsante tralasciano le date e indirizzano direttamente l’ospite alla pagina di prenotazione.

La scelta della lingua

Preferred Widget Language imposta la lingua delle teste del widget: le etichette dei campi e il pulsante. Sono disponibili sette lingue: inglese, tedesco, spagnolo, francese, italiano, portoghese e tailandese, e la scelta viene indicata nel codice di incorporamento come codice di due lettere.

È consentita una sola lingua per widget, pertanto la si deve abbinare alla pagina in cui è inserito piuttosto che ai Suoi visitatori. Se il Suo sito web presenta una pagina in inglese e una in tedesco, utilizzi il codice due volte, una per ciascuna lingua scelta, e inserisca quello corrispondente su ciascuna pagina.

Personalizzazione dello stile in base al Suo sito

La riga di campi con il widget Floating bar selezionato: Customize text con il testo «Prenotate direttamente e parcheggiate gratis», Customize button text con il testo «Check availability», un campo Brand Color impostato su #1643E0 e un campo Button Color impostato su #CD9744, ciascuno con un campione di colore e un pulsante di ripristino.
Vengono visualizzati due campi aggiuntivi per la barra mobile, che scompaiono nuovamente se si cambia il tipo.
CampoCosa modifica
Customize button text Il testo del pulsante. Disponibile per ogni tipo. «Check availability» (Scegli la data) è un’impostazione predefinita più sicura rispetto a «Book now» (Scegli la data), poiché implica un impegno minore ed è più pertinente nelle prime fasi del processo decisionale.
Customize text Solo barra mobile. Il messaggio accanto alle date. Limitevi a poche parole: condivide una singola fascia con due campi data e un pulsante.
Brand Color Solo barra mobile. Lo sfondo della banda. Si reimposta su «#1643E0». Le etichette sulla barra sono bianche, quindi un colore pallido in questo punto le renderebbe illeggibili.
Button Color Il pulsante, in ogni tipo. Si ripristina al valore predefinito #CD9744. Questo è l’unico colore del Suo sito web che non deve mimetizzarsi.

Fa clic su un campo colore per aprire un selettore oppure digitate un valore esadecimale. Il quadrato accanto ad esso mostra il colore e il pulsante blu lo ripristina al valore predefinito.

Nuova finestra o la stessa

Open booking page in a new window? determina se la pagina di prenotazione sostituisce il Suo sito web nella scheda dell’ospite o si apre accanto ad esso.

Yes lascia il Suo sito web aperto dietro la pagina di prenotazione, il che viene percepito come un impegno minore e trattiene un ospite che abbandona la prenotazione sul Suo sito piuttosto che in un luogo indefinito. «No » mantiene tutto in un’unica scheda, il che risulta più ordinato su uno smartphone, dove è facile perdere di vista una seconda scheda. «Sì» è la scelta più comune per un pubblico che utilizza prevalentemente il desktop e la differenza è in ogni caso minima.

Il codice di incorporamento

Il codice di incorporamento generato sotto il titolo «Copi il codice sottostante e lo incolli nel Suo sito web»: un singolo tag script con src https://app.prostay.com/widget/load/demo-hotel/ horizontal?lang=en&newWindow=1, con un'icona di copia alla fine della riga.
Un unico tag script. La chiave della struttura, il tipo di widget, la lingua e l’opzione “nuova finestra” sono tutte contenute nell’URL.

Cliccando sulla riga la si copia. Vale la pena dedicare trenta secondi alla sua lettura, poiché tutto ciò che contiene è frutto delle Sue scelte:

  • demo-hotel è la Sua chiave di struttura, ovvero il modo in cui il widget riconosce quali stanze mostrare.
  • horizontal è il tipo di widget.
  • lang=en è la lingua.
  • newWindow=1 è l’impostazione relativa alla nuova finestra, dove 1 significa Sì e 0 significa No.

Dove inserirlo nel Suo sito web

Inserisca la riga nel codice HTML della Sua pagina, esattamente nel punto in cui desidera che il widget appaia. Nella maggior parte dei sistemi di creazione di siti web ciò significa aggiungere un blocco HTML o un blocco di incorporamento. Il widget si posiziona automaticamente nel punto in cui si trova il tag; pertanto, un tag nel piè di pagina genererà un widget nel piè di pagina.

  1. Sceglie qui il tipo, la lingua e i colori, quindi cliccate su "Save".
  2. Fai clic sul codice per copiarlo.
  3. Nell’editor del Suo sito web, aggiunga un blocco HTML o di codice personalizzato nel punto in cui desidera inserire il widget.
  4. Incolla la riga e pubblica.
  5. Apra la pagina come farebbe un ospite, sia su uno smartphone che su un computer, ed effettui una ricerca reale.

L’unico aspetto che vale la pena testare accuratamente è il passaggio alla pagina di prenotazione. Selezionate le date nel widget, seguite il percorso fino alla pagina di prenotazione e verificate che le date siano state trasferite correttamente e che le camere visualizzate siano quelle previste. Questo è il compito principale del widget ed è l’unica parte che un ospite noterà se non funziona correttamente.

Domande frequenti

  • È necessario un programmatore per installarlo?

    Di solito no. Qualsiasi strumento per la creazione di siti web dotato di un blocco HTML o di incorporamento è in grado di gestirlo, il che include WordPress, Squarespace, Wix e la maggior parte dei fornitori di siti web per hotel. Se il Suo sito è realizzato manualmente, il Suo sviluppatore avrà bisogno di una riga di codice HTML e di circa un minuto.

  • Ho modificato i colori qui. Perché il mio sito web non è cambiato?

    Poiché le impostazioni sono contenute nel codice che ha incollato, copi la nuova riga da questa schermata e sostituisca quella precedente sul Suo sito web. Tutto ciò che compare nel codice di incorporamento, il tipo, la lingua e l'opzione "nuova finestra", funziona allo stesso modo.

  • È possibile inserire widget diversi su pagine diverse?

    Sì. Ne configuri uno, copi il codice, quindi modifichi le impostazioni e lo copi nuovamente. Ogni riga incollata è indipendente, pertanto un widget sovrapposto in una barra laterale e un piccolo pulsante nella barra di navigazione possono coesistere sullo stesso sito. Su questa schermata verrà visualizzata solo l’ultima configurazione che ha salvato.

  • Il widget rallenta il mio sito web?

    Si tratta di un piccolo script che viene caricato dopo la Sua pagina. L’aspetto da verificare non è la velocità, bensì il layout: su uno schermo stretto un widget orizzontale andrà a capo, pertanto La invitiamo a controllare su un telefono qualsiasi pagina che ne contenga uno prima di considerarla completa.

  • Le date nell’anteprima si riferiscono alla prossima settimana. Da dove provengono?

    Si tratta solo di esempi illustrativi, pertanto l’anteprima non mostra una casella vuota. Non viene effettuata alcuna ricerca con essi e il widget sul Suo sito web si apre senza che siano state selezionate date.

Questo articolo Le è stato utile?

Articoli correlati

È ancora in difficoltà?

È possibile ricevere assistenza anche direttamente dall'app; pertanto, se ha già effettuato l'accesso, riceverà una risposta più rapida in quella sede. In caso contrario, ci invii il nome dell'immobile e ci descriva cosa stava cercando di fare.