Impostazioni Appearance

La scheda Appearance è dove l’assistente prende il suo aspetto. È organizzata in cinque sezioni comprimibili, dalle scelte semplici fino al controllo completo a livello di CSS: spingiti in superficie o in profondità quanto ti serve.

Layout e pulsante di apertura

Quando usare un pulsante flottante: ogni volta che integri l’assistente in un sito con contenuti propri e non vuoi che la chat si contenda lo spazio. Il pulsante resta in un angolo e i visitatori lo aprono quando ne hanno bisogno.

Quando integrarlo nella pagina: quando l’assistente è il contenuto: una pagina di supporto dedicata, un portale di ricerca, la pagina principale di un centro di assistenza.

Tema di base

Il tema di base è il tuo punto di partenza. Scegli quello più vicino all’aspetto del tuo sito e perfezionalo da lì con la palette o con l’editor del tema.

Sovrascrivere la palette di colori del tema

L’editor della palette mostra un selettore di colore per ogni variabile CSS di colore usata dall’assistente. Ogni selettore mostra il nome della variabile (ad es. --brand) e il suo valore esadecimale attuale. Devi impostare solo quelle che vuoi cambiare: tutte le altre mantengono il valore del tema di base. I colori sono raggruppati per area:

Brand e fondamenta: l’aspetto di base: --brand (accento primario), --brand-2 (secondario), --accent, --bg-base (sfondo di base), --bg-deep, --surface, --surface-paper, --text, --text-strong, --text-muted, --link, --border, --error, --white.

Pulsante flottante e intestazione: --floating-button-bg, --floating-button-text, --floating-button-avatar-bg, --floating-header-bg, --floating-header-text, --floating-header-title.

Footer: --footer-bg, --footer-button-text, --footer-button-hover-text, --footer-secondary-hover-text.

Ricerca e input: --header-bg, --search-box-bg, --search-input-text, --input-bg, --input-border.

Pulsanti e azioni: --button-primary-bg, --button-primary-hover-bg, --button-hover, --scroll-button-bg, --scroll-button-hover-bg.

Messaggi: --assistant-avatar-bg, --assistant-avatar-text, --assistant-response-border, --user-message-bg, --user-message-text.

Suggerimenti: --hint-text, --hint-border, --form-hint-bg, --form-hint-border.

Codice e citazioni: --code-bg, --code-text, --blockquote-text, --blockquote-border, --blockquote-strong-text.

Tabelle: --table-head-bg.

Schede: --tab-text, --tab-active-text, --tab-active-border.

Stati e reazioni: --success-bg, --success-border, --success-text, --reaction-hover-bg.

Barra di scorrimento: --scrollbar-thumb-bg.

Finestre modali e overlay: --modal-bg, --modal-backdrop-bg, --overlay-muted-bg, --overlay-backdrop-bg, --overlay-panel-bg, --overlay-header-text, --overlay-search-bg, --overlay-modal-bg.

Vetro e bagliore: --glass-bg, --glass-border, --brand-glow, --accent-glow.

Esempio di palette

Per adattarti a un brand con un primario blu su sfondo bianco, imposta:

• --brand → #1a73e8
• --button-primary-bg → #1a73e8
• --accent → #1a73e8

Per far corrispondere il pulsante flottante a una barra di navigazione scura:

• --floating-button-bg → #1e293b
• --floating-button-text → #ffffff
• --floating-header-bg → #1e293b
• --floating-header-text → #ffffff

Sovrascrivere le impostazioni del tema

Sotto la palette di colori, la sezione Override theme settings espone le variabili non legate al colore (font, dimensioni, bordi, ombre ed effetti) come campi di testo raggruppati per categoria:

Tipografia: --font-base (font principale), --font-code (blocchi di codice), --font-assistant (risposte dell’assistente). Inserisci uno stack di font CSS, ad es. 'Inter', sans-serif.

Layout e dimensioni: --floating-bottom-offset, --floating-right-offset (posizione del pulsante flottante), --container-width, --container-height (dimensioni del contenitore dell’assistente).

Bordi e contorni: --card-border-style, --article-table-border, --modal-header-border, --overlay-panel-border, --overlay-search-border, --loading-spinner-border.

Ombre e profondità: --shadow-soft, --shadow-raised, --shadow-light, --shadow-subtle, --shadow-minimal, --shadow-elevated, --shadow-premium, --floating-button-shadow, --floating-button-hover-shadow, --overlay-panel-shadow.

Sfumature ed effetti: --brand-gradient-line, --brand-halo-welcome, --skeleton-shimmer, --glass-shimmer, --glass-blur.

Esempio di impostazioni

Per usare un font personalizzato e riposizionare il pulsante flottante:

• --font-base → 'Inter', sans-serif
• --font-assistant → 'Inter', sans-serif
• --floating-bottom-offset → 24px
• --floating-right-offset → 24px

Per ammorbidire le ombre:

• --shadow-soft → 0 2px 8px rgba(0,0,0,0.06)
• --shadow-raised → 0 4px 16px rgba(0,0,0,0.08)

Editor del tema personalizzato

Per un controllo completo a livello di CSS, il Custom theme editor in fondo alla scheda Appearance apre un editor di codice Monaco in cui scrivi un oggetto tema in JSON che viene unito in profondità sopra tutto il resto. È qui che puoi agire su componenti specifici tramite i loro selettori CSS, aggiungere regole responsive o sovrascrivere qualsiasi proprietà di stile.

Caricare i valori predefiniti

Fai clic su Load default theme definition per riempire l’editor con il tema calcolato attuale: il risultato di tema di base + palette + impostazioni, completamente espanso. Così hai un punto di partenza funzionante: trova la proprietà che vuoi cambiare, modificane il valore e salva. Non devi mai scrivere un tema da zero.

Struttura

L’oggetto tema usa la sintassi CSS-in-JS (proprietà in camelCase) e agisce sui componenti dell’assistente tramite i loro selettori CSS:

{
  ":root": {
    "--brand": "#1a73e8",
    "--text": "#1e293b"
  },
  ".skdwn-assistant-response": {
    "backgroundColor": "#f8fafc",
    "borderRadius": "12px",
    "padding": "16px"
  },
  "#skdwn-floating-button": {
    "boxShadow": "0 4px 12px rgba(0,0,0,0.15)"
  },
  "@media (max-width: 600px)": {
    "#skdwn-main-container": {
      "fontSize": "14px"
    }
  }
}

Cosa puoi personalizzare

Esempio: fumetti arrotondati con un font personalizzato

{
  ":root": {
    "--font-base": "'Inter', sans-serif",
    "--font-assistant": "'Inter', sans-serif"
  },
  ".skdwn-assistant-response": {
    "borderRadius": "16px"
  },
  ".skdwn-user-request": {
    "borderRadius": "16px"
  }
}

Esempio: pulsante flottante circolare

{
  "#skdwn-floating-button": {
    "borderRadius": "50%",
    "width": "56px",
    "height": "56px"
  }
}

Come si uniscono i quattro livelli

L’assistente costruisce il suo aspetto finale unendo quattro livelli in ordine; ognuno sovrascrive il precedente:

1. Tema di base: il preset che scegli (default, light, dark, purple, blue, otherBlue).
2. Palette di colori: i selettori di colore. Sovrascrivono i colori del tema di base.
3. Impostazioni del tema: i campi di testo per font, ombre, bordi e dimensioni.
4. JSON del tema personalizzato: l’editor di codice. Si unisce in profondità sopra tutto il resto, quindi ha l’ultima parola.

La maggior parte degli assistenti ha bisogno solo di un tema di base e di qualche colore della palette. Le impostazioni del tema servono a regolare font e spaziature senza scrivere JSON. L’editor del tema personalizzato serve per il controllo completo a livello di CSS su componenti specifici.

Risoluzione dei problemi

• Se il testo è difficile da leggere, aumenta il contrasto tra i colori del testo e dello sfondo nella palette.
• Se il widget sembra troppo grande o troppo piccolo, prova a cambiare il template di base (default o overlay) oppure regola --container-width e --container-height nelle impostazioni del tema.
• I colori vengono applicati subito nell’anteprima integrata: usala per iterare rapidamente.
• Se il JSON del tema personalizzato mostra errori, controlla virgole finali, virgolette mancanti o parentesi graffe non corrispondenti. Usa Load default theme definition per partire da un oggetto valido.
• Nell’editor del tema personalizzato le proprietà CSS vanno scritte in camelCase (backgroundColor, non background-color), ma i nomi delle variabili CSS mantengono i trattini (--brand, --text).

Documenti correlati

• Aprire l’anteprima integrata