Para adicionar um chatbot Agentkit ao Webflow, copie as duas tags de script geradas em Channels → Website embed → Chat widget. Coloque-as no campo Footer code de todo o site do Webflow ou no campo Before </body> de uma única página e depois publique. Verifique a página publicada e faça uma pergunta cuja resposta você já conhece.
O código atual do Agentkit inclui um pequeno bootstrap de fila seguido pelo loader do widget, com o ID do seu chatbot e a URL atual do script. Copie-o como uma unidade a partir do seu próprio painel.
Verifique o acesso antes de começar
As regras de código personalizado do Webflow exigem um Workspace Core, Growth, Agency ou Freelancer, ou um plano Site ativo. Um Site manager ou Designer precisa adicionar o código. Se você não conseguir adicionar código personalizado, verifique o plano e a sua função antes de alterar o chatbot. O Webflow não garante que o código personalizado de terceiros funcione nem oferece suporte direto para solucionar problemas com ele.
Você também precisa de um chatbot Agentkit com Chat widget ativado. Crie um, adicione uma fonte de site atual ou respostas de Q&A aprovadas e teste algumas perguntas no playground. Verifique as respostas antes de convidar visitantes.
Se você adicionar uma URL do Webflow como fonte de site, verifique o que o Agentkit realmente indexou. Um crawl ou sitemap pode descobrir várias páginas, mas caminhos excluídos, conteúdo inacessível e falhas de extração podem deixar lacunas. O guia de fontes de site explica como inspecionar e restringir o crawl. Adicione uma fonte de Q&A exata para uma resposta sobre políticas que precise de uma redação cuidadosa.
Coloque o código em um único local do Webflow
Para um widget em todas as páginas:
- Abra a página Channels → Website embed → Chat widget do seu chatbot no Agentkit. Ative o canal e copie todo o bloco de código gerado, incluindo as duas tags de script.
- No Webflow, abra Site settings → Custom code. Cole o código em Footer code, que o Webflow insere antes da tag de fechamento
</body>. - Salve as alterações e publique no domínio que pretende testar. Apenas salvar o campo não atualiza o site visto pelos visitantes.
Para um widget em uma única página, deixe Site settings vazio. No Webflow Designer, abra Page settings → Custom code → Before </body> tag da página, cole as duas tags, salve e publique. Repita apenas nas páginas que precisam do widget. O Webflow insere o código da página depois do código do site, então mantenha o snippet em um único lugar para facilitar alterações e a solução de problemas.
O guia de instalação do Webflow tem uma versão mais curta destes passos.
Verifique a página publicada
Abra o domínio *.webflow.io publicado ou o seu domínio personalizado em uma nova aba. O Webflow informa que o código personalizado pode ser executado na pré-visualização do Designer, mas os visitantes não receberão uma alteração salva até que você publique. Teste o domínio real que os visitantes usam.
Use esta verificação de aceitação antes de convidar tráfego:
| Verificação | Resultado esperado |
|---|---|
| Código-fonte da página | A tag de bootstrap de fila e a tag do loader do widget do código gerado, instaladas em um único lugar |
| Widget | O launcher abre nas páginas publicadas de desktop e mobile onde você o colocou |
| Resposta conhecida | Uma pergunta sobre conteúdo aprovado retorna a resposta pretendida |
| Domínio | Os domínios de staging e personalizados que você testa estão permitidos se você ativou as restrições de domínio |
Por exemplo, um site de serviços pode testar "Vocês atendem aos sábados?" contra uma página de horários aprovada. Se a resposta estiver ausente ou errada, corrija a fonte ou adicione uma resposta de Q&A exata e repita o teste. A presença de um balão de chat prova apenas que o widget foi renderizado.
Se o launcher não aparecer, inspecione o código-fonte da página publicada em busca de ambas as tags, confirme que Chat widget está ativado e verifique as requisições de rede com falha no navegador. Se você não conseguir adicionar código personalizado, volte aos requisitos de plano e função do Webflow. Se você colou o snippet tanto em Site settings quanto em Page settings, remova uma cópia e publique novamente. Se o launcher abrir mas a resposta falhar, verifique as fontes do chatbot e os domínios permitidos antes de alterar o código do Webflow.
Após uma instalação bem-sucedida, analise as primeiras perguntas reais e corrija as lacunas nas fontes. Verifique novamente quando alterar uma página do Webflow ou alternar entre staging e o seu domínio personalizado. Para um painel dentro do conteúdo da página em vez de um launcher flutuante, use o canal iframe separado do Agentkit.
