# Webchat

A partir da versão 3.1.10, o Z-PRO oferece uma funcionalidade de Webchat nativo, permitindo que você incorpore uma janela de chat diretamente no seu site ou no site dos seus clientes, com as mensagens chegando diretamente na plataforma.

<figure><img src="/files/JV4H4B3spEz66RZQVXXX" alt="" width="368"><figcaption></figcaption></figure>

Para funcionar, ele requer a instalação de um novo serviço no seu servidor (via autoinstalador) e a configuração de um subdomínio.

Download example.html para embedar o widget gerado:&#x20;

{% file src="/files/Z4IQM1DOefM5aazKRQK3" %}

{% hint style="info" %}
**Antes de Começar: Crie um Subdomínio**

Antes de rodar o instalador, você **DEVE** criar um novo subdomínio (ex: `chat.meusite.com.br`) e apontá-lo (com um registro 'A') para o IP da sua VPS onde o Z-PRO está instalado.
{% endhint %}

***

{% embed url="<https://www.youtube.com/watch?v=R46iwR5CLvU>" %}

### Passo a Passo: Instalação e Configuração

O processo é dividido em duas etapas: criar o canal no Z-PRO e rodar o autoinstalador no servidor.

#### Passo 1: Criar o Canal no Z-PRO

Primeiro, crie o canal que receberá as mensagens do webchat.

1. Acesse o painel **Admin > Canais**.
2. Clique em "Adicionar" e selecione a opção **'Webchat'**.
3. Dê um nome (ex: "Chat do Site") e salve.
4. Após salvar, clique no botão "Conectar" para ativá-lo.

#### Passo 2: Rodar o Autoinstalador no Servidor

Agora, vamos instalar o serviço de *socket* do webchat na sua VPS.

1. Certifique-se de que seu autoinstalador está atualizado (substitua a pasta `zpro_passaporte_shell` pela mais recente no root da sua VPS).
2. Acesse o SSH da sua VPS e entre na pasta do autoinstalador.
3. Execute o autoinstalador (ex: `./zpro`).
4. Escolha a **Opção 5 - Instalar Webchat**.
5. O script irá perguntar:
   * **Qual instância:** Escolha a instância do Z-PRO que usará o webchat (geralmente a '1').
   * **Porta:** Informe uma porta livre na sua VPS (ex: `5431`, `5001`). **Anote esta porta.**
   * **Domínio:** Informe o subdomínio que você criou (ex: `chat.meusite.com.br`).
   * **E-mail:** Um e-mail para o certificado SSL (Let's Encrypt).
6. Aguarde o processo. O script irá criar um proxy reverso, configurar o SSL e liberar a porta no firewall.

#### Passo 3: Gerar o Widget (Código de Incorporação)

Com o canal criado e o serviço instalado, volte ao painel Z-PRO para gerar o código do seu chat.

1. Acesse **Admin > Configurações > Integrações**.
2. Selecione a aba **'Webchat'**.
3. O sistema deve exibir a mensagem **"Webchat configurado e pronto para uso"** com um status verde.
   * *(Se não aparecer, aguarde alguns instantes e atualize a página. Se persistir, consulte a seção "Solução de Problemas" abaixo).*
4. **Gere um Token de Autenticação:** Clique no botão para gerar um token seguro.
5. **Selecione o Canal:** No campo abaixo, escolha o canal 'Webchat' que você criou no Passo 1.
6. Clique em **'Gerar Widget'**.

#### Passo 4: Incorporar o Webchat no seu Site

1. O sistema irá gerar um código JavaScript (`<script>...<\/script>`).
2. Copie este código e cole-o no HTML da página do seu site, preferencialmente antes de fechar a tag `</body>`.
3. Ao carregar a página, o ícone do chat aparecerá no canto direito, e você já pode testar o envio de mensagens.

***

### Solução de Problemas: Chat não conecta ou Status não fica verde

Se o status em **Integrações > Webchat** não ficar verde, ou se as mensagens não chegarem, pode ser um problema de firewall ou de comunicação entre os serviços. Siga os passos abaixo no SSH:

**Execute no SSH:**

<pre class="language-bash"><code class="lang-bash"><strong># 1. Desative o firewall temporariamente para testar
</strong>sudo ufw disable
sudo su deployzdg
cd /home/deployzdg/zpro.io/backend
nano .env

# 2. Adicione a flag abaixo ao documento .env:
SECURE_URL=*

# 5. Confirme também se está definido corretamente porta e dominio do chat no mesmo arquivo:
WSS_URL=[https://webchat.seusiteaqui.com.br](https://webchat.seusiteaqui.com.br)
WSS_PORT=NUMERO_DA_PORTA

# 6. Salve o documento, feche e reinicie o Z-PRO
pm2 stop all
pm2 flush
pm2 start all
</code></pre>

Após este processo, faça um novo teste no painel do Z-PRO.

{% hint style="warning" %}
&#x20;Lembre-se de reativar seu firewall após o teste.

Se o chat funcionar apenas com o firewall desativado, significa que você precisa liberar a porta que escolheu durante a instalação
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://ajuda.zdg.com.br/configuracao-administrador/administracao-painel-admin/canais-de-comunicacao/webchat.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.