---
title: "Configurações Webchat"
slug: "configurações-webchat"
updated: 2026-09-30T18:50:03Z
published: 2026-09-30T18:50:03Z
canonical: "docs.omnisiga.ai/configurações-webchat"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omnisiga.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurações Webchat

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:

1. Clique em **Desabilitar**.
2. 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.