Stile del Widget di chat con CSS personalizzato

CSS personalizzato

Se le impostazioni integrate per colori e temi non sono sufficienti, puoi personalizzare lo stile di entrambi i widget con il tuo CSS. Il CSS viene inserito direttamente nel widget, quindi funziona anche se il widget viene eseguito in uno Shadow DOM non raggiungibile dai fogli di stile della pagina.

Disponibile sui piani Standard e superiori, sia per il widget mobile che per il Widget integrato, ciascuno con il proprio campo CSS dedicato.

Dove trovarlo

• Widget mobile: Dashboard → il tuo assistente → Canali → Widget di chat → Advanced
• Widget integrato: Dashboard → il tuo assistente → Canali → Chat integrata → Advanced

L'Anteprima live accanto all'editor applica il tuo CSS in tempo reale durante la digitazione. Il campo accetta fino a 20.000 caratteri.

Selettori stabili

Il tuo CSS fa riferimento agli elementi del widget tramite queste classi documentate. Costituiscono un contratto stabile: continuano a funzionare anche dopo gli aggiornamenti del widget.

Attenzione: Solo questi selettori sono stabili. Tutti gli altri nomi di classi interne possono cambiare senza preavviso durante l'aggiornamento del widget, rischiando di compromettere lo stile. Verifica nuovamente lo stile dopo ogni aggiornamento del widget.

!important non necessario

Il tuo CSS sovrascrive automaticamente gli stili integrati del widget, i selettori standard sono sufficienti:

.wca-header {
  background: #0f172a;
}
.wca-message--bot {
  border-radius: 4px;
}

A livello tecnico, il widget sposta i suoi stili integrati all'interno di un layer della cascata CSS quando è presente del CSS personalizzato, quindi le tue regole (prive di layer) hanno sempre la priorità indipendentemente dalla specificità del selettore.

Esempi

Personalizzare il pulsante di chat con un'animazione:

@keyframes wca-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.wca-bubble {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: wca-pulse 2s ease-in-out infinite;
}

Fumetti dei messaggi squadrati con dimensione del font personalizzata:

.wca-message--bot,
.wca-message--user {
  border-radius: 4px;
  font-size: 15px;
}

Stile personalizzato del campo di input:

.wca-input {
  border: 2px solid #0f172a;
  border-radius: 8px;
}
.wca-input::placeholder {
  color: #94a3b8;
}

Limitazioni

• Posizione e dimensioni del widget mobile (offset, larghezza, altezza) sono controllate dalle impostazioni della dashboard, non dal CSS, in quanto vengono applicate come stili inline
• Altre classi interne diverse dai selettori .wca-* documentati non sono stabili
• Le direttive @import e i riferimenti url() esterni sono consentiti, ma vengono conteggiati nel limite di caratteri e aumentano i tempi di caricamento

Best practice

• Usa preferibilmente le impostazioni integrate per colori, font e immagini, ricorrendo al CSS personalizzato solo per ciò che le impostazioni non consentono di fare
• Attieniti ai selettori documentati per evitare che gli aggiornamenti del widget compromettano lo stile
• Verifica il sito live dopo gli aggiornamenti del widget, soprattutto se sono stati applicati stili ad elementi diversi dai selettori stabili
• Mantieni il codice essenziale, un gruppo ridotto di regole mirate è più facile da gestire rispetto a una ridefinizione completa del tema