Partilhar via

Personalize a aparência do Web Chat com o Webchat Playground

O Webchat Playground ajuda-o a personalizar a aparência e o comportamento do seu agente Web Chat. A interface de utilizador intuitiva permite modificar cores, tipos de letra, miniaturas e muito mais para corresponder à identidade da sua marca. Este artigo descreve como utilizar o Ambiente de Demonstração do Webchat para criar e gerir temas e exportar estilos como JSON ou HTML.

IU do Ambiente de Demonstração do Webchat

A interface intuitiva do Webchat Playground ajuda-o a definir a aparência e a sensação do seu Web Chat. 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 do meio oferece 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 vista JSON fornece os estilos atuais num array JSON, que pode colar num Web Chat existente. A vista de Excertos de Código contém exemplos de HTML de um Web Chat 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 IU mostra:

  1. No painel esquerdo, está o editor de estilo onde pode editar ou criar 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. As ações Guardar e Eliminar encontram-se 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.

Utilizar temas predefinidos ou criar os seus próprios temas

O Webchat Playground oferece temas pré-definidos que mostram diferentes opções de personalização para a experiência do Web Chat. Estes temas dão-lhe um ponto de partida para estruturar 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 pode fazer modificações.
  2. Introduza um nome para o tema.
  3. Selecione Guardar.

Editar um tema

Para editar um tema existente:

  1. Selecione o ícone de lápis junto ao nome do tema no painel esquerdo.
  2. Efetue 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.

Exportar estilos

Para exportar estilos:

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

Exportar o fragmento de HTML

Para exportar o fragmento de HTML:

  1. Selecione o tema pretendido 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.

HTML de amostra

O fragmento de HTML de exemplo apresenta um controlo de Webchat de widget flutuante com os estilos selecionados aplicados.

Captura de ecrã do widget flutuante Web Chat com estilos personalizados aplicados.

  • Last updated on