Como adicionar um chatbot ao WordPress (sem programar)

O WordPress move mais de 40% da web, o que significa que há uma boa chance de o seu site rodar nele. Adicionar um chatbot ao WordPress é simples. Você não precisa de um desenvolvedor, um plugin personalizado ou qualquer experiência com programação. Este guia percorre três métodos, da abordagem mais simples com plugin até uma instalação no nível do tema, e cobre as pegadinhas que costumam confundir as pessoas.

Antes de começar

Você precisa ter duas coisas prontas antes de adicionar o chatbot ao seu site WordPress.

1. Uma conta no Agentkit com um chatbot treinado.

Se você ainda não fez isso, cadastre-se gratuitamente e crie seu primeiro chatbot. Treine-o com o conteúdo do seu site, páginas de FAQ, documentação ou qualquer outro material sobre o qual os seus visitantes perguntem. Veja o guia de treinamento para mais detalhes.

2. A sua tag de script de incorporação.

Depois que o seu chatbot estiver treinado, vá até a página Configurações e depois Publicar do seu chatbot no painel do Agentkit. Você verá uma tag de script parecida com esta:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Copie esse trecho. Você vai colá-lo no WordPress usando um dos três métodos abaixo.

Comparação de métodos

Escolha o método que combina com o seu nível de conforto. A abordagem com plugin é recomendada para a maioria dos usuários porque é a mais simples e a mais resistente a atualizações do tema.

Método 1: abordagem com plugin (recomendado)

Esse é o método mais fácil. Você instala um plugin gratuito que permite adicionar trechos de código ao seu site sem editar os arquivos do tema.

Usando o WPCode (Insert Headers and Footers)

O WPCode é um plugin gratuito do WordPress com mais de 2 milhões de instalações. Ele permite adicionar código ao cabeçalho ou rodapé do seu site sem tocar nos arquivos do tema.

Passo 1: instale o plugin

1. No seu painel administrativo do WordPress, vá em Plugins e depois Adicionar novo.
2. Procure por "WPCode" (o nome completo é WPCode - Insert Headers, Footers, and Code Snippets).
3. Clique em Instalar agora e depois em Ativar.

Passo 2: adicione o trecho do chatbot

1. Na barra lateral do painel do WordPress, vá em Code Snippets e depois Header & Footer.
2. Encontre a seção Footer.
3. Cole a sua tag de script de incorporação do Agentkit na caixa Footer.
4. Clique em Save Changes.

É só isso. O widget do chatbot agora vai aparecer em todas as páginas do seu site WordPress.

Passo 3: confirme que funciona

1. Abra o seu site em uma nova aba do navegador (não o painel administrativo do WordPress).
2. Você deve ver o balão de chat no canto inferior direito.
3. Clique nele e envie uma mensagem de teste para confirmar que ele responde corretamente.

Usando o Insert Headers and Footers (alternativa)

Se você preferir um plugin diferente, o "Insert Headers and Footers" da WPBeginner funciona da mesma forma:

1. Instale e ative o plugin.
2. Vá em Configurações e depois Insert Headers and Footers.
3. Cole o script de incorporação na caixa Scripts in Footer.
4. Salve.

Controlando em quais páginas o chatbot aparece

Tanto o WPCode quanto plugins semelhantes suportam lógica condicional. Se você quiser o chatbot apenas em determinadas páginas:

1. No WPCode, em vez de usar a seção Header & Footer, crie um novo Code Snippet.
2. Defina o tipo de código como "HTML Snippet".
3. Cole o seu script de incorporação.
4. Em Insertion, escolha "Site Wide Footer".
5. Em Smart Conditional Logic, adicione condições como:
   • A página é "Contact", "Support" ou "Pricing"
   • O tipo de post é "Product"
   • A URL contém "/help"
6. Salve e ative o trecho.

Isso dá a você controle preciso sem precisar criar vários chatbots.

Método 2: bloco HTML personalizado (páginas específicas)

Se você quiser o chatbot em apenas uma ou duas páginas e não quiser instalar um plugin, pode usar o editor de blocos do WordPress.

Passo 1: edite a página onde você quer o chatbot.

Passo 2: adicione um bloco Custom HTML na parte inferior do conteúdo da página.

Passo 3: cole o seu script de incorporação do Agentkit no bloco:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Passo 4: atualize ou publique a página.

O chatbot vai aparecer apenas nessa página específica. Repita para outras páginas conforme necessário.

Limitações desse método:

• O script carrega como parte do conteúdo da página, então pode carregar um pouco mais tarde do que um posicionamento no rodapé.
• Se você quiser o chatbot em muitas páginas, isso se torna cansativo. Use o método com plugin em vez disso.
• Alguns construtores de página (Elementor, Divi) podem remover tags de script dos blocos HTML. Se isso acontecer, use o método com plugin.

Método 3: rodapé do tema (footer.php)

Esse método adiciona o chatbot no nível do tema. É a abordagem mais direta, mas exige a edição de arquivos do tema.

Importante: se você editar o footer.php do seu tema diretamente, suas alterações serão perdidas quando o tema for atualizado. Use um tema filho para tornar isso permanente.

Com um tema filho

Passo 1: se você ainda não tem um tema filho, crie um. A maioria dos desenvolvedores de temas fornece instruções. Como alternativa, use o plugin "Child Theme Configurator".

Passo 2: no seu painel administrativo do WordPress, vá em Aparência e depois Editor de arquivos do tema.

Passo 3: selecione o seu tema filho no menu suspenso.

Passo 4: abra o footer.php. Se ele não existir no seu tema filho, crie-o copiando o footer.php do tema pai.

Passo 5: encontre a tag de fechamento </body>. Cole o script de incorporação imediatamente antes dela:

<!-- Agentkit Chatbot -->
<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>
</body>
</html>

Passo 6: salve o arquivo.

Sem um tema filho (não recomendado)

Se você editar o footer.php do tema pai diretamente, siga os mesmos passos, mas saiba que uma atualização do tema vai sobrescrever suas alterações. Se você seguir esse caminho, guarde uma cópia do seu footer.php modificado para poder reaplicá-lo depois das atualizações.

Testando a sua instalação

Depois de adicionar o chatbot com qualquer um dos métodos, percorra este checklist.

Verificação básica

Checklist de limpeza de cache

O cache é o motivo número um pelo qual as pessoas adicionam o script do chatbot e não o veem no site. Limpe os caches nesta ordem:

1. Plugin de cache do WordPress (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache): vá até as configurações do plugin e limpe todos os caches.
2. Cache no nível da hospedagem (SiteGround, WP Engine, Cloudflare): verifique se o painel da sua hospedagem tem uma opção de limpeza de cache.
3. Cache da CDN (Cloudflare, StackPath, Fastly): se você usa uma CDN, limpe o cache dela também.
4. Cache do navegador: abra o seu site em uma janela anônima/privada para contornar o cache local do navegador.

Se o chatbot ainda não aparecer depois de limpar todos os caches, verifique o console de desenvolvedor do navegador (F12 no desktop) em busca de erros de JavaScript.

Solução de problemas comuns

O chatbot não aparece

Causa: cache. Esse é o problema mais comum. Siga o checklist de limpeza de cache acima.

Causa: posicionamento da tag de script. Certifique-se de que o script está dentro da tag <body>, não da <head>. Alguns plugins de cabeçalho/rodapé colocam o código na <head> por padrão.

Causa: Content Security Policy. Alguns plugins de segurança adicionam cabeçalhos de Content Security Policy que bloqueiam scripts externos. Verifique se o seu plugin de segurança (Wordfence, Sucuri, iThemes Security) tem configurações de CSP e adicione cdn.agentkit.ai às fontes de script permitidas.

Causa: conflito com construtor de página. Alguns construtores de página removem tags de script das áreas de conteúdo. Use o método com plugin (Método 1) em vez do bloco Custom HTML.

O chatbot aparece, mas não responde

Causa: chatbot não treinado. Vá até o seu painel do Agentkit e confirme que o seu chatbot tem dados de treinamento. Um chatbot não treinado não tem de onde tirar informações.

Causa: ID do chatbot incorreto. Verifique se o data-chatbot no seu código de incorporação corresponde ao ID mostrado no seu painel do Agentkit.

Causa: restrição de domínio. Se você configurou restrições de domínio nas configurações do seu chatbot, certifique-se de que o domínio do seu WordPress está na lista de permitidos.

O chatbot entra em conflito com outro plugin de chat

Se você está rodando outro plugin de chat ao vivo ou chatbot (Tidio, Intercom, Drift, Crisp), os dois widgets podem se sobrepor ou interferir um no outro.

Soluções:

• Remova o outro plugin de chat se você estiver migrando totalmente para o Agentkit.
• Se você precisar dos dois, use o método de bloco Custom HTML do Agentkit para colocá-lo apenas nas páginas onde o outro plugin não está ativo.
• Ajuste a posição do widget nas configurações do seu painel do Agentkit se os dois precisarem coexistir.

Carregamento lento da página depois de adicionar o chatbot

O widget do Agentkit carrega de forma assíncrona (o atributo async na tag de script), então ele não deve bloquear a renderização da sua página. Se você notar lentidão:

1. Confirme se o atributo async está presente na sua tag de script.
2. Faça um teste de velocidade (Google PageSpeed Insights, GTmetrix) e verifique se o script do Agentkit é sinalizado. Scripts assíncronos raramente afetam as pontuações de desempenho.
3. Se estiver usando um plugin de desempenho que atrasa o JavaScript, adicione cdn.agentkit.ai à lista de permissões para evitar que ele interfira no carregamento do widget.

Configurando o chatbot para o WordPress

Depois que o chatbot estiver no ar no seu site WordPress, considere estas etapas de configuração no seu painel do Agentkit.

Restrição de domínio

Nas Configurações do seu chatbot, defina o domínio permitido como o domínio do seu site WordPress (por exemplo, yourdomain.com). Isso impede que qualquer pessoa copie o seu código de incorporação e use o seu chatbot em outro site.

Treinamento com o conteúdo do WordPress

A melhor fonte para treinamento é o conteúdo real do seu site. No Agentkit, adicione a URL do seu site WordPress como fonte de treinamento, e o rastreador vai indexar suas páginas automaticamente. Se o seu site usa renderização em JavaScript, o rastreador com tecnologia Firecrawl lida com isso.

Concentre o seu treinamento em:

• Páginas de FAQ ou base de conhecimento
• Páginas de produto ou serviço
• Página de preços
• Página sobre a empresa
• Documentação de suporte
• Posts de blog que respondem perguntas comuns

Não treine com páginas de conteúdo raso, páginas de login ou páginas atrás de autenticação.

Para orientações completas sobre treinamento, veja Como treinar um chatbot com o conteúdo do seu site.

Captura de leads

Ative a ação de captura de leads para coletar e-mails e nomes dos visitantes diretamente no chat. Os leads capturados aparecem no seu painel do Agentkit e podem ser enviados para o seu CRM via Zapier ou webhooks. Veja a documentação de captura de leads para a configuração.

Documentação de integração específica do WordPress

Para as instruções de configuração mais atuais e quaisquer recursos específicos do WordPress, veja a documentação de integração com o WordPress.

Recapitulação da comparação de métodos

Para a maioria dos usuários do WordPress, o método com plugin é a escolha certa. É rápido, seguro e oferece mais flexibilidade sem colocar em risco os arquivos do seu tema.

Próximos passos

Depois que o seu chatbot estiver no ar no WordPress, dedique alguns minutos ao Playground do Agentkit testando as respostas. Se o chatbot não estiver respondendo bem sobre tópicos específicos, adicione mais dados de treinamento para essas áreas. O Playground permite que você itere rapidamente sem precisar testar no seu site em produção toda vez.

Depois, explore a conexão do seu chatbot com as suas outras ferramentas. O guia de integração cobre fluxos de trabalho no Zapier, webhooks e a API REST para configurações mais avançadas.

Crie seu chatbot gratuitamente →

Não é necessário cartão de crédito.