Vai al contenuto

Branding & Media

Percorso: /dashboard/settings (scheda Branding) · Permesso: Modulo Settings

Personalizza l'identità visiva del tuo assistente AI per allinearla al tuo brand. Il branding si applica sia alla dashboard che al widget visibile dai tuoi utenti.

Branding Settings Branding Settings

Il tuo logo appare nell'intestazione della dashboard e, opzionalmente, nel widget.

Requisito Dettagli
Larghezza minima 200px
Dimensione massima visualizzata Ridimensionato automaticamente a 350px di larghezza
Formato consigliato PNG con sfondo trasparente
Metodo di caricamento Drag-and-drop o selettore di file

Suggerimenti:

  • Usa un PNG trasparente per un allineamento pulito sia su sfondi chiari che scuri.
  • Carica il logo a una risoluzione 2x rispetto alla dimensione desiderata per una resa nitida sui display retina.
  • Evita logo molto alti — i formati larghi/orizzontali funzionano meglio nell'header.

Favicon

La favicon appare nelle schede del browser e nei segnalibri.

Requisito Dettagli
Dimensione minima 16x16 pixel
Elaborazione Ritagliata a forma quadrata, ridimensionata a max 48x48
Formato consigliato PNG o SVG

Suggerimenti:

  • Usa un'icona semplice, una lettera o un simbolo — le immagini complesse diventano illeggibili a piccole dimensioni.
  • Se il tuo logo è dettagliato, crea una versione semplificata della favicon (es. solo la prima lettera o l'icona del brand).

Colori

Impostazione Cosa controlla Esempio
Colore primario Colore principale del tema — intestazione del widget, pulsanti, stati attivi, evidenziazioni barra laterale #3b82f6 (blu), #10b981 (verde)
Colore secondario Colore di accento — stati hover, link, pulsanti secondari #6366f1 (indaco), #f59e0b (ambra)

Inserisci direttamente i codici colore esadecimali o usa il selettore di colori integrato. Le modifiche vengono visualizzate in anteprima immediata nella dashboard.

Consigli sui colori

  • Coerenza con il brand — Usa il colore primario della tua azienda per mantenere la coerenza tra il tuo sito web e il widget.
  • Garantisci il contrasto — I colori scuri funzionano meglio per intestazioni e pulsanti. Evita colori troppo chiari che non sarebbero leggibili su sfondi bianchi.
  • Testa sul widget — Dopo aver cambiato i colori, apri il widget sul tuo sito per verificare la leggibilità e la coerenza visiva.

Tipografia (Typography)

Scegli tra famiglie di caratteri premium. Il selettore dei font è consapevole della lingua — mostra automaticamente i font che supportano i set di caratteri delle lingue abilitate.

Lingua Esempi di font
Inglese / Latino Inter, Poppins, Open Sans, Roboto, Montserrat
Ebraico Heebo, Assistant, Rubik, Open Sans Hebrew
Arabo Cairo, Tajawal, IBM Plex Arabic
CJK Noto Sans CJK (selezionato automaticamente)

Il font selezionato si applica sia alla dashboard che al widget, garantendo un'esperienza di brand coerente per il tuo team e i tuoi utenti.

Avatar del widget

L'avatar è l'immagine del profilo che gli utenti vedono all'interno del widget di chat. Definisce il tono della conversazione — amichevole, professionale o istituzionale.

Opzione Dettagli Ideale per
Galleria Scegli da un set curato di avatar pre-progettati con ampie anteprime Configurazione rapida, look professionale
Carica Carica la tua immagine — ritagliata e ottimizzata automaticamente in PNG 100x100 Mascot del brand, foto del team, icona personalizzata
URL Incolla l'URL di un'immagine esterna Avatar dinamici da un CDN (nota: dipende dalla disponibilità dell'host esterno)

Suggerimenti per l'avatar

  • Usa un volto o un'icona amichevole — Gli avatar con un volto (umano o illustrato) aumentano il coinvolgimento del 15–25%.
  • Allineamento al brand — Se hai una mascotte o un'icona del logo, usala per un riconoscimento istantaneo del brand.
  • Evita immagini con molto testo — A 100x100 pixel, il testo diventa illeggibile.

CSS Personalizzato

Per una personalizzazione avanzata, aggiungi CSS personalizzato che sovrascrive gli stili predefiniti della dashboard. Questo è utile per:

  • Rispettare guide di stile aziendali specifiche oltre i colori primari/secondari
  • Regolare spaziatura, bordi o sfumature di colore
  • Nascondere o riposizionare elementi dell'interfaccia per implementazioni specializzate

Esempio: Stile pulsante personalizzato

.btn-primary {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

Usare con cautela

Le sovrascritture CSS personalizzate possono alterare il layout della dashboard se i selettori cambiano durante gli aggiornamenti. Mantieni le modifiche al minimo, documenta ciò che hai variato e testa dopo ogni aggiornamento di sistema.

FAQ

D: Perché il mio logo appare sfuocato?

  • Carica un'immagine sorgente più grande (almeno 2x la dimensione di visualizzazione desiderata) e lascia che il sistema la scali. Un'immagine larga 700px apparirà nitida a una dimensione di visualizzazione di 350px.

D: Posso usare un URL invece di caricare il file?

  • Sì, per logo e avatar. Tuttavia, gli URL esterni possono interrompersi se l'host cambia i percorsi o va offline. Caricare direttamente il file è più affidabile.

D: Le modifiche al branding influiscono immediatamente sul widget?

  • Sì. Le modifiche al branding (colori, logo, avatar) hanno effetto immediato per le nuove sessioni del widget. Le sessioni aperte esistenti potrebbero richiedere l'aggiornamento della pagina per visualizzare le modifiche.

D: Il branding è per singolo bot o globale?

  • Il branding è specifico per ogni bot. Ogni bot in una configurazione multi-bot può avere i propri colori, logo e avatar.