Personalizzare l'aspetto di chat Web con Webchat Playground

Webchat Playground consente di personalizzare l'aspetto e il comportamento dell'agente chat Web. L'interfaccia utente intuitiva consente di modificare colori, tipi di carattere, anteprime e altro ancora in base all'identità del marchio. Questo articolo descrive come usare Webchat Playground per creare e gestire temi ed esportare stili come JSON o HTML.

Interfaccia utente di Webchat Playground

L'interfaccia intuitiva di Webchat Playground consente di definire l'aspetto della chat Web. È possibile apportare facilmente modifiche e visualizzare le anteprime in tempo reale delle modifiche.

L'interfaccia ha tre aree principali:

1. Il riquadro sinistro mostra i temi salvati con i colori principali, secondari e di evidenziazione. Seleziona un tema da modificare o visualizzare in anteprima.

2. Il riquadro centrale fornisce un'anteprima del tema selezionato o del tema che stai modificando.

3. Il riquadro destro consente di passare da una scheda JSON a un frammento di codice . La visualizzazione JSON fornisce gli stili correnti in una matrice JSON, che è possibile incollare in una Chat Web esistente. La visualizzazione Frammento di codice contiene il codice HTML di esempio di una chat Web con gli stili incorporati.

Questo esempio dell'interfaccia utente mostra:

1. Nel riquadro sinistro l'editor di stili in cui si modifica o si crea un tema.

   Le sezioni includono Generale, Send Box, Suggestion Box, Avatar e Bubble. L'editor include anche un controllo accessibilità per tutte le sezioni applicabili. Le azioni vengono salvate ed eliminate nella parte superiore.

2. Nel riquadro destro la scheda Frammento di codice che visualizza codice HTML di esempio. Passa alla scheda JSON per visualizzare un esempio di JSON.

Usare temi predefiniti o crearne di personalizzati

Webchat Playground offre temi predefiniti che mostrano diverse opzioni di personalizzazione per l'esperienza web chat. Questi temi offrono un punto di partenza per la progettazione di un nuovo tema. È anche possibile creare nuovi temi per soddisfare le proprie esigenze specifiche e salvarli per un uso futuro.

Visualizzare in anteprima un tema

Seleziona un tema nel riquadro sinistro (in cui vengono visualizzati i colori) per aprire l'anteprima di Webchat.

Creazione di un nuovo tema

Per creare un nuovo tema:

1. Seleziona Aggiungi un tema dal riquadro di sinistra.
   Il riquadro sinistro diventa un editor di stili in cui è possibile apportare modifiche.
2. Immetti un nome per il tema.
3. Seleziona Salva.

Modificare un tema

Per modificare un tema esistente:

1. Seleziona l'icona a forma di matita accanto al nome del tema nel riquadro sinistro.
2. Apporta modifiche nell'editor di stile.
3. Al termine, scegliere Salva.

Eliminare un tema

Per eliminare un tema esistente:

1. Apri il tema in modalità di modifica.
2. Seleziona l'icona cestino (elimina) nella parte superiore.

Stili di esportazione

Per esportare gli stili:

1. Seleziona il tema desiderato dal selettore del tema.
2. Selezionare la scheda JSON nel riquadro destro.
3. Copiare tutto il testo nella visualizzazione e incollarlo nel codice HTML chat Web usando la variabile styleOptions.

Esportare il frammento di codice HTML

Per esportare il frammento di codice HTML:

1. Seleziona il tema desiderato dal selettore del tema.
2. Selezionare la scheda Frammento di codice nel riquadro destro.
3. Salva tutto il markup HTML nella vista come file con estensione .html.
4. Carica il file HTML nel server Web.

Esempio di HTML

Il frammento HTML di esempio include un widget fluttuante di controllo di chat Web con gli stili selezionati applicati.

Informazioni correlate

• Personalizzare l'aspetto di un agente