Tema e Aspetto
La pagina Tema è dove dai al tuo assistente la sua identità visiva — nome, avatar, colori del marchio — e scegli i canali in cui vivrà. Tutto viene visualizzato in tempo reale nella pagina stessa, così puoi iterare senza lasciare il dashboard.
Fai in modo che il tuo agente AI appaia in linea con il marchio · Tema + widget GDPR
→ Percorso Admin: Personalizzazione → Tema (/admin/chatModel/{id}/settings/theme)
Cosa configuri
La pagina è organizzata in tre passaggi. Puoi procedere avanti e indietro in qualsiasi momento; le modifiche nel passaggio 2 vengono salvate quando premi Salva e Avanti.
Passaggio 1 — Identità
- Nome — il nome pubblico del tuo assistente (ad es. "Emma", "Support Bot"). Visibile ovunque il tuo assistente parli con gli utenti.
- Avatar — l'immagine che gli utenti vedono nell'intestazione della chat e nelle bolle dei messaggi. Carica un'immagine quadrata; noi la ridimensioniamo e la serviamo dal nostro CDN.
Il nome è quello con cui i tuoi utenti si rivolgono al bot. Scegli qualcosa che sia in linea con il marchio e facile da digitare — diventa l'identità dell'assistente su ogni canale.
Passaggio 2 — Colori
Due colori definiscono l'intera palette del widget:
| Colore | Dove appare |
|---|---|
Primario (brand.200) | Sfondo del pulsante flottante, accenti delle bolle dei messaggi, stati di hover |
Secondario (brand.500) | Pulsante di invio, link all'interno della conversazione, anelli di messa a fuoco, stati attivi |
Entrambi gli input accettano qualsiasi valore HEX. L'anteprima dal vivo in fondo alla pagina riflette le tue modifiche in tempo reale, così puoi scegliere una coppia che si legga bene sul tuo sito prima di salvare.
Perché solo due colori? Il nostro sistema di design deriva un'intera palette a 5 passi (100/200/500/700/900) da questi due ancoraggi. Tu imposti il tono; noi manteniamo il resto coerente.
Passaggio 3 — Integra
Una volta che il tuo assistente appare corretto, passa direttamente al canale di integrazione di tua scelta:
- Web Widget — codice di incorporamento per qualsiasi sito web, con controlli completi per pulsanti e layout
- WordPress — auto-iniezione tramite il plugin di WordPress
- PrestaShop — auto-iniezione tramite il modulo di PrestaShop
- Shopify — collega il tuo negozio e inietta automaticamente il chatbot
- Joomla — auto-iniezione tramite il plugin di Joomla
Ogni scheda ti porta alla pagina di integrazione dedicata dove puoi regolare lo stile del pulsante, la posizione, la modalità di feedback, le funzionalità vocali e il comportamento specifico del canale.
Anteprima dal vivo
Un widget di chat dal vivo viene visualizzato sulla pagina Tema stessa. Si reinietta automaticamente ogni volta che cambi un colore, così puoi vedere il rendering esatto che i tuoi utenti finali riceveranno — non è necessario pubblicare o aprire un'altra scheda.
L'anteprima utilizza lo stesso pacchetto universal-chatbot.js della produzione, quindi ciò che vedi è ciò che i tuoi visitatori vedranno.
Permessi
| Azione | Permesso richiesto |
|---|---|
| Visualizza la pagina Tema | THEME_READ |
| Cambia colori / salva tema | THEME_UPDATE |
| Rinomina l'assistente | CHAT_MODEL_UPDATE |
I membri senza THEME_UPDATE vedono la pagina in modalità sola lettura (input disabilitati, nessun pulsante Salva). Consulta Controllo Accessi per come assegnare questi permessi.
Suggerimenti
- Testa sul tuo sfondo reale. Apri il tuo sito in una seconda scheda mentre scegli i colori — ciò che sembra buono nel dashboard potrebbe scontrarsi con la tua sezione principale.
- Mantieni il contrasto. Il colore secondario è utilizzato anche per il testo cliccabile nella conversazione. Se gli utenti non riescono a leggerlo, non cliccheranno.
- Abbina il tuo CTA, non il tuo logo. Il widget è una superficie interattiva, quindi ancoralo al colore dell'azione del tuo sito (il tono "Acquista ora" / "Iscriviti") piuttosto che al colore del tuo logo.
- L'avatar conta più di quanto pensi. Un volto reale o un personaggio stilizzato converte meglio di un'icona robot generica — gli utenti aprono la chat di più quando appare umano.
Correlati
- Biografia — definisci la personalità e le regole decisionali del tuo assistente
- Integrazione del Chatbot — incorporalo su un sito web
- Canali — collega piattaforme di messaggistica
- Controllo Accessi — gestisci chi può modificare il tema