Widget per il sito
Integrare la prenotazione diretta di Hotely in qualsiasi sito — widget completo o barra di ricerca, preset di layout, tema, testi, apertura del checkout e snippet pronto da incollare.
Il widget porta la prenotazione diretta dentro il sito della tua struttura, qualunque piattaforma usi (WordPress, Wix, Squarespace, un sito su misura). L'ospite cerca date, camere e tariffe senza lasciare il tuo sito; per il pagamento passa alla pagina di prenotazione completa.
Si configura in Distribuzione → Pagina prenotazione, uno studio con anteprima dal vivo e tre schede: Design, Testi e Installa.
Se il sito della struttura è fatto con il Website Builder di Hotely, non serve nessun codice: la prenotazione è già integrata. Vedi Collegamento Booking Engine.
Due tipi di widget
| Tipo | Cosa fa | Dove usarlo |
|---|---|---|
| Widget di prenotazione (motore completo) | Ricerca, risultati con camere e tariffe, selezione: tutto dentro il sito | Una pagina "Prenota" dedicata |
| Barra di ricerca | Solo date e ospiti; alla ricerca porta l'ospite alla pagina di prenotazione con i risultati | La home page, l'header, le pagine camere |
Design
Preset di layout
Parti da un preset e personalizzalo:
| Preset | Pensato per |
|---|---|
| Conversione | Equilibrato per la maggior parte dei siti |
| Compatto | Sidebar o CMS con poco spazio |
| Editoriale | Ricerca più asciutta per siti con identità forte |
| Immersivo | Layout premium con più gerarchia e presenza |
| Piena larghezza | Sezioni hero dedicate alla prenotazione |
Opzioni
- Tema — chiaro, scuro o automatico.
- Header — completo, compatto o solo ricerca.
- Allineamento testi — sinistra o centro.
- Superficie — morbida, semplice o bordata; cornice esterna nessuna, leggera o in rilievo.
- Sfondo dell'iframe — chiaro, trasparente o automatico dal tema, per fondere il widget con la pagina.
- Larghezza interna — compatto, standard, ampio, piena larghezza.
- Altezza minima e raggio degli angoli.
- Colore di accento — di default il colore della struttura.
- CSS personalizzato, per gli ultimi ritocchi.
Testi
- Lingua iniziale del widget.
- Badge, titolo e descrizione dell'header (con l'header compatto la descrizione non si vede).
- Apri il checkout — nella stessa scheda o in una nuova scheda. Il pagamento non avviene mai dentro l'iframe: il passaggio finale porta sempre alla pagina di prenotazione completa, nella scheda scelta.
Installa
La scheda Installa genera lo snippet da copiare:
| Snippet | Comportamento |
|---|---|
| Completo (consigliato) | Adatta automaticamente l'altezza del widget al contenuto e apre il checkout nella scheda scelta |
| Solo iframe | Iframe ad altezza fissa, per i sistemi che non accettano script |
Incolla lo snippet nel punto della pagina in cui deve comparire il widget: in WordPress in un blocco HTML personalizzato, in Wix con l'elemento "Incorpora codice", in Squarespace con un blocco Codice. Trovi anche l'URL della prenotazione pubblica, da usare per pulsanti e link.
Ogni modifica a design e testi aggiorna lo snippet: se cambi impostazioni dopo l'installazione, ricopia lo snippet nel sito.
Consigli per l'integrazione
- Una pagina "Prenota" dedicata con il widget completo, e la barra di ricerca nelle altre pagine.
- HTTPS: il tuo sito deve usare HTTPS, altrimenti il browser può bloccare il widget.
- Prova su smartphone: controlla che il widget occupi tutta la larghezza e che il checkout si apra correttamente.
- Snippet completo quando possibile: con l'altezza fissa il contenuto può risultare tagliato.
Test dell'integrazione
- Apri la pagina del tuo sito con il widget, anche da smartphone.
- Cerca una data, scegli camera e tariffa.
- Verifica che il checkout si apra nella scheda scelta.
- Completa una prenotazione di prova e annullala dalla dashboard, rimborsando il pagamento.