Personalizar sua aparência no Webchat com o Webchat Playground

O Webchat Playground ajuda você a personalizar a aparência e o comportamento do seu Webchat do agente do copiloto. A interface do usuário intuitiva permite que você modifique cores, fontes, miniaturas e muito mais para combinar com a identidade da sua marca. Este artigo descreve como usar o Webchat Playground para criar e gerenciar temas e exportar estilos como JSON ou HTML.

Interface do Usuário do Webchat Playground

A interface amigável do Webchat Playground ajuda você a definir a aparência e a sensação do seu Webchat. Você pode facilmente fazer ajustes e ver versões preliminares em tempo real das suas alterações.

A interface possui três áreas principais:

1. O painel esquerdo mostra os temas salvos com suas cores primária, secundária e de destaque. Selecione um tema para editar ou visualizar.

2. O painel do meio mostra uma versão preliminar do tema selecionado ou do tema que você está editando.

3. O painel direito permite alternar entre as guias JSON e Trecho de Código. A exibição JSON fornece os estilos atuais em um array de JSON, que você pode colar em um Webchat existente. A exibição de Trecho de Código contém um HTML de amostra de um Webchat com os estilos incorporados.

Este exemplo da interface do usuário mostra:

1. No painel esquerdo, está o editor de estilo onde você edita ou cria um tema.

   As seções incluem General, Caixa de Envio, Caixa de Sugestão, Avatar e Bolha. O editor também inclui um verificador de acessibilidade para todas as seções aplicáveis. Você salva e exclui ações no topo.

2. No painel direito, a guia Trecho de Código exibindo o HTML de exemplo. Alterne para a guia JSON para ver o JSON de exemplo.

Use temas predefinidos ou crie os seus próprios

O Webchat Playground oferece temas predefinidos que mostram diferentes opções de personalização para a experiência do Webchat. Esses temas te dão um ponto de partida ao criar um novo tema. Você também pode criar novos temas para atender às suas necessidades específicas e guardá-los para uso futuro.

Visualizar um tema

Selecione um tema no painel esquerdo (onde as cores são mostradas) para abrir a Visualização do Webchat.

Criar um tema

Para criar um novo tema:

1. Selecione Adicionar um tema no painel esquerdo.
   O painel esquerdo vira um editor de estilo onde você pode fazer modificações.
2. Inserir um nome para o tema.
3. Selecione Salvar.

Editar um tema

Para editar um tema existente:

1. Selecione o ícone de lápis ao lado do nome do tema no painel esquerdo.
2. Faça modificações no editor de estilo.
3. Quando terminar, selecione Salvar.

Excluir um tema

Para excluir um tema existente:

1. Abra o tema no modo de edição.
2. Selecionar o ícone de exclusão (lixeira) na parte superior.

Exportar estilos

Para exportar estilos:

1. Selecione o tema que deseja no seletor de tema.
2. Selecione a guia JSON no painel direito.
3. Copie todo o texto da visualização e cole no HTML do seu Webchat usando a variável styleOptions.

Exporte o trecho do HTML

Para exportar o trecho do HTML:

1. Selecione o tema que deseja no seletor de tema.
2. Selecione a guia Trecho de Código no painel direito.
3. Salve toda a marcação HTML na visualização como um arquivo com uma extensão .html.
4. Carregue o arquivo HTML no servidor Web.

HTML exemplo

O trecho de HTML de exemplo apresenta um controle de Webchat de widget flutuante com os estilos selecionados aplicados.

Informações relacionadas

• Personalizar a aparência de um agente