A tela Configuração de Webchat permite personalizar a aparência, o posicionamento e alguns comportamentos do Webchat, além de disponibilizar o código necessário para incorporá-lo ao site do cliente.
A tela possui dois estados:
| Estado | O que aparece |
|---|---|
| Canal habilitado | Os blocos de configuração, a pré-visualização e os botões Atualizar e Desabilitar. |
| Canal desabilitado | O aviso O Webchat ainda não está habilitado e o botão Habilitar canal. Enquanto o canal estiver desativado, nenhuma conversa é recebida. |
Faça os ajustes nos blocos disponíveis e, ao final, clique em Atualizar.
A pré-visualização reage às alterações em tempo real, permitindo conferir o resultado antes de salvar.
Habilitar o canal
Quando o Webchat estiver desabilitado, clique em Habilitar canal e confirme a operação. A configuração será criada utilizando os valores atuais do formulário.
Desabilitar o canal
Para interromper o recebimento de conversas pelo Webchat:
- Clique em Desabilitar.
- Confirme a operação.
A tela retornará ao estado desabilitado.
Código de incorporação
O bloco de identificação e acesso ao chat disponibiliza o código que deve ser inserido no site do cliente.
Código
O campo Código apresenta um snippet somente para leitura. Ele deve ser inserido antes do fechamento da tag </body> do site.
O código contém:
<script src="https://webchatjs.omnisiga.ai/chat-widget/chat-widget.js"></script>
e uma chamada de inicialização do Webchat.
O código é regenerado ao abrir a tela, após salvar a configuração e após utilizar a opção Resetar configurações.
Copiar
Clique em Copiar para copiar o código para a área de transferência. Após a cópia, o botão é identificado como Copiado!.
Resetar configurações
A opção Resetar configurações restaura os blocos para os padrões de fábrica, incluindo chat, bot, usuário, widget, botões e comportamento. O texto padrão do balão também é restaurado para Como posso te ajudar? e o código de incorporação é regenerado.
Layout do chat
Este bloco controla a aparência da janela do chat, incluindo cabeçalho, cores, tipografia, bordas e rodapé.
Identificação
| Campo | Padrão | O que faz |
|---|---|---|
| Título do chat | Chat |
Define o texto exibido no cabeçalho da janela. |
Ícone e cores do chat
| Campo | Padrão | O que faz |
|---|---|---|
| Template | OmnSIGA |
Abre a janela Selecionar template, com os temas OmnSIGA, Oceano e Galáxia. Ao aplicar um tema, as cores e a tipografia de todos os blocos são substituídas e o logo do chat e o avatar do bot retornam ao padrão do OmniSiga. Depois disso, os campos podem ser personalizados novamente. |
| Logo do chat | Logo do OmniSiga sobre fundo branco | Define a imagem ou o ícone exibido no cabeçalho. O seletor permite usar um ícone do sistema, uma imagem via link, um upload de arquivo ou sem imagem, além de definir a cor do plano de fundo. |
| Plano de fundo | #FFFFFF |
Define a cor atrás do logo no cabeçalho. |
Cores do chat
| Campo | Padrão | O que faz |
|---|---|---|
| Cabeçalho | #228CD1 |
Cor de fundo do cabeçalho. |
| Título | #FFFFFF |
Cor do texto do título. |
| Status | #FFFFFF |
Cor do texto de status exibido abaixo do título. |
| Plano de fundo | #FFFFFF |
Cor de fundo da área de mensagens. |
Tipografia do chat
As opções de fonte incluem Arial, Dongle, Inter, Nunito, Roboto, Roboto Serif, Verdana e Times New Roman. O tamanho varia de 10 a 48 px e o peso pode ser 400, 500, 600 ou 700.
| Campo | Padrão | O que faz |
|---|---|---|
| Fonte do título | Dongle |
Define a fonte do título do cabeçalho. |
| Peso do título | 700 |
Define o peso da fonte do título. |
| Tamanho do título | 24 px | Define o tamanho do título. |
| Fonte do status | Dongle |
Define a fonte do texto de status. |
| Peso do status | 400 |
Define o peso da fonte do status. |
| Tamanho do status | 15 px | Define o tamanho do texto de status. |
Bordas do chat
| Campo | Padrão | O que faz |
|---|---|---|
| Tamanho da borda | 2 px |
Define a espessura da borda. Quando o valor é 0, a seleção da cor da borda fica desabilitada. |
| Cor da borda | #228CD1 |
Define a cor da borda da janela do chat. |
Cabeçalho e rodapé
| Campo | Padrão | O que faz |
|---|---|---|
| Ocultar cabeçalho do chat | Desligado | Esconde a parte superior do chat, incluindo título e status. |
| Exibir "Desenvolvido por Visual Sistemas" | Ligado | Exibe o selo © Por Visual Sistemas no rodapé. |
| Cores do rodapé → Texto | #414141 |
Define a cor do texto do selo. |
| Cores do rodapé → Link | #228CD1 |
Define a cor do link Visual Sistemas do selo. |
Estilo de mensagem do usuário
Este bloco define a aparência das mensagens enviadas pelo cliente.
Identificação
| Campo | Padrão | O que faz |
|---|---|---|
| Nome do usuário | Você |
Define o nome exibido acima das mensagens do cliente. |
Cores da mensagem
| Campo | Padrão | O que faz |
|---|---|---|
| Nome do usuário | #186394 |
Cor do nome do usuário. |
| Texto | #414141 |
Cor do texto da mensagem. |
| Horário da mensagem | #929292 |
Cor do horário da mensagem. |
| Plano de fundo | #F7F9FD |
Cor de fundo da bolha do usuário. |
Tipografia da mensagem
| Campo | Padrão | O que faz |
|---|---|---|
| Fonte | Dongle |
Fonte das mensagens do usuário. |
| Altura entre linhas | 100% |
Define o espaçamento entre linhas. As opções disponíveis variam de 80% a 200%. |
| Tamanho do nome do usuário | 24 px | Tamanho do nome exibido acima da mensagem. |
| Tamanho do texto | 20 px | Tamanho do texto da mensagem. |
| Tamanho do horário | 14 px | Tamanho do horário da mensagem. |
Layout do bot
Este bloco controla a aparência das mensagens do bot e do avatar que as acompanha.
Identificação
| Campo | Padrão | O que faz |
|---|---|---|
| Nome do bot | Bot |
Define o nome exibido acima das mensagens do bot. |
Ícone e cores do avatar
| Campo | Padrão | O que faz |
|---|---|---|
| Avatar/Logo | Logo do OmniSIGA sobre fundo branco | Define a imagem ou o ícone do avatar. O mesmo seletor permite usar ícone do sistema, imagem por link, upload, ausência de imagem e cor de fundo. |
| Ícone | #000000 |
Define a cor do ícone ou contorno quando um ícone do sistema é utilizado. |
| Plano de fundo | #FFFFFF |
Define a cor de fundo do avatar. |
Cores do bot
| Campo | Padrão | O que faz |
|---|---|---|
| Título | #186394 |
Cor do nome do bot. |
| Texto | #414141 |
Cor do texto das mensagens do bot. |
| Horário da mensagem | #929292 |
Cor do horário das mensagens. |
| Plano de fundo | #E9F4FA |
Cor de fundo da bolha do bot. |
Tipografia do bot
| Campo | Padrão | O que faz |
|---|---|---|
| Fonte | Dongle |
Fonte das mensagens do bot. |
| Altura entre linhas | 100% |
Espaçamento entre linhas do texto. |
| Tamanho do nome do bot | 24 px | Tamanho do nome do bot. |
| Tamanho do texto | 20 px | Tamanho do texto das mensagens. |
| Tamanho do horário | 14 px | Tamanho do horário das mensagens. |
Layout do widget
Este bloco controla o botão flutuante que abre o chat, o balão de convite e a posição do widget na página.
Balão de texto
| Campo | Padrão | O que faz |
|---|---|---|
| Texto do balão do seu widget | Como posso te ajudar? |
Define a mensagem exibida no balão de convite. O campo fica desabilitado enquanto Mostrar balão de texto do widget estiver desligado. |
| Tempo para o balão de texto aparecer | 0 segundos |
Define o atraso para o aparecimento do balão. O campo fica desabilitado enquanto Mostrar balão de texto do widget estiver desligado. |
| Mostrar balão de texto do widget | Desligado | Exibe ou oculta o balão de convite. Também controla a habilitação dos campos relacionados ao balão. |
| Cores do balão → Cor de fundo | #228CD1 |
Define a cor de fundo do balão. |
| Cores do balão → Cor do texto | #FFFFFF |
Define a cor do texto do balão. |
Ícone e cores do widget
| Campo | Padrão | O que faz |
|---|---|---|
| Imagem do widget | Ícone robot-outline |
Define a imagem ou o ícone exibido no botão flutuante. No seletor do widget, a opção sem imagem não está disponível. |
| Diâmetro do widget | 50 px |
Define o tamanho do botão flutuante. A largura e a altura são iguais. |
| Plano de fundo | #228CD1 |
Define a cor de fundo do botão. |
| Cor do botão de fechar | #FFFFFF |
Define a cor do ícone que fecha a janela do chat. |
Tipografia do widget
| Campo | Padrão | O que faz |
|---|---|---|
| Fonte | Dongle |
Fonte do balão de convite. |
| Peso | 600 |
Peso da fonte do balão. |
| Tamanho | 16 px | Tamanho da fonte do balão. |
Posição e distância do widget
| Campo | Padrão | O que faz |
|---|---|---|
| Direita / Esquerda | Direita | Define em qual lado da tela o botão ficará. Ao escolher Esquerda, o balão acompanha esse lado. |
| Distância lateral | 20 px |
Define a distância do botão até a lateral escolhida. |
| Distância abaixo | 20 px |
Define a distância do botão até a parte inferior da página. |
Largura e altura do chat em dispositivos móveis
| Campo | Padrão | O que faz |
|---|---|---|
| O chat preenche toda a tela do dispositivo | Desligado | Em telas pequenas, faz o chat ocupar toda a tela do celular em vez da janela flutuante de 360 px. Em uma pré-visualização muito baixa, a miniatura pode ser fechada automaticamente quando essa opção estiver ligada. |
Controle de interações
Este bloco controla a aparência dos botões de resposta rápida enviados pelo bot.
Cores do seu botão
| Campo | Padrão | O que faz |
|---|---|---|
| Estado padrão | #FFFFFF |
Cor de fundo do botão não selecionado. |
| Estado selecionado | #E9F4FA |
Cor de fundo do botão depois de selecionado. |
| Texto padrão | #414141 |
Cor do texto do botão não selecionado. |
| Texto selecionado | #272727 |
Cor do texto do botão selecionado. |
| Borda | #B4B4B4 |
Cor da borda dos botões. |
Tipografia do seu botão
| Campo | Padrão | O que faz |
|---|---|---|
| Fonte | Dongle |
Fonte do texto dos botões. |
| Tamanho do texto | 24 px | Tamanho do texto dos botões. |
| Peso | 400 |
Peso da fonte dos botões. |
| Borda (arredondamento) | 12 px | Define o arredondamento dos cantos dos botões. |
| Margem superior | 8 px | Espaço entre o botão e a mensagem acima. |
| Espaçamento | 8 px | Espaço entre um botão e outro. |
Regras de exibição e comportamento
Este bloco controla o comportamento do chat na abertura e durante a interação.
| Campo | Padrão | O que faz |
|---|---|---|
| Mensagem (saudação) | Vazia | Exibe uma mensagem estática ao abrir o chat, antes de qualquer interação. Pode ser usada para saudar o cliente ou apresentar opções. Quando fica vazia, o chat começa diretamente pelo fluxo. |
| Iniciar fluxo automaticamente | Ligado | Inicia o fluxo do bot assim que o chat é aberto, sem exigir uma primeira mensagem do cliente. |
| Foco automático após envio de mensagem | Ligado | Retorna o foco ao campo de digitação depois de cada envio. |
| Ocultar o campo de mensagem enquanto a última mensagem do bot tiver botões | Desligado | Esconde o campo de digitação enquanto a última mensagem do bot apresentar botões, fazendo com que o cliente responda por eles. |
Pré-visualização
A pré-visualização fica disponível na lateral da tela e mostra o resultado da configuração em tempo real.
Ela apresenta:
- o botão flutuante, com o ícone, as cores, o diâmetro e a posição configurados;
- a janela do chat, com cabeçalho, mensagens, botões e rodapé;
- o balão de convite, quando ele está habilitado, possui texto e a janela do chat está fechada.
Clique no botão flutuante para abrir ou fechar a miniatura do chat.
Boas práticas
- Utilize a pré-visualização para conferir as alterações antes de salvar.
- Após configurar o Webchat, teste o código de incorporação no site onde ele será utilizado.
- Ao alterar o Template, revise as demais configurações, pois o tema substitui cores e tipografia de todos os blocos e restaura o logo do chat e o avatar do bot para o padrão.
- Quando o Webchat estiver desabilitado, nenhuma conversa será recebida.