Appearance

Webchat ​

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 da Centralize Conversas.

TIP

Ficou muito mais simples. Nas versões mais recentes da Centralize Conversas, 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.

INFO

Pré-requisitos:

  • Acesso de administrador ao painel da Centralize Conversas.
  • 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: ​

Abrir conteúdo incorporado

Como funciona ​

Você cria o canal, dá um nome e clica em Conectar. O próprio back-end da Centralize Conversas 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 ​

  1. No menu, acesse Administração > Canais.
  2. Na aba de canais, clique em Adicionar Canal.
  3. Na lista, selecione a opção Webchat.
  4. Dê um nome ao canal (ex: "Webchat") e confirme.

O canal é criado e aparece no painel desconectado.

Etapa 2: Conectar (provisionamento automático) ​

  1. No card do canal recém-criado, clique no botão Conectar.
  2. Aguarde — o back-end provisiona o serviço automaticamente.

INFO

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 ​

  1. Com o canal conectado, clique nos três pontinhos no card do canal.
  2. Selecione Gerar Widget.
  3. 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.
  4. Clique em Gerar Widget. O sistema faz o download e exibe o código JavaScript para você copiar.

INFO

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:

html
<script>
// ...cole aqui o código do widget gerado pelo Z-PRO...
</script>

Onde colar depende do seu objetivo:

Em uma página específica (ex: Elementor) ​

  1. Edite a página onde quer o chat.
  2. Adicione um bloco de HTML (a maioria dos construtores tem um bloco assim).
  3. Cole o código já dentro das tags <script>...</script>.
  4. Salve. O botão do chat aparecerá somente nessa página.

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

  1. Em Plugins > Adicionar novo, procure por "header footer" (ou "WPCode") e instale/ative.
  2. Crie um snippet do tipo JavaScript (ex: em WPCode, Code Snippets > Add Snippet > Custom Snippet > JavaScript Snippet).
  3. Cole o código do widget dentro do <script> e ative o snippet.
  4. Em local de inserção, escolha Auto Insert no Footer (rodapé), para todo o site.
  5. Salve. O chat passa a aparecer em todas as páginas (home, produtos etc.).

WARNING

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 ​

FuncionalidadeOnde acessar
Criar canal de WebchatAdministração > Canais > Adicionar Canal > Webchat
Conectar (automático)Botão Conectar no card do canal
Gerar o código do widgettrês pontinhos no card do canal > Gerar Widget
Habilitar botões do menuOpção exibida ao Gerar Widget
Testar antes de instalarBotã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 da Centralize Conversas. 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 a Centralize Conversas:

bash
SECURE_URL=*

INFO

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 a Centralize Conversas 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.

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.