Personalizar a aparência do WebChat com o Webchat Playground

O Webchat Playground ajuda você a personalizar a aparência e o comportamento do agente Webchat. 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 Webchat Playground

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

A interface possui três áreas principais:

  1. O painel esquerdo mostra temas salvos com suas cores primárias, secundárias e de destaque. Selecione um tema para editá-lo 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. O modo de exibição JSON fornece os estilos atuais em uma matriz JSON, que você pode colar em um Webchat existente. A visualização de trecho de código contém um exemplo de HTML de um Webchat com os estilos inseridos.

Captura de tela da interface do usuário do Webchat Playground mostrando os temas disponíveis, o painel de visualização e um snippet de código JSON.

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 Geral, 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 na parte superior.

  2. No painel direito, a guia Trecho de Código exibindo o HTML de exemplo. Mude para a aba JSON para visualizar o exemplo de JSON.

Captura de tela da interface do usuário do Webchat Playground mostrando o editor de estilo do tema, o painel de visualização e a guia Trecho de Código.

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 de 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 novo 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. Insira um nome para o tema.
  3. Clique em 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.

Estilos de exportação

Para exportar estilos:

  1. Selecione o tema desejado no seletor de tema.
  2. Selecione a guia JSON no painel direito.
  3. Copie todo o texto na exibição e cole-o no HTML do WebChat usando a styleOptions variável.

Exporte o trecho do HTML

Para exportar o trecho do HTML:

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

exemplo de HTML

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

Captura de tela do widget flutuante do Webchat com estilos personalizados aplicados.

  • Last updated on