Para incorporar um chatbot do Agentkit, abra a página Channels → Website embed do seu agente, ative Chat widget e copie o código gerado completo. Cole as duas tags script num rodapé de todo o site ou num modelo de página, publique, depois carregue a página pública e envie uma mensagem de teste. O código gerado já contém o ID do seu agente e o URL configurado do widget. Não o substitua por um trecho copiado de um artigo.
Se quiser o chat dentro de uma secção da página, ative o canal Iframe e copie o código iframe gerado em vez disso. O iframe e o widget flutuante são canais separados, por isso verifique o interruptor do que está a usar.
Escolha onde o chat deve aparecer
| Objetivo | Use | Onde obter |
|---|---|---|
| Um balão de chat flutuante em todo o site | Chat widget | Channels → Website embed → Chat widget |
| Um painel de chat dentro de uma página de suporte ou contacto | Iframe | Channels → Website embed → Iframe |
| Um balão flutuante numa aplicação React ou Next.js | Chat widget | Use o script gerado no layout ou no modelo HTML da aplicação |
| Um balão em todo o site WordPress | Chat widget | Coloque as duas tags geradas num campo de código do rodapé |
Uma aplicação React não precisa de um pacote React do Agentkit separado para esta instalação. Para um exemplo de colocação em React ou Next.js, siga o guia de integração com React. O guia de iframe mostra como dimensionar um painel de chat embutido.
Instale o widget flutuante
- Crie um agente, adicione uma fonte cujas respostas consiga verificar e experimente algumas perguntas no Playground. Se estiver a começar do zero, crie uma conta Agentkit.
- Abra a página Channels → Website embed do agente. Selecione Chat widget e ative esse canal.
- Copie o código completo mostrado aí. Contém um pequeno script de bootstrap seguido do script assíncrono do widget. Mantenha as duas tags e os seus valores gerados de
data-chatbotesrcjuntos. - Cole o código no rodapé partilhado do site ou no modelo HTML, antes da tag de fecho
</body>. Adicione-o uma vez por página. Se quiser o widget apenas numa página, use a área de código dessa página. - Publique o site. Abra o URL público numa janela nova do navegador, clique no balão e envie uma pergunta cuja resposta consiga confrontar com uma fonte aprovada.
O URL do widget depende da configuração de alojamento do Agentkit. Por isso, copie o código atual de Website embed. O guia do widget JavaScript tem os passos de configuração atuais, e o guia do Embed SDK explica o que o bootstrap faz.
React e Next.js
Adicione o script ao modelo HTML da aplicação ou a um layout partilhado para que carregue nas páginas onde quer o balão. Mantenha uma única cópia do widget em cada página renderizada. O guia de integração com React cobre a colocação no layout para React e Next.js. Copie o URL atual e o ID do agente em Channels → Website embed; a instalação de um pacote não faz parte desta configuração.
WordPress
Para uma instalação em todo o site, cole as duas tags script geradas no campo Footer do ecrã Header & Footer do WPCode. Guarde, limpe qualquer cache do site e depois inspecione uma página pública. O WordPress pode remover scripts de um bloco Custom HTML quando a sua conta não tem permissão para os publicar, por isso verifique o código-fonte da página renderizada se o balão não aparecer. Siga o guia de instalação no WordPress para o caminho exato do menu e as verificações.
Incorpore o chat dentro de uma página
Escolha Iframe na mesma página Website embed, ative o canal e copie o iframe gerado. Cole-o onde o chat embutido deve aparecer. O seu URL aponta para a página iframe alojada do seu agente. O painel embutido fica nessa secção da página; não adiciona um balão flutuante ao resto do site. Dê ao iframe altura suficiente no seu layout, use Visit para pré-visualizar a página de chat alojada e depois teste o iframe na sua página publicada. O iframe não expõe o SDK window.agentkit da página principal, por isso use o widget de script se precisar desses comandos do navegador. Veja as instruções de iframe.
Verifique o resultado antes do lançamento
Abra a página publicada numa janela nova do navegador e registe quatro resultados:
- O balão ou o painel embutido aparece no lugar esperado?
- Abre e aceita uma mensagem?
- A resposta corresponde à fonte que usou para o teste?
- Um visitante ainda consegue chegar ao seu canal de contacto habitual se o agente não conseguir responder?
Se nada aparecer, verifique primeiro se o canal está ativado e inspecione o código-fonte da página renderizada à procura das duas tags do widget geradas ou do iframe. Confirme que o URL do script é absoluto e carrega no painel Network do navegador. Um editor de conteúdo ou uma cache podem ter removido ou atrasado o código. Se a interface aparecer mas uma mensagem falhar, verifique as definições do agente, os domínios permitidos e o estado da fonte. O guia de restrição de domínios explica como uma lista de domínios permitidos afeta as incorporações.
Guarde a pergunta de teste e a resposta observada nas suas notas de lançamento. Instalar um widget prova que ele carrega; não prova que todas as respostas estão corretas. Volte a verificar as perguntas afetadas depois de alterar fontes ou definições.
