Design e personalizzazione

L'aspetto dell'Agent è uno degli elementi che più impatta sulla percezione del visitatore. Un widget chat ben curato, con i colori della struttura e un'esperienza visiva coerente, viene percepito come parte integrante del brand. Un widget anonimo o stridente viene percepito come un componente esterno, generico, e riduce la fiducia.

Hotely permette di personalizzare ogni dettaglio dell'aspetto dell'Agent — dai colori alla tipografia, dai testi alle icone, dal welcome screen al comportamento al primo avvio. Non ci sono limiti di piano sulla personalizzazione: una piccola guesthouse familiare ha lo stesso livello di controllo visivo di un boutique hotel di lusso.

Filosofia di design dell'Agent

L'Agent di Hotely è stato progettato per essere invisibile come tecnologia, visibile come servizio. La chat dovrebbe sembrare una persona del tuo staff che accoglie l'ospite, non un widget di software esterno. Questo si ottiene curando tre dimensioni:

• Coerenza cromatica — colori in linea con il sito e il brand
• Tono di voce — i testi che parlano la stessa lingua del tuo materiale di comunicazione
• Personalità visiva — logo, immagini, dettagli che fanno percepire la struttura

Aree di personalizzazione

La sezione Design dell'Agent è organizzata in quattro blocchi principali:

Identità visiva

Logo

Carica il logo della tua attività in formato PNG, SVG o JPG. Indicazioni tecniche:

• Dimensione consigliata: 200x200 pixel
• Sfondo trasparente preferito (per integrazione su qualsiasi colore di header)
• Proporzioni quadrate per l'icona della bolla
• Versione orizzontale per l'header esteso

Il logo appare:

• Nella bolla chat (forma circolare in basso a destra del sito)
• Nell'header della finestra chat aperta
• Negli avatar dei messaggi dell'Agent
• Nelle email automatiche inviate ai visitatori (conferme, ricevute)

Per chi non ha un logo, può usare iniziali stilizzate o un'icona simbolica (ad esempio una conchiglia per un B&B sul mare, una pigna per uno chalet di montagna).

Nome dell'azienda

Il nome che appare accanto al logo nell'header. Esempi:

• "Hotel Bellavista"
• "Ristorante Da Luigi"
• "Casa del Sole B&B"
• "Tour Roma Antica"

Per attività con nomi lunghi, usa una versione abbreviata che funzioni in spazio ridotto (mobile).

Colori principali

I tre colori più importanti da impostare per primi:

Colore primario (bolla e accenti)

Il colore del pulsante bolla che apre la chat, dell'header e dei messaggi inviati dall'utente. È il colore più visibile dell'intera interfaccia. Tipicamente coincide con il colore del brand.

Esempi efficaci:

• Hotel di lusso → blu navy profondo, bordeaux, oro antico
• B&B familiare → verde salvia, sabbia, terracotta
• Pizzeria di tradizione → rosso vivo, verde basilico, nero opaco
• Resort balneare → blu cielo, turchese, sabbia
• Agriturismo → verde oliva, terra di Siena, ocra

Colore secondario

Il colore di accento — usato per pulsanti secondari, link, indicatori. Tipicamente un colore complementare o una variante più chiara/scura del primario.

Colore di sfondo

Il colore di sfondo della finestra chat. Tipicamente molto chiaro (bianco, beige, grigio molto chiaro) per garantire leggibilità.

Personalizzazione dettagliata

Oltre ai colori principali, puoi configurare in dettaglio:

L'editor mostra un'anteprima in tempo reale delle modifiche — vedi immediatamente l'effetto prima di salvare.

Testi della chat

Titolo della chat

Il testo nell'header della finestra. Dovrebbe identificare chiaramente l'attività. Esempi:

• "Hotel Bellavista" — diretto e riconoscibile
• "Concierge Virtuale" — elegante per hotel di fascia alta
• "Info e Prenotazioni" — funzionale per attività turistiche
• "Assistente di Sala" — caldo per ristoranti

Sottotitolo

Una riga breve sotto il titolo (opzionale). Usabile per indicare disponibilità ("Disponibile 24/7"), specializzazione ("Concierge in 4 lingue"), o servizio principale ("Prenotazioni e info").

Messaggio di benvenuto

Il primo messaggio che l'utente vede quando apre la chat. Dovrebbe essere accogliente, breve e indicare cosa puoi fare per lui. Esempi:

• Hotel: "Benvenuto al Bellavista. Sono il concierge virtuale e posso aiutarti con prenotazioni, orari e servizi della struttura."
• B&B: "Ciao, sono l'assistente di Casa del Sole. Chiedimi pure orari, disponibilità o consigli sulla zona."
• Ristorante: "Buongiorno da Luigi, posso aiutarti con il menu, le prenotazioni e gli orari di apertura."
• Resort: "Benvenuto al Riccione Beach Resort. Sono qui per assisterti durante il soggiorno — in italiano, inglese, tedesco o francese."

Il messaggio di benvenuto può includere proposte di azione rapida (vedi sezione Welcome screen).

Placeholder del campo input

Il testo grigio nel campo di scrittura prima che l'utente inizi a digitare. Default: "Scrivi un messaggio...". Personalizzazioni efficaci:

• "Scrivi la tua domanda..."
• "Chiedi qualsiasi cosa..."
• "Come posso aiutarti?"
• "Inizia a scrivere..."

Pulsante di invio

Tipicamente un'icona (freccia, aeroplano). In alcuni casi può essere sostituito con testo ("Invia"). Sceglie automaticamente l'opzione migliore per il device.

Branding visibile

L'Agent mostra di default un piccolo badge "Powered by Hotely" in basso alla chat. Per le strutture che preferiscono un'esperienza completamente brandizzata, il badge può essere:

• Mantenuto — utile per indicare il provider tecnologico
• Nascosto — per esperienza completamente "white label"
• Personalizzato — sostituito con un testo o link del tuo brand

La possibilità di nascondere il branding dipende dal piano. Per i piani standard è sempre visibile in versione discreta.

Comportamento del widget

Oltre ai colori e ai testi, puoi configurare il comportamento del widget:

Apertura automatica

• Aperto automaticamente al caricamento — il widget si apre da solo dopo X secondi (utile per attirare attenzione)
• Aperto solo al clic — il visitatore deve cliccare la bolla (più discreto, consigliato per attività eleganti)
• Tooltip iniziale — bolla chiusa con un piccolo fumetto che dice "Ciao, hai bisogno?"
• Notifica con anteprima — la bolla mostra un anteprima del messaggio di benvenuto

Posizione

Il widget si può posizionare in diverse aree dello schermo:

• Basso a destra (default più comune)
• Basso a sinistra (utile per siti con elementi importanti a destra)
• Centro inferiore (centrato in basso)
• Custom — coordinate precise

Dimensione della finestra

Quando aperta, la finestra chat può essere:

• Standard — circa 380x600 pixel
• Larga — circa 450x700 pixel
• Full-screen su mobile — occupa tutto lo schermo sui dispositivi mobili
• Mini — versione compatta per inserimenti in widget sidebar

Pulsanti CTA accanto al widget

Puoi aggiungere pulsanti "Chiama", "WhatsApp", "Email" accanto al widget per offrire alternative al chat.

Anteprima in tempo reale

L'editor di design include una iPhone preview che mostra in tempo reale come apparirà l'Agent sul mobile dei tuoi visitatori. Modificando colori e testi, vedi l'effetto immediato.

L'anteprima simula:

• iPhone con notch
• Comportamento touchscreen
• Caricamento iniziale
• Apertura della chat
• Conversazione di esempio

Per testare su device reali, puoi anche generare un link di anteprima da condividere con il team.

Multi-lingua del design

I testi del design (welcome message, placeholder, sottotitolo) sono tradotti automaticamente nelle lingue attive dell'Agent. Quando un ospite tedesco apre la chat, vede testi in tedesco; un francese vede in francese.

Le traduzioni sono modificabili manualmente per casi delicati o terminologia di brand. Vedi Traduzioni.

Casi reali

Boutique hotel di lusso a Capri

Setup: logo elegante, colori bordeaux e oro, header con foto della struttura, welcome message in stile "padrone di casa", branding Hotely nascosto. Tono: formale e raffinato. Risultato: la chat è percepita come parte integrante della struttura, con valutazioni positive sulla "qualità dell'esperienza digitale".

Pizzeria di paese di tradizione

Setup: logo "Pizzeria Da Mario" stilizzato, colori rosso-verde-bianco, welcome message giocoso, branding Hotely mantenuto. Tono: caloroso e amichevole, anche con qualche emoji. Risultato: la chat trasmette la stessa atmosfera del locale fisico.

Resort balneare estivo

Setup: logo del resort, colori turchese e sabbia, welcome message con riferimento al mare ("Ciao, dal Riccione Beach"), tono fresco e immediato. Apertura automatica del widget con tooltip "Hai domande sul soggiorno?". Risultato: alta conversione su richieste informative.

Agriturismo di campagna

Setup: logo "Cascina del Sole" in stile vintage, colori terra di Siena e verde oliva, welcome message in dialetto familiare ("Benvenuti alla Cascina"), tono caldo. Risultato: l'esperienza digitale coerente con l'autenticità della location fisica.

Catena di B&B con identità unificata

Setup: design template comune per i 12 B&B della catena, con piccole varianti per ogni struttura (colori secondari diversi, foto specifica). Identità visiva coerente cross-struttura. Risultato: percezione di gruppo professionale.

Buone pratiche di design

Errori frequenti

Prossimi passi

• Welcome screen — guida specifica alla schermata iniziale
• Traduzioni — gestione multilingua dei testi
• Integrazione — come integrare il widget sul sito