CSS personalizzato
Il quinto passo del wizard mette a disposizione un editor CSS per personalizzazioni che vanno oltre le opzioni grafiche standard (colori, carattere, posizione) descritte in Personalizzazione grafica.
Il passo CSS è visibile solo a chi dispone del permesso di amministrazione widget completa.
Prerequisiti
- Un widget già creato (vedi Creare un widget).
- Permesso di amministrazione widget completa.
- Conoscenza di base di CSS.
Quando usare il CSS personalizzato
Le opzioni del passo Grafica coprono i casi più comuni (colori, font, dimensione e posizione del pulsante). Il CSS personalizzato è utile quando è necessario intervenire su aspetti non coperti da quelle opzioni: ad esempio ombreggiature, animazioni, spaziature specifiche, oppure per allineare l'aspetto del widget a un design system già esistente sul sito.
L'editor CSS
Il CSS inserito nell'editor viene applicato in aggiunta ai fogli di stile standard del widget, con precedenza su di essi: le regole personalizzate sovrascrivono quindi le opzioni grafiche impostate nel passo Grafica quando entrambe agiscono sullo stesso selettore.
Classe radice e selettori stabili
Ogni widget espone una classe CSS radice configurabile nel passo Configurazioni — Visualizzazione (vedi Creare un widget), di default askme_chat. Tutte le regole del CSS personalizzato dovrebbero essere annidate sotto questa classe, per evitare di interferire con il resto della pagina ospitante:
.askme_chat .chat-header {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
Le classi CSS del widget non vanno mai rinominate: un aggiornamento del widget può reintrodurre le classi originali e rompere la personalizzazione. Il CSS personalizzato deve modificare le regole applicate alle classi esistenti, non sostituirle con classi proprie.
Esempi pratici
Arrotondare gli angoli della finestra di chat:
.askme_chat .chatbox {
border-radius: 16px;
overflow: hidden;
}
Nascondere il pulsante di invio trascrizione mantenendo attiva l'opzione lato configurazione (utile quando si preferisce gestire l'azione diversamente sul sito):
.askme_chat .transcription-button {
display: none;
}
Problemi comuni
| Problema | Causa | Soluzione |
|---|---|---|
| Uno stile personalizzato smette di funzionare dopo un aggiornamento | Il CSS faceva riferimento a una classe che è stata rinominata invece che modificata | Verificare i selettori nell'ispettore del browser e aggiornare le regole sulle classi correnti, senza mai definire classi proprie in sostituzione |
| Il CSS personalizzato non si applica | Le regole del passo Grafica hanno la stessa specificità e vengono applicate dopo | Aumentare la specificità del selettore (ad esempio includendo la classe radice) o usare !important con cautela |
| Il passo CSS non è visibile | L'utente non ha il permesso di amministrazione widget completa | Richiedere il permesso a un amministratore |