> For the complete documentation index, see [llms.txt](https://docs.mavibot.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mavibot.ai/doc/pt/chatbot/live-chat.md).

# Live Chat do site

Ao instalar um chat online no seu site, você pode coletar dados de clientes e automatizar a comunicação com visitantes diretamente no seu site.

Você também pode conectar sua equipe de vendas ao chat, permitindo que gerentes participem das conversas com os clientes. A comunicação pode ocorrer pela interface web do MaviBot ou pelos nossos aplicativos móveis para Android e iOS.

## Como criar um site de chat ao vivo

Para criar um chat, vá até a seção "Mensageiros" e clique no botão "Chat ao vivo".

<div data-with-frame="true"><figure><img src="/files/bc8cfe217f41903ec5d864441492bb4c716c7cb2" alt=""><figcaption></figcaption></figure></div>

Depois que você clicar no botão "Chat online", o painel de configurações do chat recém-criado será aberto automaticamente.

A aparência do chat dependerá das configurações escolhidas. No lado direito, você verá uma prévia ao vivo do widget do chat, que pode ser aberta e fechada para testar como ele parece e se comporta.

## Configurações

### Decoração

<div data-with-frame="true"><figure><img src="/files/bd32b34a78630d2bbfca5e93b147c9371e6b4f5b" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Título do chat**

Este campo define o nome do chat online — ele aparecerá no topo da janela do chat.&#x20;

2. **Subtítulo do chat**

Este campo fica abaixo do título do chat e permite esclarecer a função ou a finalidade do chat online no seu site.

3. **Rótulo especificado do widget**

O rótulo no botão do widget é exibido quando o chat online está minimizado. Por padrão, ele mostra o texto dos campos de título e subtítulo, mas você pode definir um rótulo diferente, se necessário.

4. **Mensagem de boas-vindas do chat**

Este campo contém o texto da mensagem inicial de saudação do bot

<div data-with-frame="true"><figure><img src="/files/bcb7371b3621b189c1561802c7248ef13a5d1695" alt=""><figcaption></figcaption></figure></div>

5. **Orientação do texto**

Usando a barra de ferramentas de alinhamento de texto, você pode alinhar o título e o subtítulo do chat à esquerda, à direita ou ao centro — assim como em editores de texto padrão.

<div data-with-frame="true"><figure><img src="/files/cacd7ad814b9a9e732b16d9ed2f5c46776a488a7" alt="" width="177"><figcaption></figcaption></figure></div>

6. Botão do chat

<div data-with-frame="true"><figure><img src="/files/f71052bc8806cad9159aaca506dc9041d482eb89" alt="" width="375"><figcaption></figcaption></figure></div>

Este botão foi criado para abrir o chat online quando clicado.&#x20;

Você pode escolher como o botão do chat online aparecerá em diferentes dispositivos: o desktop do site&#x20;

Há várias opções de exibição disponíveis. Você pode posicionar o botão tanto na borda direita quanto na esquerda.

7. Paleta de cores

Para personalizar o chat online do seu jeito, você pode não apenas ajustar a cor, mas também exibir padrões interessantes no fundo e no cabeçalho do chat.

<div data-with-frame="true"><figure><img src="/files/31ea247c8427771daa19802f27c5319bf26386d4" alt="" width="563"><figcaption></figcaption></figure></div>

Você também pode escolher a cor e o brilho dos padrões, bem como outros elementos do chat online. Para isso, marque a caixa "Configurações avançadas".

Você também pode configurar opções avançadas adicionais de cores para o chat online.

8. Avatar do chat online

<div data-with-frame="true"><figure><img src="/files/af1faed59a1156fcaba5b4d7677046a28fd4a378" alt="" width="563"><figcaption></figcaption></figure></div>

Esta opção permite alterar o avatar do assistente no chat online. O avatar pode ser adicionado por URL ou enviando um arquivo.

Você também pode ocultar o avatar do chat marcando esta caixa, se necessário.

9. **Logo do MaviBot**

As configurações permitem exibir o logo do MaviBot.

<div data-with-frame="true"><figure><img src="/files/71c3c9b0e8da514d53a31d610c2facd3dd4eb96a" alt="" width="369"><figcaption></figcaption></figure></div>

### Configurações

<div data-with-frame="true"><figure><img src="/files/a850176e8aa9695a08721664b6ad28a238f9dea8" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Texto dentro do campo de entrada**

Por padrão, este campo contém o texto: "Digite sua mensagem e pressione Enter."

Você pode personalizar este texto ou deixar o padrão.

2. **Inscrição na versão mobile**

Por padrão, o texto é definido como: "Escolha seu método de contato preferido."

3. **Mensagem ao atribuir um operador a um cliente**&#x20;

Se você incluir #{operatorName} neste campo, o nome do operador especificado na seção "Funcionários" será exibido.

Você pode atribuir um operador manualmente clicando no botão "Assumir cliente" ou "Transferir cliente" durante uma conversa com o cliente. Como alternativa, você pode configurar a distribuição automática de clientes entre operadores na seção "Funcionários".&#x20;

<div data-with-frame="true"><figure><img src="/files/ee8c56f272859223b0470014097f9ade32b714fc" alt="" width="563"><figcaption></figcaption></figure></div>

4. **Mensagem quando os operadores estiverem offline**

Por padrão, a seguinte mensagem será exibida:
&#x20;"Não há operadores online no momento. Por favor, deixe-nos uma mensagem e entraremos em contato com você assim que possível."

O status "Online" do bot é obtido da seção "Funcionários". Os status possíveis são: Online, Pausa e Offline.

<div data-with-frame="true"><figure><img src="/files/e54f00178fb25e987fd904a0f8233d4d7ad36180" alt="" width="563"><figcaption></figcaption></figure></div>

Você também pode alterar seu status na barra superior enquanto estiver em qualquer seção do projeto

5. **Notificação sonora no chat online**

Essas configurações permitem ativar ou desativar alertas sonoros para abertura do chat e novas mensagens no chat online para visitantes do site.

6. **Exibir mensageiro**

<div data-with-frame="true"><figure><img src="/files/613d52855266eba5f4eb905473ee2d313f0729ba" alt="" width="367"><figcaption></figcaption></figure></div>

Você pode escolher quais mensageiros são exibidos no site ao passar o mouse sobre o widget do chat online (ícone).

{% hint style="warning" %}
Os botões dos mensageiros só aparecerão depois que esses mensageiros forem conectados ao construtor.
{% endhint %}

7. **Mostrar apenas os mensageiros**

Se você ativar esta opção, apenas os botões dos mensageiros aparecerão no site. *Todas as outras funções do chat online serão desativadas!*

<div data-with-frame="true"><figure><img src="/files/cbc31eff5587a55c9f43c2bf644dbcaf6cac6d94" alt="" width="563"><figcaption></figcaption></figure></div>

8. **Texto do mensageiro**

Por padrão, ele é definido como: "Escrever para".

<div data-with-frame="true"><figure><img src="/files/4631e357457b52333cdd537507644bceba5806d9" alt="" width="563"><figcaption></figcaption></figure></div>

9. **Mensagem inicial do WhatsApp**&#x20;

Este texto aparecerá no campo de entrada do usuário no WhatsApp quando ele clicar no botão do seu site. O usuário só precisará pressionar "Enviar".

Não se esqueça de incluir também este texto nas condições do bloco inicial da sua sequência de mensagens.

<div data-with-frame="true"><figure><img src="/files/39a778f003d9e0ce8a59ff1170108ff84c3cfe1f" alt="" width="375"><figcaption></figcaption></figure></div>

10. **Links personalizados**

Além dos botões dos mensageiros, agora você também pode adicionar seus próprios botões com links personalizados.

Você pode especificar a URL do link e adicionar uma imagem nas configurações.

<div data-with-frame="true"><figure><img src="/files/e7d24759a5cca2e4bb1e714ae86dc8ebed00df10" alt="" width="563"><figcaption></figcaption></figure></div>

11. Upload de arquivo

Esta configuração permite receber anexos de visitantes do site, como imagens.

<div data-with-frame="true"><figure><img src="/files/9fcf87b1d7b06cc6f6865e9eae964630fd7ac027" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
O tamanho máximo permitido para arquivos enviados via chat online é de 20 MB.
{% endhint %}

12. **Dados do usuário**

Na primeira mensagem, você pode obter consentimento para o processamento de dados pessoais e/ou coletar informações do usuário por meio de um formulário de coleta de dados. Você também pode definir ou alterar o endereço de e-mail pela janela de boas-vindas.

<div data-with-frame="true"><figure><img src="/files/4a192f8c1c99a9eb2e363497969aa314e1276388" alt="" width="375"><figcaption></figcaption></figure></div>

O preenchimento do formulário pode ser opcional ou obrigatório ao ativar o "*Tornar o preenchimento do formulário obrigatório"* opção.

Exemplo da primeira mensagem com coleta de dados.

<div data-with-frame="true"><figure><img src="/files/b6c2e2e3027ebd19559635f7d72fec028d25ab02" alt="" width="375"><figcaption></figcaption></figure></div>

Depois de configurar o formulário, você pode selecionar as configurações de exibição do país usando um campo suspenso.

<div data-with-frame="true"><figure><img src="/files/b692aba753ef98a2778461627491cc54d378ffc8" alt="" width="375"><figcaption></figcaption></figure></div>

13. Solicitação de retorno de chamada

A caixa de seleção "Solicitação de retorno de chamada" aparece nas configurações do chat online se a Telefonia estiver ativada no projeto.

#### *Como funciona*

Ao preencher o formulário, o usuário pode marcar a caixa para solicitar um retorno de chamada. Nesse caso, um dos funcionários com telefonia ativada é selecionado automaticamente e uma chamada é feita para o cliente.

{% hint style="info" %}
O funcionário é atribuído automaticamente. Ao selecionar um funcionário, o seguinte é verificado:

* Status: Em turno
* Qualquer função, incluindo Administrador
* A telefonia está ativada (configurada) para o funcionário

Após a chamada, este funcionário será atribuído como responsável pelo usuário.
{% endhint %}

14. Solicitar consentimento para processamento de dados pessoais&#x20;

<div data-with-frame="true"><figure><img src="/files/69f38e051702743d8aa7e5fbe7d126b8f1d178d9" alt="" width="563"><figcaption></figcaption></figure></div>

Esta opção vem desativada por padrão. Quando ativada, uma mensagem dizendo "Eu dou consentimento para o processamento de dados pessoais" junto com o **botão "Confirmar"** será exibida na primeira vez que o chat online for aberto.

Exemplo da primeira mensagem para obter consentimento para o processamento de dados pessoais:

15. Configurações do botão de início

<div data-with-frame="true"><figure><img src="/files/6ae319798d1684b208b114674dd8a2e232e75b7d" alt="" width="264"><figcaption></figcaption></figure></div>

Clicar em ***"Adicionar botão"*** abre o formulário para criar um botão de início:

<div data-with-frame="true"><figure><img src="/files/950582bf79bafee16fb6065e841c03e6a96f3adb" alt="" width="563"><figcaption></figcaption></figure></div>

O botão pode ter uma das seguintes funções:

* **Link**. Permite adicionar uma URL para navegar para outra página do seu site ou para um recurso externo na web.
* **E-mail**. O cliente será redirecionado para o serviço de e-mail dele para enviar uma mensagem ao endereço de e-mail especificado nas configurações do botão.
* **Telefone**. O aplicativo de chamada é aberto, ou o usuário é orientado a escolher um aplicativo para fazer a ligação — dependendo do dispositivo usado. A ligação vai para o número especificado nas configurações do botão.
* **Mensagem (do administrador / usuário)** — este recurso permite que o bot envie respostas rápidas ao clicar em um botão.

Por exemplo, você pode criar um botão chamado "Endereço" e, no campo "Mensagem", especificar o endereço exato e o horário de funcionamento.

{% hint style="info" %}
O texto no campo "Mensagem" ficará sem quebras de linha. Leve isso em consideração ao trabalhar.
{% endhint %}

* **Separar clientes de diferentes domínios.** Esta configuração permite separar conversas se a mesma pessoa escrever no chat online hospedado em domínios diferentes. Por padrão, isso é tratado como a mesma conversa.

<div data-with-frame="true"><figure><img src="/files/6ee985499161cc243542a2b21fd17fba55c86dc0" alt="" width="375"><figcaption></figcaption></figure></div>

Essa opção é necessária se chats online diferentes estiverem instalados em sites diferentes dentro do mesmo domínio e você precisar separar conversas quando a mesma pessoa escrever.

* **Botões no texto serão exibidos no histórico do chat online (opção).** Ative esta opção para mostrar botões do texto do construtor de funil no histórico do chat online do cliente.

16. Ocultar o chat online

<div data-with-frame="true"><figure><img src="/files/bc8db75b085ff1d084b0c28539ab611d78fbc4b4" alt="" width="207"><figcaption></figcaption></figure></div>

Não é necessário remover o chat online do site. Você pode simplesmente ocultá-lo usando a opção correspondente.

### Ações automáticas

O funcionamento das ações automáticas é o seguinte: para que uma ação automática seja disparada, uma condição de gatilho específica deve ser definida para essa ação.

<div data-with-frame="true"><figure><img src="/files/3b9bae0eb39144074863ced1efe155d5c2dca7dc" alt="" width="375"><figcaption></figcaption></figure></div>

Primeiro, defina as condições de quando a ação personalizada deve ser executada. Você pode adicionar condições com base na hora do dia, país do visitante, cidade, URL da página atual e assim por diante.

<div data-with-frame="true"><figure><img src="/files/08b0fee4686dd97c7f35da613ccb9d47a84a58e9" alt="" width="563"><figcaption></figcaption></figure></div>

Mais sobre as condições:

<div data-with-frame="true"><figure><img src="/files/3a6f0fef560c89dda7a2069ea8dec5ffa5d96282" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Hora atual.** Defina o disparo automático do chat online de acordo com o período em que o cliente interage com o chat (por exemplo, durante o horário promocional após as 16:00, um visitante da sua landing page pode receber um desconto).
2. **Execute esta ação apenas uma vez por dia para o usuário.** Esta condição pode ser aplicada em vários casos: por exemplo, para enviar links de afiliados ou outros nas mensagens do administrador/usuário (como acesso a novos materiais do curso); para um sistema de fidelidade ou acúmulo; e assim por diante.
3. **Cidade do usuário /** País do usuário.  Ao definir esta condição, você pode segmentar o grupo específico de usuários que se beneficiariam do seu serviço — por exemplo, quando a presença física do cliente é necessária para comprar um produto ou serviço.

Nesse caso, você pode definir a condição como igual ou diferente. Por exemplo, se precisar especificar uma cidade ou país (ou uma lista de países) para os quais a ação automática não deve ser disparada, escolha "diferente".&#x20;

4. **O dia da semana**.
   &#x20;Esta condição serve como gatilho para ações automáticas com base no dia da semana. Você pode selecionar caixas de seleção ao lado dos dias da semana, definir a condição como igual ou diferente e escolher a ação automática que será executada pelo chat online.

Por exemplo, você pode definir todos os dias úteis dos seus operadores/gerentes para permitir o contato posterior com os clientes.&#x20;

5. **URL da página atual**. A ação automática será disparada dependendo se a URL contém/não contém ou é igual/não é igual a um link especificado.
6. **Mensagem do usuário**. Para disparar a ação automática sob esta condição, o campo deve conter uma palavra específica do usuário.

<div data-with-frame="true"><figure><img src="/files/26504861121d5364a41a8909bebb990487f4ca8e" alt="" width="563"><figcaption></figcaption></figure></div>

6. **Tempo na página**. Esta condição é semelhante à hora do dia; no entanto, se o seu banco de dados de clientes estiver distribuído em diferentes fusos horários, você precisará que essa ação automática ocorra no mesmo horário local para cada fuso horário.
7. **Tempo desde que a janela do MAviBot foi fechada**. Esta condição é configurada de forma semelhante à hora do dia ou ao tempo na página, mas depende da ação do usuário de fechar a janela do Salebot.
8. **Tempo desde a primeira mensagem do visitante.** A ação automática será disparada após um período especificado (em segundos) depois da primeira mensagem do cliente no chat online.
9. **Tempo sem resposta do operador desde a primeira mensagem do usuário**. Esta condição também é definida em segundos e é disparada independentemente de o operador ter respondido ao cliente ou não.

Se necessário, as condições podem ser combinadas, permitindo que a ação automática seja disparada com base em vários critérios:

<div data-with-frame="true"><figure><img src="/files/af4169b28d3dd815c38938e25a159974536ad243" alt="" width="563"><figcaption></figcaption></figure></div>

Em seguida, escolha qual ação o chat online deve executar automaticamente:

<div data-with-frame="true"><figure><img src="/files/2472a54baa36760695c8681d085b89ccc2a2b1e3" alt="" width="563"><figcaption></figcaption></figure></div>

1. **Abertura automática do chat**. Esta ação abre automaticamente o chat online para o usuário. Nenhuma configuração adicional é necessária.
2. **Convite automático para conversar**. Esta ação automática envia ao usuário uma mensagem predefinida inserida no campo correspondente. Você também pode ocultar o campo de entrada da mensagem usando a caixa de seleção com o mesmo nome, se necessário.
3. **Ocultar o ícone do chat online de um site**. Esta ação pode ser usada, por exemplo, após o término do horário de trabalho dos seus administradores.
4. **Mostrar o ícone do chat online**. Semelhante à ação anterior, isso permite exibir o ícone do chat para os clientes durante um período específico (ou com base em outras condições necessárias).
5. **Enviar mensagem como administrador**. Esta ação envia uma mensagem no chat online sob a função de administrador.
6. **Enviar um formulário**. Esta ação é usada para coletar dados do cliente. Você pode personalizar o texto do formulário, selecionar os campos obrigatórios de entrada (como nome, número de telefone, e-mail, caixa de seleção ou qualquer outro campo de entrada que você configurar manualmente).

Você pode configurar um campo de entrada personalizado. Por exemplo, para coletar a cidade de residência do cliente ou qualquer outra informação relevante.

### Banners

<div data-with-frame="true"><figure><img src="/files/6f5dfb55f580269569cbf3248dbf0d6615c72d1c" alt=""><figcaption></figcaption></figure></div>

Você pode adicionar banners clicáveis à janela inicial do chat na aba "Banners". Vamos avançar para as configurações.

1. Clique em **"Adicionar banner"**.

<div data-with-frame="true"><figure><img src="/files/8064977845c01a63230a3775ba47d61bcd20cdc3" alt="" width="260"><figcaption></figcaption></figure></div>

2. Envie uma imagem.

<div data-with-frame="true"><figure><img src="/files/10d08f0b8e866ed51eb626cdbbf69442f991e198" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
O tamanho da imagem é fixo.

Formato de imagem recomendado: se você adicionar um título e subtítulo, use um banner no tamanho de **345x194 pixels** ou uma proporção **16:9**.
{% endhint %}

Para tornar o banner clicável (permitindo que seu cliente siga um link ao clicar nele), insira a URL no campo correspondente.

<div data-with-frame="true"><figure><img src="/files/8d82d89379ca8a78e1549ab791cb758383d77328" alt="" width="563"><figcaption></figcaption></figure></div>

Em seguida, especifique o título e o subtítulo do banner, se necessário.

<div data-with-frame="true"><figure><img src="/files/c70b1b2313e4598c6ae12568e703ba289f6e757e" alt="" width="563"><figcaption></figcaption></figure></div>

Digite o título e o subtítulo e, depois, clique em **"Salvar"**.

<div data-with-frame="true"><figure><img src="/files/3b6f0a37a7e3254b1cc7cc4bc4854c0a3c01dd1b" alt="" width="563"><figcaption></figcaption></figure></div>

O banner então aparecerá no widget do chat online.

<div data-with-frame="true"><figure><img src="/files/2364abd944739f9999e7fdab9b1a207512fc70cc" alt="" width="563"><figcaption></figcaption></figure></div>

Para desativar um banner (parar de exibi-lo no chat online), altere o botão para a posição inativa.

<div data-with-frame="true"><figure><img src="/files/7ede69cecbc7598895e59bb0eda9c68259fcd530" alt="" width="563"><figcaption></figcaption></figure></div>

Para editar ou excluir um banner, clique em **Editar**.

### Avaliação de qualidade

<div data-with-frame="true"><figure><img src="/files/5e824c3bb86cd78c28dc9214e22e065cd1e925b1" alt="" width="375"><figcaption></figcaption></figure></div>

Há uma seção adicional de configurações no chat online chamada "Controle de qualidade". Para ativar esse recurso, vá até a aba correspondente nas configurações.

<div data-with-frame="true"><figure><img src="/files/ff39a7894a6139faa31e540cf2d1e02ed602111a" alt="" width="563"><figcaption></figcaption></figure></div>

A funcionalidade oferece uma escolha entre três escalas de avaliação de qualidade: cinco pontos, três pontos e dois pontos.

<div data-with-frame="true"><figure><img src="/files/3051a545a98c0b51fbc3f26a46c20ae989a4f32e" alt="" width="563"><figcaption></figcaption></figure></div>

Digite o texto que aparecerá antes da avaliação no campo correspondente.

<div data-with-frame="true"><figure><img src="/files/d4615432fcf2e977540ec0255f4f265be1e5f979" alt=""><figcaption></figcaption></figure></div>

Não há valor padrão neste campo. Se você o deixar em branco, o seguinte texto aparecerá no banner de avaliação de qualidade.

Você também pode especificar um nome personalizado para o campo de feedback do cliente.

<div data-with-frame="true"><figure><img src="/files/636182c37ce8f776bdd6cef07647e6db98f7822f" alt="" width="375"><figcaption></figcaption></figure></div>

Para isso, basta inserir seu próprio texto para o nome do campo, bem como um texto de espaço reservado dentro do campo de feedback. Por padrão (veja o exemplo acima), a finalidade e o texto de cada campo já estão definidos para sua conveniência.

Você também pode ativar uma caixa de seleção para tornar obrigatório o comentário de feedback do cliente.

<div data-with-frame="true"><figure><img src="/files/33f2fe3d23a22575bcba00b51dfb287bdbf74879" alt="" width="363"><figcaption></figcaption></figure></div>

Em seguida, você pode preencher a mensagem de feedback que será enviada ao cliente após uma avaliação positiva ou negativa. Para ver como fica a mensagem final do chat online após enviar uma avaliação, clique no botão do chat para enviar a avaliação.

<div data-with-frame="true"><figure><img src="/files/f4b2a89841f4c84382cb5d91d056c6974d291ef0" alt="" width="313"><figcaption></figcaption></figure></div>

#### caixa de seleção "O usuário pode avaliar o chat"

<div data-with-frame="true"><figure><img src="/files/d2741900a2b5a6cbd6f5bcdcede4658e72f71e39" alt="" width="563"><figcaption></figcaption></figure></div>

Na seção "Clientes", o operador pode encerrar o diálogo durante uma conversa com um usuário. Se esta caixa de seleção estiver ativada, o usuário poderá fornecer uma avaliação.

{% hint style="success" %}
O operador não vê a avaliação que o cliente deu para a conversa.
&#x20;Todas as avaliações de qualidade estarão disponíveis na seção "Analytics".
{% endhint %}

O operador pode clicar no botão "Encerrar conversa" durante uma conversa com um usuário. Isso abrirá um formulário de confirmação da ação do operador:

<div data-with-frame="true"><figure><img src="/files/ad76684fea667e1daa3690ee255370c1b8f28cb4" alt="" width="375"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/224bd9289f35d92dd27231ee73338e205646b944" alt="" width="375"><figcaption></figcaption></figure></div>

Se um serviço de e-mail estiver conectado nos canais, opções para enviar mensagens por e-mail aparecerão.

Depois que o operador encerra a conversa, um formulário de avaliação de qualidade é enviado ao usuário, e a avaliação em si é registrada no Analytics.

Se o cliente não deixar uma avaliação, as estatísticas mostrarão "O usuário não deixou uma avaliação."

## Como adicionar o chat online ao seu site

Para incorporar o chat online ao seu site, basta copiar o script da aba Código e colá-lo no HTML do seu site.

<div data-with-frame="true"><figure><img src="/files/dcaa36301592ffc59501528611b89b3d91a48007" alt=""><figcaption></figcaption></figure></div>

Copie o código do chat online.

<div data-with-frame="true"><figure><img src="/files/5e833df65ec2f9057acee2e3e17abef4afa873f6" alt=""><figcaption></figcaption></figure></div>

Em seguida, vá para a seção **"Sites"** e clique no bloco do site onde você deseja colocar o widget do chat online.

<div data-with-frame="true"><figure><img src="/files/f980477a2b76de36a10828fdd921641b25671f8c" alt="" width="563"><figcaption></figcaption></figure></div>

Depois, vá para **Edição do site**.

<div data-with-frame="true"><figure><img src="/files/5b2c319aa0613043b2705afc185b6d65d94f64f1" alt="" width="563"><figcaption></figcaption></figure></div>

E vá para as configurações do site.

<figure><img src="/files/8f619deb52346c98b2dafc417254d2c3957ece7e" alt="" width="563"><figcaption></figcaption></figure>

Em **Cores, Fontes e HTML** seção, cole o código do chat online copiado no campo **código HTML no head** .

<div data-with-frame="true"><figure><img src="/files/316ed2f212caf9a9560b8f66aceaa0625e716557" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Cole este código em todas as páginas do seu site, dentro da tag `<head>` .**
{% endhint %}

&#x20;O chat online agora está conectado com sucesso ao seu site.

## Envio de um formulário para os clientes preencherem

O chat online também inclui um recurso que permite enviar um formulário aos clientes para coletar informações do usuário e adicioná-lo ao sistema para interação posterior.

<div data-with-frame="true"><figure><img src="/files/711acf3df45a967c5a4caf5025974b508014995d" alt="" width="375"><figcaption></figcaption></figure></div>

Esse formulário é enviado usando a **online\_chat\_send\_form()** função, que recebe os seguintes parâmetros:

1. **name;**
2. **phone;**
3. **privacy;**
4. **callback** (este parâmetro funciona somente se a telefonia estiver integrada ao projeto);
5. age;
6. email\_group\_ID (se você incluir este parâmetro com um e-mail, será criado um e-mail do cliente e vinculado ao usuário do chat);
7. wa\_group\_ID (se você incluir este parâmetro com um número de telefone, será criado um contato do WhatsApp e vinculado ao usuário do chat).
8. *Se um grupo inexistente for especificado, o formulário será enviado, mas o cliente não será criado.*

{% hint style="danger" %}

#### Importante

Todos os parâmetros são inseridos como uma única string separada por vírgulas.

*Exemplo de entrada na Calculadora:* online\_chat\_send\_form("name,email,email\_group\_ID")
{% endhint %}

Notificação que aparecerá no chat após o formulário ser enviado

<div data-with-frame="true"><figure><img src="/files/881fa362b062395b132f833aa685a9b3a0f15b9a" alt="" width="371"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Os dados enviados pelo formulário são salvos nas variáveis do cliente.
&#x20;Você pode ver mais detalhes sobre essas variáveis abaixo, no perfil do cliente online.
{% endhint %}

#### <mark style="color:vermelho;">!</mark> online\_chat\_send\_form(arguments, texts)

Ele recebe dois argumentos obrigatórios.

arguments - string de parâmetros

texts - nome do formulário

Por exemplo, na calculadora, você pode inseri-lo assim: **online\_chat\_send\_form("name,phone", "Olá, por favor preencha o formulário**.**")**.

<div data-with-frame="true"><figure><img src="/files/96f63a9feacfbc20ef5dc0a9db73a99168db293d" alt=""><figcaption></figcaption></figure></div>

Exemplo da resposta do chat online.

<div data-with-frame="true"><figure><img src="/files/759ea3b249bc980d2d2639d9a90335658574dd6c" alt="" width="375"><figcaption></figcaption></figure></div>

## **Enviando mensagens para o chat**

Use este código quando um usuário realiza uma ação no site e você precisa enviar uma mensagem em nome dele no chat naquele momento.

`if(window.ChatBotPro) { window.ChatBotPro.sendMessageFromUser("Mensagem") }`

Por exemplo, quando um usuário clica em um botão, uma mensagem será enviada em nome dele.

**Alterar configurações de dica**

Você pode configurar o bot para reagir a essa mensagem.

O código é inserido na seção HTML das configurações do site.

<div data-with-frame="true"><figure><img src="/files/d52af33c3f2758bec8832b01f3b9f53e1d9f8ee3" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.mavibot.ai/doc/pt/chatbot/live-chat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.