Personalizzare l'aspetto Web Chat con Webchat Playground

Webchat Playground consente di personalizzare l'aspetto e il comportamento dell'agente Web Chat. 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 il playground Webchat 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 del Web Chat. È 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 un Web Chat esistente. La visualizzazione Frammento di codice contiene codice HTML di esempio di un Web Chat 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 opzioni di personalizzazione diverse per l'esperienza di 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.

Creare 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, seleziona 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.

Esporta stili

Per esportare 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 Web Chat 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 Web Chat con gli stili selezionati applicati.

Informazioni collegate

• Personalizzare l'aspetto di un agente