Como adicionar um chatbot de IA ao seu site Webflow

Sites Webflow têm uma aparência polida, carregam rápido e oferecem controle preciso sobre o design. Mas eles não vêm com chat de IA integrado. Se você quer um chatbot que realmente entenda o seu conteúdo e consiga manter conversas de verdade com os visitantes, precisa adicionar um por conta própria.

A boa notícia: adicionar um chatbot de IA ao Webflow leva cerca de 20 minutos e não exige nenhum código além de colar uma única tag de script. Você cria o chatbot, treina-o com o conteúdo do seu site e o adiciona ao Webflow pelas configurações de Custom Code. Ele funciona em todas as páginas, combina com o seu design e começa a responder às perguntas dos visitantes imediatamente.

Este guia cobre o processo completo: criar e treinar o chatbot, incorporá-lo no Webflow, personalizar a aparência e configurá-lo para obter os melhores resultados.

Comparando as opções de chatbot para o Webflow

Antes de entrar na configuração, veja como as principais formas de adicionar chat ao Webflow se comparam.

Se você precisa de um widget de chat em que uma equipe humana responde em tempo real, uma ferramenta de chat ao vivo como o Intercom é a escolha certa. Se você quer um assistente com IA que responda perguntas automaticamente, treinado com o conteúdo real do seu site, um chatbot de IA é a opção mais adequada. A maioria dos donos de sites Webflow quer a segunda opção -- um assistente de autoatendimento que cuida das perguntas dos visitantes sem exigir uma equipe dedicada.

Passo 1: crie o seu chatbot

Comece criando um chatbot no Agentkit. Você precisa de uma conta gratuita.

1. Acesse o Agentkit e cadastre-se.
2. Crie um novo chatbot e dê a ele um nome que reflita o seu propósito (por exemplo, "Assistente do Site" ou o nome da sua marca).
3. Escolha um modelo de IA. O GPT-4o é uma boa opção padrão. Você tem uma variedade de modelos para escolher entre OpenAI, Anthropic (Claude) e Google (Gemini).

Passo 2: treine com o conteúdo do seu site Webflow

Esta é a etapa que torna o chatbot genuinamente útil. Você está dando a ele o conteúdo real do seu site para que ele possa responder às perguntas dos visitantes com precisão.

Adicione a URL do seu site

1. No painel do Agentkit, vá até a página Fontes do seu chatbot.
2. Clique em Adicionar fonte e escolha Site.
3. Digite a URL do seu site Webflow (por exemplo, https://yoursite.webflow.io ou o seu domínio personalizado https://yoursite.com).
4. O rastreador segue os links a partir da sua URL principal e indexa todas as páginas acessíveis: sua página inicial, página sobre, páginas de serviços, portfólio, posts do blog, FAQ, preços e qualquer outro conteúdo vinculado.

Para sites Webflow que usam interações, animações ou conteúdo carregado dinamicamente, o rastreador do Agentkit usa o Firecrawl para renderizar o JavaScript antes de indexar. Isso garante que o conteúdo carregado por interações do Webflow seja capturado com precisão.

Adicione pares de perguntas e respostas para tópicos-chave

Enquanto o rastreamento do site captura o seu conteúdo geral, os pares de perguntas e respostas dão a você controle preciso sobre respostas específicas. Crie pares para as perguntas mais importantes dos seus visitantes:

Os pares de perguntas e respostas têm prioridade sobre o conteúdo rastreado, então são a sua ferramenta para garantir que o chatbot diga exatamente o que você quer em tópicos críticos.

Envie documentos (opcional)

Se você tem materiais que não estão publicados no seu site Webflow -- estudos de caso em PDF, documentos de especificação de serviços, tabelas de preços -- envie-os como fontes de documentos. O chatbot usará esse conteúdo junto com os dados do seu site para responder às perguntas.

Teste no Playground

Antes de adicionar o chatbot ao seu site publicado, teste-o no Playground do Agentkit.

Faça as perguntas que os seus visitantes costumam fazer:

• "Quais serviços vocês oferecem?"
• "Quanto custa?"
• "Como eu começo?"
• "Vocês trabalham com empresas do setor de [setor]?"
• "Qual é a política de reembolso de vocês?"

Se alguma resposta estiver errada, incompleta ou mal formulada, ajuste os seus dados de treinamento. Adicione ou atualize pares de perguntas e respostas, adicione mais trechos de texto ou refine a sua fonte de site para incluir páginas específicas que você possa ter deixado de fora.

Passo 3: personalize a aparência do widget

Antes de incorporar, configure o widget do chatbot para combinar com o design do seu site Webflow.

No painel do Agentkit, vá até as Configurações do seu chatbot:

Tema de cores. Defina a cor primária para combinar com a sua marca. Use o código hexadecimal exato do guia de estilo do seu Webflow. O balão do chatbot, o cabeçalho e o botão de enviar usam todos essa cor.

Posição. Escolha o canto inferior direito (padrão e mais comum) ou o canto inferior esquerdo. Escolha o lado que não entre em conflito com outros elementos flutuantes do seu site Webflow.

Mensagem de boas-vindas. Escreva uma mensagem que combine com o tom da sua marca e defina expectativas claras:

• Para um negócio de serviços: "Oi, posso responder perguntas sobre nossos serviços, preços e processo. Como posso ajudar?"
• Para um produto SaaS: "Bem-vindo! Pergunte qualquer coisa sobre nosso produto, funcionalidades ou preços."
• Para um site de portfólio: "Olá. Posso falar sobre nosso trabalho, nossas capacidades e como colaboramos com os clientes."

Mensagens sugeridas. Adicione de três a cinco mensagens sugeridas que guiem os visitantes para as suas conversas mais valiosas:

• "Quais serviços vocês oferecem?"
• "Quanto custa?"
• "Posso ver exemplos do trabalho de vocês?"
• "Como eu começo?"

Avatar. Envie o seu logotipo ou um ícone da marca como avatar do chatbot para um visual coeso.

Passo 4: incorpore no Webflow

Aqui está a instalação de fato. Você tem duas opções no Webflow: em todo o site (todas as páginas) ou específica por página.

Opção A: instalação em todo o site (recomendado)

Isso adiciona o chatbot a todas as páginas do seu site Webflow.

1. No painel do Agentkit, vá até Configurações e depois Publicar do seu chatbot.
2. Copie a tag de script:

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

3. No Webflow, abra as Project Settings (o ícone de engrenagem na barra lateral esquerda do Designer, ou a partir do painel do projeto).
4. Vá até a aba Custom Code (código personalizado).
5. Cole a tag de script na seção Footer Code (código do rodapé; o campo chamado "Before </body> tag").
6. Clique em Salvar alterações.
7. Publique o seu site para que as alterações tenham efeito.

Agora o chatbot vai aparecer em todas as páginas do seu site Webflow publicado.

Opção B: instalação específica por página

Se você quiser o chatbot apenas em determinadas páginas (por exemplo, na página de preços e na página de contato, mas não no blog):

1. No Designer do Webflow, abra a página onde você quer o chatbot.
2. Abra as Page Settings (ícone de engrenagem perto do nome da página no painel Pages).
3. Role até a seção Custom Code.
4. Cole a tag de script no campo Before </body> tag.
5. Clique em Save e depois em Publish.

Repita para cada página em que você quiser o chatbot. Páginas sem o script não vão exibir o chatbot.

Verificando a instalação

Depois de publicar:

1. Abra o seu site Webflow em uma nova aba do navegador (ou em uma janela anônima para evitar cache).
2. Procure o balão de chat no canto inferior.
3. Clique no balão e envie uma mensagem de teste.
4. Verifique se a resposta está correta e se o estilo está certo.
5. Teste em dispositivos móveis para confirmar que o widget é exibido corretamente em telas menores.

Se o chatbot não aparecer imediatamente depois de publicar, faça uma atualização forçada da página (Ctrl+Shift+R ou Cmd+Shift+R). O CDN do Webflow pode levar um minuto para propagar o código atualizado.

Passo 5: configure as restrições de domínio

Depois que o seu chatbot estiver no ar, restrinja-o ao seu domínio para que ele não possa ser incorporado em sites não autorizados.

1. No painel do Agentkit, vá até as Configurações do seu chatbot.
2. Em Restrições de domínio, adicione o domínio do seu site Webflow (por exemplo, yoursite.com).
3. Se você também usa o domínio padrão do Webflow (yoursite.webflow.io), adicione-o também.

O chatbot só vai carregar nos domínios especificados. Isso impede que alguém copie o seu código de incorporação e use o seu chatbot (e a sua cota de mensagens) no site dessa pessoa.

Dicas específicas para o Webflow

Trabalhando com interações do Webflow

Se o seu site Webflow usa muitas interações e animações, o widget do chatbot carrega de forma independente e não interfere nelas. O widget usa uma sobreposição de posição fixa, então fica por cima do conteúdo da página sem ser afetado por transforms do Webflow ou animações acionadas por scroll.

Páginas de coleção do CMS

Se você tem um blog ou portfólio em CMS no Webflow, o chatbot (instalado em todo o site) vai aparecer em todas as páginas de coleção do CMS. Treine o chatbot com a URL completa do seu site para que ele possa responder perguntas sobre qualquer conteúdo, incluindo páginas do CMS.

Se o conteúdo do seu CMS muda com frequência, considere o plano Standard ($119.99/mês), que inclui retreinamento automático. O chatbot rastreia o seu site periodicamente e captura novas entradas do CMS automaticamente.

Webflow Ecommerce

Para sites Webflow Ecommerce, treine o chatbot com as suas páginas de produto, política de envio, política de devolução e FAQ. O chatbot pode responder perguntas sobre produtos, explicar opções de envio e lidar com dúvidas sobre devoluções. Veja o nosso guia de chatbot para e-commerce para orientações detalhadas de configuração.

Staging vs. produção

Se você usa o ambiente de staging do Webflow (yoursite.webflow.io) para testes antes de publicar no seu domínio personalizado, pode adicionar o script do chatbot em ambos. Use a restrição de domínio para controlar em qual domínio o chatbot fica ativo. Durante os testes, permita os dois domínios. Em produção, restrinja apenas ao seu domínio personalizado.

Impacto no desempenho

O widget do Agentkit carrega de forma assíncrona (note o atributo async na tag de script). Isso significa que ele não bloqueia o carregamento da sua página. Ele carrega em segundo plano depois que o conteúdo da página está pronto. Não há impacto mensurável no tempo de carregamento do seu site Webflow nem na pontuação do Lighthouse.

Captura de leads no Webflow

Um chatbot no seu site Webflow é uma ferramenta de captura de leads além de uma ferramenta de suporte. Os visitantes que interagem com o chatbot demonstraram interesse. Capturar o e-mail deles no momento certo transforma um visitante casual em uma oportunidade de acompanhamento.

Configurando a captura de leads

1. No painel do Agentkit, vá até as Ações do seu chatbot.
2. Ative Coletar leads com nome e e-mail como campos obrigatórios.
3. Configure quando o formulário aparece nas instruções do seu chatbot: "Depois de responder a pergunta de um visitante sobre serviços ou preços, ofereça-se para enviar mais detalhes e use o formulário de captura de leads para coletar o e-mail dele."

Conectando leads às suas ferramentas

Zapier, webhooks e acesso à API REST estão disponíveis a partir do plano Hobby ($29.99/mês).

Para um olhar mais profundo sobre estratégias de captura de leads, veja Como usar chatbots para geração de leads.

Combinando com o design do seu Webflow

O seu site Webflow tem uma linguagem visual específica. Veja como fazer o chatbot parecer nativo em vez de algo colado por fora.

Cor da marca. Copie o valor hexadecimal exato da sua cor de marca primária no painel de estilo do Webflow e use-o como cor do widget do chatbot. Isso garante que o balão de chat e o cabeçalho combinem com o seu site.

Consistência de fonte. O widget do chatbot usa uma pilha de fontes do sistema limpa, que combina bem com a maioria das escolhas tipográficas do Webflow. O texto do widget é propositalmente neutro para não conflitar com fontes personalizadas.

Espaçamento e posição. Se o seu site Webflow tem um rodapé fixo, um botão de CTA flutuante ou um banner de cookies, posicione o chatbot no lado oposto para evitar sobreposição. Você pode escolher o canto inferior esquerdo ou direito nas configurações do chatbot.

Tom da mensagem de boas-vindas. Escreva a mensagem de boas-vindas e as mensagens sugeridas no mesmo tom do texto do seu site Webflow. Se o seu site é casual e amigável, o chatbot deve seguir esse tom. Se o seu site é profissional e formal, o chatbot deve refletir isso.

Medindo o desempenho do chatbot no seu site Webflow

Depois que o chatbot estiver rodando por algumas semanas, revise o desempenho dele no painel do Agentkit.

Revise os registros de conversas semanalmente durante o primeiro mês. É aí que você encontra as vitórias rápidas: perguntas que o chatbot responde mal e que são fáceis de corrigir com um par de perguntas e respostas, e perguntas que ele acerta e que você pode usar para validar a sua abordagem de treinamento.

Planos do Agentkit para sites Webflow

A cobrança anual economiza aproximadamente 20% em todos os planos pagos. A maioria dos sites Webflow começa no plano Free para testar e depois migra para o Hobby quando vê o chatbot lidando com perguntas reais dos visitantes.

Solução de problemas comuns

O chatbot não aparece depois de publicar. O CDN do Webflow pode levar alguns minutos para propagar. Faça uma atualização forçada da página. Se ainda assim não aparecer, verifique se o script está no campo correto de Custom Code (Footer Code em Project Settings ou Before </body> tag em Page Settings).

O chatbot aparece no Designer, mas não no site publicado (ou vice-versa). A pré-visualização do Designer não executa scripts personalizados. Você só vai ver o chatbot no site publicado. Esse é o comportamento esperado do Webflow.

O chatbot sobrepõe um elemento do Webflow. Mude a posição do chatbot (canto inferior esquerdo vs. canto inferior direito) nas configurações do Agentkit, ou ajuste o z-index do seu elemento Webflow se ele precisar aparecer acima do chatbot.

O chatbot dá respostas erradas. Revise a pergunta específica nos seus registros de conversas e adicione ou atualize um par de perguntas e respostas com a resposta correta. Os pares de perguntas e respostas têm prioridade sobre o conteúdo rastreado para perguntas correspondentes.

O chatbot não carrega em páginas específicas. Se você usou a instalação específica por página, verifique se o script está presente nas configurações de Código personalizado dessa página. Se você usou a instalação em todo o site, confira se não há um script conflitante ou um cabeçalho de segurança bloqueando-o.

Como começar

Adicionar um chatbot de IA ao seu site Webflow é uma das mudanças de maior impacto que você pode fazer com o menor esforço. Uma única tag de script dá a você um assistente disponível 24 horas por dia, 7 dias por semana, que responde às perguntas dos visitantes, captura leads e melhora a experiência de todos que visitam o seu site.

1. Cadastre-se no Agentkit (gratuito).
2. Crie um chatbot e treine-o com a URL do seu site Webflow.
3. Adicione pares de perguntas e respostas para as principais perguntas dos seus visitantes.
4. Personalize o widget para combinar com a sua marca.
5. Cole o código de incorporação nas configurações de Código personalizado do Webflow.
6. Publique e teste.

O processo inteiro leva cerca de 20 minutos. O seu chatbot começa a responder perguntas reais dos visitantes imediatamente.

Crie seu chatbot gratuitamente →

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