Personalizzazione aspetto

L'aspetto dell'Agent AI è completamente personalizzabile per integrarsi perfettamente con il brand della tua attività. Ogni elemento visivo della finestra di chat — dai colori dei messaggi al logo, dal testo di benvenuto ai colori dell'header — può essere configurato dalla dashboard senza alcuna competenza tecnica. Il risultato è un'interfaccia chat che i tuoi visitatori percepiranno come parte integrante del sito, non come un widget generico esterno.

A differenza di molte soluzioni che offrono personalizzazioni limitate (solo il colore del pulsante) o che riservano la personalizzazione completa ai piani premium, Hotely ti permette di controllare ogni dettaglio visivo dell'Agent in qualsiasi piano.

Panoramica delle impostazioni

La sezione di personalizzazione è organizzata in aree tematiche. Ogni modifica è visibile in tempo reale nell'anteprima a lato, permettendoti di valutare il risultato prima di salvare.

Mappa completa delle impostazioni

Configurazione dettagliata

Titolo della chat

Il titolo appare nella barra superiore della finestra di chat ed è il primo elemento che l'utente nota. Dovrebbe identificare chiaramente la tua attività.

Consigli:

• Usa il nome della tua struttura o un titolo descrittivo (es. "Hotel Bellavista", "Assistente Ristorante Da Luigi")
• Mantienilo breve: 2-4 parole sono ideali
• Evita termini tecnici come "Chatbot" o "Bot" — preferisci "Assistente", "Concierge", "Info"

Esempi efficaci:

• "Hotel Bellavista" — diretto e riconoscibile
• "Concierge Virtuale" — elegante per hotel di fascia alta
• "Info e Prenotazioni" — funzionale, indica cosa aspettarsi

Messaggio di benvenuto

Il messaggio di benvenuto è il primo testo che appare nella finestra di chat quando l'utente la apre. È il tuo biglietto da visita digitale e deve invitare l'utente a interagire.

Struttura consigliata:

1. Un saluto cordiale
2. Una breve presentazione dell'Agent
3. Un elenco sintetico di cosa può aiutare
4. Un invito ad agire

Esempio:

Lunghezza consigliata: 2-4 frasi. Un messaggio troppo lungo rischia di non essere letto.

Testo placeholder

Il testo placeholder appare nel campo di input in grigio chiaro, prima che l'utente inizi a digitare. Serve come suggerimento su come interagire.

Colore della bolla

La bolla è il pulsante circolare che appare nell'angolo inferiore della pagina web e che l'utente clicca per aprire la finestra di chat. Il suo colore deve essere:

• Visibile — deve risaltare rispetto allo sfondo del sito per essere notata
• Coerente con il brand — usa un colore primario o secondario del tuo brand
• Non invasivo — evita colori troppo accesi che distraggano dal contenuto del sito

Come scegliere il colore giusto:

1. Apri il tuo sito web
2. Identifica i colori principali del brand (logo, pulsanti, accenti)
3. Scegli un colore che appartenga alla palette del brand ma che risalti rispetto allo sfondo
4. Testa la visibilità su tutte le pagine del sito (alcune pagine potrebbero avere sfondi diversi)

Colore testo bolla

Il colore dell'icona o del testo all'interno della bolla. Di solito è bianco su sfondo scuro o nero su sfondo chiaro. La regola è garantire un contrasto sufficiente per la leggibilità.

Colori dell'header

L'header è la barra superiore della finestra di chat, che contiene il titolo, il logo e il pulsante di chiusura.

• Sfondo header — il colore di sfondo della barra. Tipicamente il colore primario del brand
• Testo header — il colore del titolo e delle icone. Deve avere un buon contrasto con lo sfondo

Combinazioni comuni:

Colori delle risposte dell'Agent (bot)

I messaggi dell'Agent appaiono come bolle di testo nella parte sinistra della conversazione. Puoi personalizzare:

• Sfondo risposta bot — il colore di sfondo della bolla del messaggio. Tipicamente un grigio chiaro o un colore molto tenue per distinguerlo dai messaggi dell'utente
• Testo risposta bot — il colore del testo. Deve essere scuro su sfondo chiaro per garantire la leggibilità

Consiglio: mantieni lo sfondo delle risposte bot in tonalità neutre e chiare. I messaggi dell'Agent contengono spesso testi lunghi e uno sfondo troppo colorato affaticherebbe la lettura.

Colori delle risposte dell'utente

I messaggi dell'utente appaiono come bolle nella parte destra della conversazione:

• Sfondo risposta utente — tipicamente il colore primario del brand, più intenso rispetto allo sfondo delle risposte bot
• Testo risposta utente — di solito bianco su sfondo scuro/colorato

Questa differenza visiva tra messaggi dell'Agent (chiari) e messaggi dell'utente (colorati) è una convenzione di design che aiuta a distinguere immediatamente chi sta parlando.

Logo aziendale

Il logo appare nell'header della finestra di chat, accanto al titolo. Fornisce un immediato riconoscimento del brand.

Specifiche tecniche:

• Formati accettati: PNG, JPG, SVG
• Dimensione consigliata: 40x40 pixel o superiore (viene ridimensionato automaticamente)
• Sfondo: preferisci un logo con sfondo trasparente (PNG) se l'header ha un colore di sfondo

Consigli:

• Usa il logo della tua attività, non un'icona generica
• Se il logo è troppo complesso o dettagliato, usa una versione semplificata (icona o monogramma)
• Verifica che il logo sia visibile sul colore di sfondo dell'header che hai scelto

Nome azienda

Il nome dell'azienda appare accanto al logo nell'header. Se hai già inserito il logo, il nome azienda serve come elemento testuale di supporto.

Puoi scegliere di mostrare:

• Solo il logo (se è sufficientemente riconoscibile)
• Solo il nome
• Logo + nome (più completo)
• Nessuno dei due (usa solo il titolo della chat)

Branding Hotely

Il badge "Powered by Hotely" appare nella parte inferiore della finestra di chat. Puoi scegliere di mostrarlo o nasconderlo in base al tuo piano e alle tue preferenze.

Procedura di personalizzazione

Passo-passo

1. Dalla dashboard dell'Agent, vai alla sezione "Personalizzazione" o "Aspetto"
2. L'interfaccia mostra tutte le opzioni di personalizzazione sulla sinistra e un'anteprima in tempo reale sulla destra
3. Modifica ogni impostazione e osserva il risultato nell'anteprima
4. Una volta soddisfatto del risultato, clicca "Salva"

Anteprima in tempo reale

L'anteprima mostra esattamente come apparirà la finestra di chat sul tuo sito web:

• La bolla nell'angolo inferiore destro
• La finestra di chat aperta con header, messaggi e campo di input
• I colori e i testi aggiornati in tempo reale ad ogni modifica

Questo ti permette di sperimentare con diverse combinazioni di colori prima di salvare.

Palette colori per settore

Ecco alcune combinazioni di colori collaudate per diverse tipologie di strutture:

Hotel di lusso

B&B / Agriturismo

Ristorante

Hotel moderno / Business

Accessibilità

Quando personalizzi i colori, tieni presente le linee guida di accessibilità:

• Contrasto testo/sfondo: assicurati che il rapporto di contrasto tra testo e sfondo sia almeno 4.5:1 per il testo normale e 3:1 per il testo grande
• Non affidarti solo al colore per comunicare informazioni — usa anche testo e icone
• Testa con daltonismo — verifica che i colori scelti siano distinguibili anche per utenti con deficit cromatici

Puoi utilizzare strumenti online come il WebAIM Contrast Checker per verificare il rapporto di contrasto delle tue combinazioni di colori.

Salvataggio e pubblicazione

Le modifiche all'aspetto vengono applicate immediatamente dopo il salvataggio su tutte le nuove sessioni di chat. Le conversazioni già aperte potrebbero richiedere un refresh della pagina per visualizzare i nuovi colori.

Se l'Agent è già integrato nel tuo sito web, le modifiche saranno visibili ai visitatori senza necessità di aggiornare il codice di integrazione.

Per assistenza nella personalizzazione dell'aspetto dell'Agent, contatta support@hotely.ai.