---
title: "Definições Webchat"
slug: "definicoes-do-webchat-1-1"
updated: 2025-01-29T01:43:04Z
published: 2025-01-29T01:43:04Z
canonical: "docs.omnisiga.ai/definicoes-do-webchat-1-1"
---

> ## 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.

# Definições Webchat

Este guia fornece um passo a passo detalhado para configurar o **WebChat** no sistema **OmniSiga**. A seguir, vamos passar pelas etapas de configuração e anatomia de cada seção do WebChat, explicando como personalizar cada elemento.

## **1. Pré-visualização das Configurações de Estilização**

Antes de iniciar as configurações, você verá a pré-visualização da estilização aplicada ao WebChat. Isso inclui elementos como mensagens, botões, ícones e a aparência geral do chat.

#### **Passo 1: Visualize a configuração da estilização**

- A pré-visualização será exibida, permitindo que você veja como o chat ficará após a personalização.

![Pré-visualização da estilização](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2877%29.png)

## **2. Código de Integração**

Após configurar as opções visuais e funcionais, será gerado um código para integração do **WebChat** em seu site.

#### **Passo 2: Copie e cole o código gerado**

- O código gerado deve ser inserido no seu site para renderizar o **Widget** do WebChat.
- Esse código integrará o fluxo de atendimento do OmniSiga diretamente em seu site.  

![Código gerado para integração](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2878%29.png)

## **3. Mensagem de Entrada Estática**

O campo **Mensagem de Entrada Estática** permite que você configure uma mensagem predefinida para ser exibida quando o usuário entrar no chat de atendimento.

#### **Passo 3: Configure a mensagem de entrada estática**

- Se a opção **"Iniciar fluxo automaticamente"** estiver **desmarcada**, a mensagem de entrada será exibida primeiro, antes que o fluxo de atendimento seja iniciado.
- **Se "Iniciar fluxo automaticamente" estiver marcada**, o bot começará o atendimento automaticamente e a mensagem de entrada não será exibida.

![Configuração da mensagem de entrada](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2879%29.png)

## **4. Configurações de Aparência do Chat**

Aqui você pode ajustar várias opções de personalização para a interface do chat, incluindo o título, logo e cores.

#### **Passo 4: Personalize a aparência do chat**

- Defina o **título** do chat.
- Escolha a **logo** que aparecerá no cabeçalho.
- Configure a **cor de fundo**, **cor do cabeçalho**, **cor do título** e o **cor do status**.  

![Configuração da aparência do chat](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2891%29.png)

## **5. Aparência das Mensagens do Bot**

Personalize as mensagens enviadas pelo bot, ajustando seu nome, avatar e outros aspectos gráficos.

#### **Passo 5: Configure a aparência das mensagens do bot**

- Defina o **nome** do bot.
- Escolha o **avatar ou logo** do bot.
- Ajuste a **tipografia** das mensagens (tamanho e fonte do nome, texto e horário).
- Configure a **cor de fundo**, **cor do texto**, **cor do nome do bot** e a **cor do horário da mensagem**.  

![Aparência das mensagens do bot](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2889%29.png)

## **6. Aparência das Mensagens do Usuário**

Agora, personalize as mensagens enviadas pelos usuários, incluindo a exibição do nome e a tipografia.

#### **Passo 6: Personalize as mensagens do usuário**

- Defina o **nome** do usuário.
- Ajuste a **tipografia** das mensagens (tamanho e fonte do nome, texto e horário).
- Configure a **cor de fundo**, **cor do texto**, **cor do nome do bot** e a **cor do horário da mensagem**.  

![Aparência das mensagens do usuário](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2888%29.png)

## **7. Aparência dos Botões**

O WebChat também permite configurar a aparência dos botões, garantindo que eles se alinhem ao estilo visual do seu site.

#### **Passo 7: Personalize os botões**

- **Cor de fundo dos botões:** Escolha a cor que será exibida como fundo nos botões.
- **Cor do texto dos botões:** Personalize a cor do texto exibido nos botões.
- **Cor do texto selecionado:** Defina a cor do texto quando um botão for selecionado.
- **Cor de fundo selecionado:** Ajuste a cor de fundo do botão quando ele for selecionado.

![Configuração da aparência dos botões](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2887%29.png)

## **8. Aparência do Widget**

Finalmente, configure a aparência do **Widget** que será exibido na sua página web, ajustando o ícone, o posicionamento e outras opções.

#### **Passo 8: Personalize o widget**

- Escolha o **ícone** do widget.
- Ajuste o **diâmetro**, o **posicionamento** (à esquerda ou à direita) e a **distância das laterais**.
- Configure o **texto do balão** e outras opções visuais.  

![Configuração da aparência do widget](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image%2892%29.png)