Webchat
Widget de chat para o seu site, com atendimento direto no Z-PRO
O Webchat é um canal que coloca uma janela de atendimento no seu site (ou no site dos seus clientes). O visitante clica no botãozinho no canto da tela e conversa com o seu time direto pelo site, sem depender do WhatsApp — e todas as mensagens chegam normalmente na fila de atendimento do Z-PRO.
Ficou muito mais simples. Nas versões mais recentes do Z-PRO, criar o Webchat é feito em poucos cliques pela interface. Não é mais preciso criar subdomínio, editar o arquivo .env, rodar autoinstalador ou fazer rebuild no terminal — todo o serviço de back-end é provisionado automaticamente quando você clica em Conectar.
Pré-requisitos:
Acesso de administrador ao painel do Z-PRO.
Acesso de edição ao site onde o widget será instalado (qualquer site da internet serve: WordPress, HTML puro, construtores como Elementor etc.).
Tutorial em vídeo:
Como funciona
Você cria o canal, dá um nome e clica em Conectar. O próprio back-end do Z-PRO cuida de todo o resto (serviço de socket, domínio e certificado) automaticamente. Em seguida você gera o widget — um código JavaScript — e cola no seu site. Pronto: o botão de chat passa a aparecer e as mensagens dos visitantes caem direto no atendimento.
Etapa 1: Criar o canal de Webchat
No menu, acesse Administração > Canais.
Na aba de canais, clique em Adicionar Canal.
Na lista, selecione a opção Webchat.
Dê um nome ao canal (ex: "Webchat") e confirme.
O canal é criado e aparece no painel desconectado.
Etapa 2: Conectar (provisionamento automático)
No card do canal recém-criado, clique no botão Conectar.
Aguarde — o back-end provisiona o serviço automaticamente.
Antes era manual, agora não. Na versão antiga, o Webchat dependia de um serviço de back-end que exigia subdomínio, variáveis no .env e rebuild pelo terminal. Hoje basta criar o canal, dar o nome e clicar em Conectar — o resto é automático.
Etapa 3: Gerar o widget
Com o canal conectado, clique nos três pontinhos no card do canal.
Selecione Gerar Widget.
O sistema pergunta se você quer habilitar botões no menu do Webchat:
Com botões: ao programar um chatbot, as opções em formato de botão serão renderizadas como botões clicáveis dentro do Webchat.
Sem botões: o menu aparece apenas como texto.
Clique em Gerar Widget. O sistema faz o download e exibe o código JavaScript para você copiar.
Teste antes de instalar. Use o botão Testar na própria tela de geração: ele abre uma prévia com o Webchat funcionando. Envie uma mensagem de teste e confira se ela chega na fila de Pendentes do atendimento.
Etapa 4: Instalar o código no seu site
O widget é um código JavaScript e, por padrão, ele vem sem as tags <script>. Antes de colar em qualquer bloco de HTML, abra e feche a tag <script> em volta do código:
Onde colar depende do seu objetivo:
Em uma página específica (ex: Elementor)
Edite a página onde quer o chat.
Adicione um bloco de HTML (a maioria dos construtores tem um bloco assim).
Cole o código já dentro das tags
<script>...</script>.Salve. O botão do chat aparecerá somente nessa página.
Em todo o site (plugin de Header/Footer)
Para o chat aparecer em todas as páginas, use um plugin que injete código no rodapé do site — por exemplo o WPCode (antigo "Insert Headers and Footers", um dos mais populares).
Em Plugins > Adicionar novo, procure por "header footer" (ou "WPCode") e instale/ative.
Crie um snippet do tipo JavaScript (ex: em WPCode, Code Snippets > Add Snippet > Custom Snippet > JavaScript Snippet).
Cole o código do widget dentro do
<script>e ative o snippet.Em local de inserção, escolha Auto Insert no Footer (rodapé), para todo o site.
Salve. O chat passa a aparecer em todas as páginas (home, produtos etc.).
Não confunda os campos do plugin. Vários plugins de Header/Footer não aceitam tag <script> solta no campo genérico de footer — o código simplesmente não salva ou não roda. Nesse caso, crie um snippet do tipo JavaScript (como acima): esse tipo já trata o código como script corretamente.
Resumo das Funcionalidades
Criar canal de Webchat
Administração > Canais > Adicionar Canal > Webchat
Conectar (automático)
Botão Conectar no card do canal
Gerar o código do widget
três pontinhos no card do canal > Gerar Widget
Habilitar botões do menu
Opção exibida ao Gerar Widget
Testar antes de instalar
Botão Testar na tela de geração
Com o canal conectado e o widget instalado, seu site passa a ter um canal de atendimento próprio, independente do WhatsApp, com as mensagens caindo direto na fila do Z-PRO. Todo o provisionamento de back-end é automático — você só cuida de gerar o widget e colar no site.
Possíveis Erros e Soluções
A mensagem não envia / fica girando o ícone de "reloginho" (erro de CORS)
Sintoma: ao enviar uma mensagem pelo Webchat, ela não vai — o ícone de carregamento (reloginho) fica girando e a informação não trafega. Ao inspecionar o console do navegador (F12), aparece um erro de CORS policy relacionado ao cabeçalho Access-Control-Allow-Origin. Causa: o back-end está bloqueando as requisições vindas do domínio do site onde o widget foi instalado. Solução: adicione a flag abaixo no arquivo .env do back-end e reinicie o Z-PRO:
SECURE_URL=* libera as origens das requisições do Webchat. É o ajuste padrão quando o console acusa bloqueio de CORS no Access-Control-Allow-Origin. Após salvar o .env, reinicie o Z-PRO para aplicar.
O código colado não funciona / aparece como texto na página
Causa: o widget é JavaScript e vem sem as tags <script>. Colado num bloco de HTML sem essas tags, o navegador trata o conteúdo como texto e ignora. Solução: envolva o código com <script> ... </script> antes de colar. Em plugins de Header/Footer, prefira criar um snippet do tipo JavaScript.
O snippet não salva no plugin de Footer
Causa: alguns plugins bloqueiam tag <script> no campo genérico de footer. Solução: crie um snippet do tipo JavaScript (em vez de HTML/Footer) e use Auto Insert no rodapé.
O botão do chat não aparece
Causa: o canal pode não estar conectado, ou o código não está sendo carregado na página. Solução: confirme que o canal está conectado no painel; use o botão Testar para validar o widget; verifique se o snippet/bloco está ativo e na página correta.
Atualizado
Isto foi útil?