Personalizzazione grafica
Il quarto passo del wizard permette di personalizzare l'aspetto del widget: colori, carattere, dimensione e posizione del pulsante flottante, con un'anteprima live che riflette immediatamente ogni modifica.
Prerequisiti
- Un widget già creato (vedi Creare un widget).
- Permesso di gestione widget.
L'anteprima live
Il passo Grafica mostra, accanto ai controlli, un'anteprima fedele al widget reale nella variante grafica selezionata (nuova o classica, vedi Il widget di chat). Ogni modifica di colore, carattere o posizione si riflette immediatamente nell'anteprima, senza necessità di salvare.
Colori
I colori sono configurabili tramite selettore colore. Alcuni campi sono comuni a entrambe le varianti grafiche, altri sono specifici:
| Campo | Elemento | Variante |
|---|---|---|
| Colore sfondo intestazione | Barra dell'header | Entrambe |
| Colore testo intestazione | Testo dell'header | Entrambe |
| Colore sfondo pulsante | Pulsante flottante chiuso | Entrambe |
| Colore sfondo generale | Sfondo della finestra di chat | Entrambe |
| Colore sfondo/testo messaggi ricevuti | Bolle dei messaggi ricevuti | Entrambe |
| Colore sfondo/testo messaggi inviati | Bolle dei messaggi inviati | Entrambe |
| Colore sfondo/testo pulsanti in chat | Pulsanti di risposta rapida mostrati in conversazione | Solo classica |
| Colore testo primario / secondario | Gerarchia testuale dell'interfaccia | Solo nuova |
| Colore bordo | Bordi di contenitori e separatori | Solo nuova |
| Colore icona pulsante flottante | Icona bianca o nera sul pulsante | Solo nuova |
La palette predefinita utilizza i colori brand Askme: #FFBB00 per lo sfondo del pulsante e dell'intestazione, #202020 per il testo. Il giallo #FFBB00 è pensato come colore di riempimento: va sempre abbinato a un testo scuro sopra, non usato come colore di testo su sfondo chiaro.
Carattere e dimensioni
Il campo Carattere accetta il nome di una famiglia di font (testo libero); il default è il carattere brand del widget. La dimensione del pulsante flottante è configurabile in pixel.
Posizione del pulsante
Il pulsante flottante si posiziona tramite margini (destro, inferiore, superiore, sinistro) espressi in pixel: impostando margine destro e inferiore si ottiene il posizionamento nell'angolo in basso a destra (default), e analogamente per gli altri angoli. È possibile anche una combinazione personalizzata dei quattro margini.
Risultato atteso
Il widget installato sul sito riflette i colori, il carattere e la posizione configurati, coerentemente con la variante grafica scelta nel passo Configurazioni.
Problemi comuni
| Problema | Causa | Soluzione |
|---|---|---|
| Il testo di un messaggio non è leggibile | Il colore di sfondo e il colore del testo hanno un contrasto insufficiente | Verificare il contrasto nell'anteprima live prima di salvare; evitare testo chiaro su sfondo chiaro (in particolare non usare #FFBB00 come colore di testo) |
| Un campo colore non produce effetto | Il campo appartiene alla variante grafica non attualmente selezionata | Verificare la variante grafica nel passo Configurazioni (vedi Creare un widget) |
| Il pulsante compare in una posizione inattesa | Sono impostati margini contrastanti (es. sia sinistro sia destro) | Impostare solo i due margini corrispondenti all'angolo desiderato |