Passa al contenuto principale

Stile di chat avanzato

Le impostazioni di aspetto integrate (colori, raggi, ombre, divisori, spaziatura) coprono la maggior parte delle esigenze di branding. Per tutto ciò che va oltre, c'è un campo Custom CSS nelle impostazioni globali dell'app di amministrazione. Qualunque cosa entri lì viene inserita in un blocco <style> su ogni pagina della vetrina; non ne esiste una versione per pagina o per blocco.

Proprietà personalizzate CSS che puoi sovrascrivere​

Il widget imposta il proprio aspetto tramite le proprietà personalizzate CSS su :root e anche sui propri contenitori, quindi funzionano ancora all'interno di temi che utilizzano Shadow DOM. Sostituisci direttamente uno qualsiasi di questi invece di combattere la specificità:

:root {
  --user-bg-color: #2C9AB4;
  --user-text-color: #FFFFFF;
  --bot-bg-color: #FFFFFF;
  --bot-text-color: #1A1E23;
  --chat-bubble-radius: 10px;
  --input-button-radius: 10px;
  --outer-radius: 20px;
  --container-padding: 20px;
  --chat-input-spacing: 20px;
  --divider-spacing: 15px;
  --divider-thickness: 1px;
  --divider-color: rgba(0,0,0,0.1);
  --container-border-color: #2C9AB4;
  --container-border-width: 2px;
  --container-border-radius: 20px;
  --container-background-color: #FAFAFA;
  --shadow-offset-x: 8px;
  --shadow-offset-y: 8px;
  --shadow-blur: 24px;
  --shadow-opacity: 0.1;
  --profile-image-size: 40px;
  --bubble-size: 60px;
  --chat-container-width: 980px;
  --chat-container-padding: 20px;
  --chat-container-margin: 20px;
  --chat-max-height-desktop: 35vh;
  --chat-max-height-mobile: 50vh;
}

La maggior parte di questi ha già un campo corrispondente nella pagina Aspetto: utilizza CSS personalizzati principalmente per cose che l'interfaccia utente delle impostazioni non espone.

Veri selezionatori che vale la pena conoscere​

SelettoreCos'è
#main-chat-containerIl pannello di chat principale
.AIchatbotClasse sul pannello di chat principale
[data-style-template="classic"] / .classic-stylePresente quando Classico è il modello di stile attivo
[data-style-template="bubbly"] / .bubbly-stylePresente quando Bubbly Glow è attivo
[data-style-template="floaty"]Presente quando Floaty è attivo
#ai-ambient-wrapperInvolucro esterno per i blob luminosi ambientali Floaty e Bubbly Glow
.chat-anchor-bubble-wrapperAvvolgitore a posizione fissa attorno alla bolla galleggiante del lanciatore
.chat-anchor-bubbleLa stessa bolla del lanciatore circolare
.desktop-headingL'intestazione della chat intitolata
.chat-login-buttonIl pulsante di richiesta di accesso ospite
.show-border / .show-shadowApplicato a #main-chat-container quando tali impostazioni sono su

Un piccolo esempio: restringi l'ombra della bolla e dai all'intestazione una sottolineatura personalizzata, senza toccare nessun'altra impostazione:

.chat-anchor-bubble {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.desktop-heading {
  border-bottom: 2px solid var(--user-bg-color);
}

Alcune cose da tenere a mente​

La bolla mobile è sempre position: fixed, ancorata in basso a sinistra o in basso a destra a seconda della Posizione della bollaimpostazione (vedi Posizionamento e layout della chat). Puoi ridisegnarlo con CSS personalizzato, ma spostarlo da un angolo fisso non è supportato e probabilmente si interromperà sui dispositivi mobili.

Il CSS personalizzato è globale: un campo, applicato al widget su ogni pagina e ogni blocco dello store, poiché si trova nello stesso metacampo del resto delle tue impostazioni. Mantieni i selettori nell'ambito delle classi e degli ID del widget sopra, anziché ampi selettori di tag, in modo che nulla si diffonda nel resto del tema. E se aggiungi le tue animazioni o sostituisci i colori del testo, rispetta prefers-reduced-motion e mantieni leggibile il contrasto: il widget non applica nessuno dei due per te sui CSS personalizzati.

Prossimi passi​