Questa schermata determina ciò che un ospite vede quando accede alla Sua pagina di prenotazione diretta . Nulla di quanto riportato qui modifica le Sue tariffe, la Sua disponibilità o le Sue regole: modifica solo il layout in cui l’ospite le visualizza e i colori su cui tali cifre sono riportate. Tutto ciò che selezionate viene visualizzato in un’anteprima del Suo hotel prima di confermare la scelta, in modo da poter vedere l’effetto sui nomi reali delle camere e sui prezzi reali anziché su un modello predefinito.
Come è strutturata la schermata
- L’anteprima in tempo reale. La Sua pagina di prenotazione così com’è, aggiornata ad ogni clic. Rimane fissa nella parte superiore della colonna mentre scorrete la pagina.
- La barra dei passaggi. Stile Hero, Layout delle camere, Branding. Clicchi su una qualsiasi delle tre voci per passare direttamente a quella sezione.
- Il corpo del passaggio. Le opzioni relative al passaggio attualmente aperto.
- Indietro e Avanti. Una funzione utile per passare in ordine tra le tre sezioni. Nell’ultimo passaggio, il pulsante “Avanti” diventa “Save changes”.
- Il codice e la scheda di tracciamento. Codice personalizzato, meta tag, "Google Analytics" e il pixel di Facebook. A quella metà dello schermo è dedicato un articolo a parte: come inserire il proprio codice e i meta tag.
Cosa mostra effettivamente l’anteprima
L’anteprima non è l’immagine di un hotel generico. La fotografia principale è l’intestazione della Sua struttura, il nome e la località provengono dalla scheda della Sua struttura e le schede delle camere rappresentano le Sue tipologie di alloggio con le tariffe per notte da voi stabilite nella Sua valuta. Questo è più importante di quanto possa sembrare: significa che state valutando un colore in relazione ai prezzi effettivi che un ospite leggerà, e il nome di una camera più lungo di quanto la scheda possa contenere apparirà qui piuttosto che in un reclamo da parte di un ospite.
Il soggiorno per cui viene calcolato il prezzo è un esempio, non una prenotazione. Viene selezionato un soggiorno di due notti a una settimana di distanza da oggi, in modo che le date risultino plausibili, e il totale viene ricalcolato in base alle Sue tariffe ogni volta che cambiate il layout. La barra degli indirizzi riporta yourhotel.prostay.app come segnaposto; la Sua vera pagina di prenotazione si trova all’indirizzo indicato nelle impostazioni del Suo widget .
Fase 1: l’hero
L’hero è la parte superiore della pagina di prenotazione: la fotografia, il nome del Suo hotel e il campo in cui l’ospite inserisce le date. I cinque layout differiscono per la posizione in cui viene collocato tale campo, che è l’unica parte dell’hero che genera entrate.
| Stile dell’hero | Effetto sulla pagina |
|---|---|
| Cinematic | Una fotografia a tutta larghezza con la barra di ricerca che scorre lungo la parte inferiore dell’immagine. La scelta più sicura, da privilegiare se la Sua fotografia è di grande impatto e il nome del Suo hotel è breve. |
| Glass console | Il modulo di ricerca è inserito all’interno della foto su un pannello sfumato. Posiziona le date più in alto nella pagina rispetto al layout «Cinematic», a costo di coprire un terzo dell’immagine. |
| Spotlight pill | Un titolo centrato con la barra di ricerca ridotta a un unico pulsante arrotondato. Il più leggero dei cinque e quello che lascia più spazio al titolo. |
| Bento | Riquadri modulari che riportano la Sua località e il prezzo più basso accanto alla foto. Utilizzatela quando il prezzo è l’argomento di punta, poiché è l’unica opzione che mostra una cifra prima ancora che l’ospite scorra la pagina. |
| Diagonal | Un pannello inclinato nel colore del Suo marchio che contiene il modulo accanto alla foto. Il più “brandizzato” dei cinque, ed è quello che dipende maggiormente dalla scelta del colore giusto per il Suo marchio. |
Fase 2: come vengono elencate le camere
Questa è la parte della pagina in cui l’ospite effettua la scelta, pertanto adattatela al numero di tipologie di alloggio che offrite piuttosto che a quale appaia esteticamente migliore a schermo vuoto.
| Disposizione delle camere | Effetto sulla pagina |
|---|---|
| Sidebar | Schede larghe disposte verticalmente lungo la pagina con il totale progressivo fissato a destra. La lettura risulta agevole fino a circa sei tipologie; oltre tale numero, l’ospite deve scorrere a lungo. |
| Gallery grid | Schede con immagini in cima disposte a griglia, con il totale sempre a destra. La più incentrata sulle immagini tra le quattro opzioni, e quella che risente maggiormente della mancanza di foto per una determinata tipologia. |
| Compact list | File fitte pensate per una lettura rapida. La soluzione ideale per una struttura con una dozzina di tipologie, ma non adatta a una boutique con tre sole tipologie, poiché fa sembrare scarso un inventario già di per sé ridotto. |
| Showcase | Schede a larghezza intera con il totale spostato in una barra nella parte inferiore dello schermo. L’unico layout che libera l’intera larghezza per la stanza stessa, motivo per cui si adatta a suite e ville. |
Tre dei quattro mantengono il riepilogo in un pannello fisso sulla destra, mentre il quarto lo sposta in una barra fissa nella parte inferiore. In entrambi i casi l’ospite può vedere ciò che ha selezionato e il relativo costo senza dover tornare indietro con lo scorrimento, il che è l’elemento che impedisce l’abbandono a metà di una prenotazione con più camere.
Fase 3: i Suoi cinque colori
Clicchi su un campo esadecimale per aprire un selettore di colori, oppure digiti direttamente un valore esadecimale al suo interno. Il quadrato accanto a ciascun campo indica il colore che ha scelto; il pulsante blu accanto ad esso ripristina il campo all’impostazione predefinita di Prostay, che non è necessariamente il valore con cui ha iniziato la sessione.
| Campo | Cosa colora e a quale impostazione predefinita riporta |
|---|---|
| Brand color | L’intestazione e tutti i pulsanti principali, inclusi Check availability e Continue to checkout. È quello che deve rimanere visibile anche con del testo bianco sovrapposto. Si ripristina a #1643E0. |
| Background color | La pagina che fa da sfondo a tutto il resto. Si ripristina a #ffffff. Qualsiasi colore molto più scuro di un grigio chiaro entrerà in contrasto con le fotografie degli ambienti, che non è possibile ricolorare. |
| Background Section Color | Le bande alternate che separano una sezione della pagina dalla successiva e lo sfondo del Riepilogo del soggiorno. Il valore predefinito è #F1F4FE. Impostatelo in modo che corrisponda al colore di sfondo: in tal modo la pagina apparirà come un unico lungo blocco. |
| Headline text | Intestazioni delle sezioni e titoli delle pagine. Il valore predefinito è #1643E0, quindi di default le intestazioni corrispondono al colore del marchio. Impostatelo invece su un colore quasi nero se il colore del Suo marchio è chiaro. |
| General text & icons color | Testo del corpo, etichette dei campi e icone. Il valore predefinito è #606576. Questo è l’elemento che determina se un ospite può leggere le Sue condizioni di cancellazione; pertanto, mantenetelo scuro rispetto allo sfondo. |
Disattivazione delle foto delle camere
Questo pulsante si trova nella scheda “Custom Codes” (Opzioni di visualizzazione) nella scheda sotto la procedura guidata, una posizione piuttosto insolita, poiché si tratta di una scelta di progettazione piuttosto che di una scelta di codice. Impostatelo su “No” (Niente foto) e le schede delle camere elimineranno le immagini e ripiegheranno sul testo: il nome della camera, la descrizione e la tariffa. La fotografia principale rimane visibile in entrambi i casi, poiché proviene dall’ intestazione della Sua struttura piuttosto che dai tipi di alloggio.
C’è un buon motivo per disattivarla. Se i Suoi tipi di alloggio non dispongono di fotografie, o ne hanno solo alcuni, un layout basato sulle foto visualizza una fila di rettangoli grigi accanto a quelli che presentano immagini, e un ospite lo interpreta come se si trattasse di camere che Lei sta nascondendo. Disattivare le foto fino a quando gli spazi vuoti non saranno colmati sembra una scelta deliberata; lasciarle attive no.
Salvataggio e cosa comprende un singolo salvataggio
In questa schermata sono presenti due pulsanti di salvataggio che svolgono la stessa funzione. « Save changes » (Salva e chiudi) alla fine della procedura guidata e «Save » (Salva e torna alla schermata precedente) in basso a destra nella pagina salvano entrambi l’intera schermata: lo stile principale, la disposizione delle camere, tutti e cinque i colori, il menu a radio per le foto, ogni campo codice personalizzato e gli ID di analisi presenti nelle altre due schede. Non è necessario premere entrambi, e premendone uno non comporta che l’altra metà rimanga non salvata.
Un salvataggio andato a buon fine mostra il messaggio «Successfully updated!» e ricarica il record salvato, pertanto i valori che vedrà in seguito sono quelli presenti sul server anziché quelli nel Suo browser. Quel ricaricamento è la verifica che vale la pena effettuare: se un salvataggio non riesce a raggiungere il server, le modifiche rimangono sullo schermo senza essere salvate, e il modo per distinguere i due stati è che una pagina salvata viene restituita dal server anziché rimanere nella posizione in cui l’aveva lasciata.