Personalize a aparência do Webchat com o Webchat Playground

O Webchat Playground ajuda-o a personalizar a aparência e o comportamento do seu agente Webchat. A interface de utilizador intuitiva permite-lhe modificar cores, tipos de letra, miniaturas e muito mais para corresponder à 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 do seu Webchat. Pode facilmente fazer ajustes e ver pré-visualizações em tempo real das suas alterações.

A interface tem três áreas principais:

  1. O painel esquerdo mostra os temas guardados com as suas cores primárias, secundárias e de destaque. Selecione um tema para o editar ou pré-visualizar.

  2. O painel central fornece uma pré-visualização do tema selecionado ou do tema que está a editar.

  3. O painel direito permite alternar entre as guias JSON e Trechos de Código . A visualização JSON fornece os estilos atuais em uma matriz JSON, que você pode colar num chat na Web existente. A vista de Excertos de Código contém exemplos de HTML de um Webchat com os estilos incorporados.

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

Este exemplo da interface do usuário mostra:

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

    As seções incluem Geral, Caixa de envio, Caixa de sugestões, Avatar e Bolha. O editor inclui também um verificador de acessibilidade para todas as secções aplicáveis. Você salva e exclui ações na parte superior.

  2. No painel direito, o separador Fragmento de Código apresenta um exemplo de HTML. Mude para o separador JSON para ver o exemplo de JSON.

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

Use temas predefinidos ou crie o seu próprio

O Webchat Playground oferece temas pré-definidos que mostram diferentes opções de personalização para a experiência do Webchat. Estes temas dão-lhe um ponto de partida ao conceber um novo tema. Também pode criar novos temas para atender às suas necessidades específicas e guardá-los para utilização futura.

Pré-visualização de um tema

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

Criar um novo tema

Para criar um novo tema:

  1. Selecione Adicionar um tema no painel esquerdo.
    O painel esquerdo torna-se um editor de estilo onde você pode fazer modificações.
  2. Insira um nome para o tema.
  3. Selecione Guardar.

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 tiver terminado, selecione Guardar.

Eliminar um tema

Para eliminar um tema existente:

  1. Abra o tema no modo de edição.
  2. Selecionar o ícone Eliminar (caixote do lixo) na parte superior.

Estilos de exportação

Para exportar estilos:

  1. Selecione o tema desejado no seletor de temas.
  2. Selecione a guia JSON no painel direito.
  3. Copie todo o texto da vista e cole no seu Webchat HTML usando a variável styleOptions.

Exportar o fragmento de HTML

Para exportar o fragmento de HTML:

  1. Selecione o tema desejado no seletor de temas.
  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 ficheiro HTML para o servidor Web.

Exemplo de HTML

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

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

  • Last updated on