Como adicionar chat ao vivo grátis ao site: guia passo a passo [2026]

Adicionar chat ao vivo ao seu site pode parecer uma tarefa técnica que requer a ajuda de um programador. Na prática, geralmente tudo se resume a criar uma conta, configurar a janela de chat e colar um trecho de código.

Não há necessidade de construir seu próprio sistema de mensagens, configurar um servidor ou criar um aplicativo do zero. O widget pronto funciona como um elemento adicional do site e permite ao cliente iniciar uma conversa sem instalar o aplicativo ou criar uma conta.

Neste guia, mostramos como adicionar o chat ao vivo gratuito do Chataptor a:

• página HTML normal,
• WordPress,
• WooCommerce,
• Shopify,
• Comprador,
• PrestaShop,
• uma página usando o Gerenciador de tags do Google.

Você mesmo pode fazer todo o processo. O mais importante é copiar o código gerado para uma página específica e colocá-lo no lugar certo.

Como adicionar chat ao vivo ao site: versão rápida

O processo básico é o seguinte:

1. Crie uma conta no sistema Chataptor.
2. Vá para a guia Canais.
3. Selecione Widget de página.
4. Adicione o nome e endereço do seu site.
5. Abra a guia Instalação de widget.
6. Configure a aparência do bate-papo.
7. Copie o código gerado pelo Chataptor.
8. Cole na página antes da tag de fechamento </body>.
9. Salve suas alterações e envie uma mensagem de teste.

Após a instalação adequada, as mensagens enviadas do widget começarão a ir para o painel do Chataptor. Você pode respondê-los em seu navegador ou aplicativo móvel.

O que você precisa antes de começar?

Para iniciar o chat ao vivo você precisa:

• endereço do site,
• Conta Chataptor,
• capacidade de editar a página ou suas configurações,
• acesso ao painel WordPress, sistema de gerenciamento de loja ou site.

Você não precisa saber HTML ou JavaScript. Nos sistemas mais populares, o código pode ser colado em um campo especial para scripts adicionais.

Caso o site seja gerenciado por uma agência ou desenvolvedor, basta fazer upload do código gerado com as informações:

Adicione este script globalmente em todas as subpáginas, imediatamente antes da tag de fechamento </body>.

Etapa 1. Crie uma conta gratuita no Chataptor

O primeiro passo é criar uma conta gratuita no Chataptor.

No formulário de inscrição, forneça:

• nome da empresa,
• seu nome,
• endereço de e-mail,
• senha.

Após enviar o formulário, verifique sua caixa de correio e confirme seu cadastro caso receba uma mensagem de ativação.

O Chataptor está atualmente disponível gratuitamente, sem limite de conversas e sem recursos pagos. Inclui não apenas um widget de chat, mas também um aplicativo móvel, modelos de resposta, uma caixa de entrada compartilhada e traduções automáticas de mensagens.

Etapa 2. Vá para a guia “Canais”

Após fazer login, abra a aba Canais.

Existem fontes de onde as mensagens podem chegar ao Chataptor. Um deles é o Website Widget, que é uma janela de bate-papo exibida aos visitantes do site.

Você não precisa configurar WhatsApp, e-mail, Facebook ou outras integrações imediatamente. Você pode começar apenas com chat ao vivo e adicionar canais adicionais posteriormente.

Selecione Widget de página.

Etapa 3. Adicione seu site

Após selecionar o widget, você irá para as configurações da página.

Adicione uma nova página e preencha o seguinte:

• nome da página,
• seu endereço na web.

O nome ajuda a identificar a origem do bate-papo do painel. Isto é especialmente útil se a empresa tiver várias lojas, marcas, domínios ou versões em idiomas.

Exemplos de nomes:

• Compre na Polônia,
• Compre na Alemanha,
• Site da empresa,
• Loja de varejo,
• Painel B2B.

No campo de endereço, digite o endereço completo do site onde deseja que o chat ao vivo apareça.

Após preencher os dados, salve a página.

Etapa 4. Configure a aparência do widget

Após salvar a página, vá para a aba Instalação do widget.

Dependendo da versão atual do painel, você pode definir, entre outros:

• título da janela de bate-papo,
• mensagem de boas-vindas,
• campo de texto para inserir mensagens,
• cor principal,
• tema claro ou escuro,
• posição do widget,
• método de abertura da janela,
• tradução automática de conversas.

Você não precisa refinar todas as configurações de uma vez. Primeiro você pode executar uma versão simples, verificar seu funcionamento e só então alterar sua aparência.

Que texto de boas-vindas devo definir?

Mantenha sua mensagem de boas-vindas curta e indique claramente que o cliente pode fazer uma pergunta.

Exemplos:

Bom dia! Como podemos ajudar?

Você tem alguma dúvida sobre um produto ou pedido? Escreva para nós.

Precisa de ajuda para escolher um produto? Estamos aqui.

Evite textos longos descrevendo toda a empresa. O cliente abre o chat porque deseja iniciar uma conversa rapidamente.

Qual cor de widget devo escolher?

É melhor usar uma cor que corresponda à identificação visual do site, mas que também seja bastante contrastante.

O botão deve estar visível, mas não obscurecido:

• menu móvel,
• botão adicionar produto ao carrinho,
• informações sobre cookies,
• outros elementos importantes da página.

Após iniciar o widget, verifique sua aparência no computador e no telefone.

Etapa 5. Copie o código gerado pelo Chataptor

Após salvar a configuração, o Chataptor irá gerar um código de instalação individual.

O código contém um ID que conecta o widget à conta e página corretas. Portanto, você não deve copiar o código encontrado em outro guia, site ou conta de terceiros.

Sempre use o código completo gerado no painel do Chataptor.

O fragmento pode ser semelhante ao exemplo a seguir:

<body>
  <!-- Conteúdo da página -->

  <!-- Tutaj wklej pełny kod wygenerowany przez Chataptor -->
</body>

Não altere manualmente IDs, chaves ou endereços de script. Os parâmetros de aparência só podem ser editados se você souber para que servem.

Etapa 6. Cole o código antes da tag </body>

O código do widget deve ser adicionado imediatamente antes da tag de fechamento:

</body>

Exemplo de layout de arquivo:

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <title>O meu site</title>
  </head>
  <body>
    <h1>Bem-vindo ao nosso site</h1>

    <!-- Kod widgetu Chataptor wklej w tym miejscu -->
  </body>
</html>

Colocar o código no rodapé global ou no modelo principal fará com que o chat apareça em todas as subpáginas.

Se desejar que ele esteja disponível apenas em um local específico, por exemplo, em uma loja, mas não em um blog, o método de instalação pode exigir uma condição adicional ou configuração de regra de exibição.

Como adicionar chat ao vivo ao WordPress?

A solução mais simples para uma pessoa não técnica é usar integração do Chataptor com WordPress ou um plugin que permite adicionar scripts ao rodapé.

Pode ser, por exemplo, uma ferramenta como:

• WPCode,
• Código de cabeçalho e rodapé,
• Scripts de cabeçalho e rodapé.

Após instalar o plugin apropriado:

1. Abra as configurações dela.
2. Encontre o campo de código no rodapé.
3. Cole o código completo gerado no Chataptor.
4. Defina a exibição para página inteira.
5. Salvar alterações.
6. Limpe o cache do WordPress.
7. Abra a página em modo privado e verifique o widget.

Os nomes dos campos podem variar entre os plugins. Procure termos como:

• Rodapé,
• Extremidade do corpo,
• Antes de </body>,
• Scripts no rodapé.

Instalação via arquivo de tema

Um técnico pode adicionar o script usando o mecanismo wp_footer ou no arquivo de rodapé de um tema filho.

Não vale a pena adicionar código diretamente ao tema principal. Depois de atualizado, a alteração pode ser removida.

Como adicionar chat ao vivo ao WooCommerce?

WooCommerce roda em WordPress, então a instalação é a mesma.

O código do Chataptor pode ser adicionado:

• via plugin de gerenciamento de script,
• a wp_footer,
• no rodapé do tema filho.

Após a instalação, verifique especialmente:

• página inicial da loja,
• cartão do produto,
• cesta,
• dispositivo móvel.

O widget não deve cobrir botões de compras ou elementos usados ​​ao fazer um pedido.

Como adicionar chat ao vivo ao Shopify?

No Shopify, o código pode ser colocado no arquivo de modelo principal.

Antes de começar, é uma boa ideia criar uma cópia do seu tema ativo.

Então:

1. Faça login no painel do Shopify.
2. Abra a seção Loja Online.
3. Vá para Temas.
4. Com o tema ativo, selecione a opção editar código.
5. No diretório Layout, abra o arquivo theme.liquid.
6. Encontre a tag </body>.
7. Cole o código completo do Chataptor diretamente antes dele.
8. Salvar alterações.
9. Atualize a loja e realize uma conversa de teste.

O código deve ser incluído no template principal para que o widget esteja disponível em todas as subpáginas importantes da loja.

Como adicionar chat ao vivo ao Shoper?

O nome exato da seção pode variar dependendo da versão do painel e do modelo utilizado. A instrução sobre integração do Chataptor com o Shoper também pode ser útil.

Na maioria das vezes você deve:

1. Faça login no painel de administração.
2. Abra a seção de complementos ou integrações.
3. Vá para integrações personalizadas ou seu próprio código.
4. Encontre o campo de código no rodapé da página.
5. Cole o código do Chataptor.
6. Salvar alterações.
7. Verifique a loja em uma nova janela do navegador.

Procure o campo descrito como código de pré-fechamento </body>.

Caso não veja esta opção, o código pode ser adicionado editando o template ou enviado ao suporte técnico da loja.

Como adicionar chat ao vivo ao PrestaShop?

No PrestaShop, é melhor usar uma solução que não exija edição dos principais arquivos do sistema.

Os métodos possíveis são: Módulo

• que permite adicionar seu próprio JavaScript,
• módulo HTML personalizado,
• gancho displayFooter,
• rodapé do tema utilizado,
• um módulo simples preparado pelo programador.

O código deve ser carregado globalmente, preferencialmente no rodapé da página.

Os arquivos principais do PrestaShop não devem ser modificados. Uma atualização do sistema pode remover as alterações feitas.

Como adicionar chat ao vivo a uma página HTML normal?

Se você tiver acesso aos arquivos do site:

1. Abra o modelo principal ou arquivo de rodapé comum.
2. Encontre </body>.
3. Cole o código do Chataptor diretamente antes desta tag.
4. Salve o arquivo.
5. Publicar alterações no servidor.
6. Atualize a página sem cache.

Se o site consistir em muitos arquivos HTML separados, o código deverá ser adicionado a cada um deles ou a um componente comum carregado em todas as subpáginas.

Como instalar o Chataptor através do Gerenciador de tags do Google?

Se o site já usa o Gerenciador de tags do Google, o widget pode ser adicionado sem editar diretamente o código do site.

Processo básico:

1. Crie uma nova tag.
2. Selecione o tipo HTML personalizado.
3. Cole o código completo gerado pelo Chataptor.
4. Defina regra de inicialização em todas as páginas.
5. Salvar etiqueta.
6. Inicie o modo de visualização.
7. Verifique se o script está carregando.
8. Publicar contêiner.

Este método é conveniente, mas requer que o Gerenciador de tags do Google esteja instalado corretamente no site.

Também vale a pena verificar a configuração de consentimento de cookies. Se os scripts forem bloqueados até que o consentimento seja dado, o widget poderá aparecer somente após aceitar as configurações apropriadas.

Etapa 7. Verifique se o widget funciona

Depois de salvar e publicar o código, não pare de trabalhar quando o botão aparecer.

Realize o teste completo:

1. Abra a página em modo privado.
2. Verifique se o botão de bate-papo está visível.
3. Abra o widget.
4. Enviar mensagem de exemplo.
5. Faça login no Chataptor.
6. Verifique se a conversa aparece no painel.
7. Responder à mensagem.
8. Certifique-se de que a resposta apareça no lado do cliente.
9. Repita o teste no seu telefone.

Exemplo de mensagem de teste:

Bom dia, gostaria de verificar se o chat ao vivo está funcionando corretamente.

Caso utilize traduções automáticas, realize o teste também em outro idioma.

O widget não aparece na página - o que verificar?

As causas mais comuns de problemas são relativamente simples.

Código não publicado

Colar código no editor nem sempre significa publicá-lo. Verifique se as alterações foram salvas e implementadas na versão ativa do site.

O código está apenas em uma subpágina

Se o script foi adicionado a uma única página em vez de um modelo global, o chat não ficará visível em nenhum outro lugar.

Cache mostra a versão antiga da página

Limpar:

• Cache do WordPress,
• cache do plugin usado,
• servidor ou cache de hospedagem,
• Cache CDN,
• memória do navegador.

Em seguida, abra a página em modo privado.

Exemplo de código colado em vez do código da conta

O código deve conter IDs atribuídos à conta e página corretas. Não copie o exemplo do artigo ou do código de terceiros.

O script foi alterado

Verifique se o editor não removeu nenhum código, aspas ou atributos de script ao colar.

Outro elemento cobre o widget

Um banner de cookie, um botão de contato ou um menu móvel podem aparecer acima do chat. Neste caso, você precisa alterar a posição do widget ou as configurações da camada da página.

O sistema está bloqueando scripts externos

A causa pode ser:

• Política de segurança de conteúdo,
• mecanismo de gerenciamento de consentimento,
• bloqueio de script por plugin de segurança,
• Otimização de JavaScript,
• extensão de bloqueio de anúncio ou rastreamento.

Durante o teste, vale a pena desligar a otimização do script e verificar o site em outro navegador.

Como configurar o chat ao vivo para que os clientes realmente o utilizem?

Instalar o widget é apenas o começo. O chat deve ser visível, simples e adaptado à forma como os clientes utilizam o site.

Não peça muitas informações antes da conversa

Se um cliente precisar fornecer nome, sobrenome, número de telefone, endereço de e-mail e algumas informações adicionais, ele poderá cancelar antes do envio da primeira mensagem.

Inicialmente, colete apenas os dados que você realmente precisa.

Estabeleça expectativas realistas

Caso a equipe responda apenas durante o horário de trabalho, vale a pena comunicar isso com clareza.

Exemplo:

Escreva uma mensagem. Respondemos de segunda a sexta das 8h00 às 16h00.

É melhor dar uma resposta em tempo real do que prometer uma resposta “imediatamente” quando ninguém pode dar.

Tenha suas respostas prontas

As perguntas mais frequentes são:

• disponibilidade,
• entrega,
• retorna,
• faturas,
• status do pedido,
• cooperação.

No sistema Chataptor, você pode preparar respostas prontas para chat ao vivo e inseri-las usando comandos curtos, por exemplo /entrega, /devolucao ou /fatura.

O modelo deve tornar a resposta mais rápida, mas ainda permitir que ela seja adaptada a um cliente específico.

Ative as notificações do celular

O cliente pode escrever quando não há ninguém sentado em frente ao computador. Aplicativo móvel de atendimento ao cliente permite que você perceba uma nova conversa e responda do seu telefone.

Isto é especialmente importante em pequenas empresas onde o atendimento ao cliente não é um departamento separado, 24 horas por dia, 7 dias por semana.

Teste traduções automáticas

Se o site for visitado por clientes estrangeiros, habilite a tradução automática de conversas.

O cliente escreve no seu idioma. O agente lê a mensagem traduzida e responde no idioma que usa diariamente. O Chataptor traduz a resposta antes de a mostrar ao cliente.

O chat ao vivo gratuito tem limites?

Isso depende da ferramenta que você escolher.

Limite de alguns planos gratuitos:

• número de conversas por mês,
• número de operadores,
• comprimento do histórico,
• número de páginas,
• Recursos de IA,
• automação,
• capacidade de remover marcas.

Portanto, antes da instalação, vale verificar não só se a ferramenta possui plano gratuito, mas também o momento em que a empresa deverá migrar para uma assinatura.

O Chataptor é atualmente um chat ao vivo gratuito sem limite de conversas. Não existe um pacote pago separado para tradução por IA.

Preciso de um desenvolvedor para instalar o chat ao vivo?

Geralmente não.

Uma pessoa não técnica pode adicionar o código por conta própria:

• Plug-in WordPress,
• configuração de scripts adicionais na loja,
• Gerenciador de tags do Google,
• campo de código personalizado no construtor de páginas.

A assistência do desenvolvedor pode ser necessária quando:

• o site usa um sistema proprietário,
• não tem acesso ao modelo comum,
• uma política de segurança rigorosa opera,
• o widget só deve aparecer sob certas condições, A instalação do
• requer alterações no tema ou aplicativo.

Quanto tempo leva para adicionar chat ao vivo ao site?

Apenas criar o canal e colar o código pode levar alguns minutos. Vale a pena gastar mais tempo em:

• configuração do conteúdo do widget,
• testando a versão móvel,
• preparação da resposta,
• estabelecer horário de atendimento,
• configurar notificações,
• verificação de tradução.

É melhor executar primeiro uma versão simples e funcional e depois melhorar sua aparência com base em conversas reais.

Lista de verificação de lançamento de chat ao vivo

Antes de concluir a implantação, verifique:

• A conta do Chataptor está ativa.
• A página foi adicionada à aba Canais.
• O código gerado para a página correta foi usado.
• O código foi adicionado globalmente antes de </body>.
• O widget fica visível no seu computador.
• O widget fica visível no telefone.
• Não cobre botões ou banner de cookies.
• Mensagem de teste vai para o painel.
• A resposta é visível no lado do cliente.
• As notificações móveis estão funcionando.
• O texto de boas-vindas corresponde à página.
• A equipe sabe quem responde às novas conversas.
• As respostas mais comuns foram preparadas.
• As traduções foram testadas, se necessário.

Resumo

Para adicionar chat ao vivo ao seu site, você não precisa criar seu próprio sistema ou iniciar uma implementação complicada.

No sistema Chataptor, o processo se resume a adicionar uma página, configurar o widget, copiar o código individual e colocá-lo antes da tag </body>.

O código pode ser adicionado diretamente na página HTML, via WordPress, WooCommerce, Shopify, Shoper, PrestaShop ou Google Tag Manager.

Após a instalação, vale a pena realizar uma conversa de teste completa e verificar o funcionamento do chat no celular. Só então você poderá ter certeza de que as mensagens dos clientes realmente chegarão à equipe.

O Chataptor permite começar com um chat ao vivo simples e depois conectar outros canais de comunicação no mesmo painel. O widget, o aplicativo móvel, os modelos de resposta e as traduções de IA estão disponíveis sem limite de conversas e sem plano pago.

Quer ativar o chat no seu site? Crie uma conta Chataptor gratuita, adicione o site e cole o código gerado do widget.

Perguntas frequentes

Como adicionar chat ao vivo gratuito ao seu site?

Crie uma conta no sistema Chataptor, vá até a aba Canais, adicione um site, abra Instalação de Widget e copie o código gerado. Em seguida, cole-o antes da tag de fechamento </body>.

Onde colar o código do chat ao vivo?

O código deve aparecer no modelo de página global, imediatamente antes de </body>. Graças a isso, o widget estará disponível em todas as subpáginas.

Como adicionar chat ao vivo ao WordPress?

A maneira mais fácil é usar um plugin que permite adicionar scripts ao rodapé. Cole o código do Chataptor no campo Rodapé ou Antes </body>, salve suas alterações e limpe o cache.

O Chataptor funciona com WooCommerce?

Sim. WooCommerce é executado em WordPress, então o código pode ser adicionado por meio do plugin de gerenciamento de script, wp_footer, ou do rodapé de um tema filho.

Como adicionar chat ao vivo ao Shopify?

Abra o código do tema ativo, vá para o arquivo theme.liquid e cole o código do Chataptor antes da tag </body>.

Posso adicionar chat ao vivo através do Gerenciador de tags do Google?

Sim. Crie uma tag HTML personalizada, cole o código do Chataptor, configure-o para ser executado em todas as páginas e publique o contêiner.

Por que o chat ao vivo não aparece no site?

Os motivos mais comuns são código incorreto, falha na publicação de alterações, cache, bloqueio de scripts externos ou adição do widget a apenas uma subpágina.

O cliente precisa instalar o aplicativo?

Não. O cliente utiliza a janela de chat diretamente no site. O aplicativo móvel foi projetado para uma empresa de mensagens.

É possível alterar a aparência do widget?

Sim. Você pode personalizar a cor, o título, a mensagem de boas-vindas, o texto da caixa de mensagem, o tema e a posição do botão, entre outras coisas.

O chat ao vivo gratuito tem limite de conversas?

O Chataptor atualmente não tem limite de conversas ou recursos pagos. O widget, o aplicativo móvel e as traduções de IA estão disponíveis sem assinatura adicional.

Posso adicionar um widget a várias páginas?

Sim. No painel você pode adicionar páginas adicionais e gerar configurações apropriadas para elas. Isso ajuda a separar conversas provenientes de domínios, lojas ou versões de idiomas diferentes.