Compartilhar via

Personalizar Web Chat aparência com o Webchat Playground

O Webchat Playground ajuda você a personalizar a aparência e o comportamento do agente Web Chat. 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 Web Chat. 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. O modo de exibição JSON fornece os estilos atuais em uma matriz JSON, que você pode colar em um Web Chat existente. A visualização de fragmento de código contém um exemplo de HTML de um chat online 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 no topo.

  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 Web Chat. 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. 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.

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 na exibição e cole-o em seu HTML Web Chat 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 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 chat na web com estilos personalizados aplicados.

  • Last updated on