Documentação

Widget JavaScript

Instale o widget de chat com o código completo gerado em Canais.

O widget JavaScript adiciona um balão de chat flutuante ao seu site. O código gerado contém duas tags de script; copie ambas na aba Canais do seu agente.

Configuração Rápida

  1. Abra Canais → Incorporação no site do seu agente
  2. Selecione Widget de chat e ative o canal
  3. Copie o código gerado completo, incluindo as duas tags de script
  4. Cole-o no seu site antes de </body>
  5. Salve e atualize seu site

A primeira tag prepara a fila de comandos do Agentkit. A segunda carrega o widget com o ID do agente e a URL de script configurada. Mantenha as duas tags e seus valores juntos.

Configuração do Widget

Posição

O widget aparece no canto inferior direito por padrão. Altere a posição nas configurações de Design.

Cores

As cores do widget correspondem às configurações de tema do seu agente. Personalize na aba Design.

Dispositivos Móveis

O widget é totalmente responsivo e funciona em dispositivos móveis automaticamente.

Anexos de Arquivos

Os visitantes podem anexar documentos, planilhas, imagens e arquivos de texto diretamente pelo widget. Os anexos são usados apenas como contexto temporário da conversa e não são adicionados às fontes de treinamento do seu agente.

Os formatos aceitos incluem arquivos PDF, Word, Excel, HTML, TXT, Markdown, JSON, CSV, PNG, JPG, WEBP e GIF. Os visitantes podem anexar até 3 arquivos por mensagem, com limite de 10MB por arquivo. Os PDFs são analisados até as primeiras 20 páginas para manter as respostas rápidas e confiáveis.

Atributos de Dados

O widget usa atributos de dados para configuração:

AtributoDescriçãoPadrão
data-chatbotObrigatório. O ID do seu agente (incluído no seu código de incorporação)-

Posicionamento

Onde Adicionar o Código

Cole as duas tags de script geradas antes de </body>:

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste both script tags from Channels > Website embed here -->
</body>
</html>

Aplicativos de Página Única

Para SPAs, adicione o código gerado completo ao template HTML principal ou arquivo index.

Múltiplas Páginas

Adicione o mesmo código gerado a todas as páginas onde deseja mostrar o widget ou coloque-o em um template de layout compartilhado.

Testando sua Instalação

Após adicionar o código:

  1. Visite seu site em um navegador
  2. Procure pelo balão de chat (canto inferior direito por padrão)
  3. Clique para abrir o chat
  4. Envie uma mensagem de teste
  5. Verifique se a resposta está correta

Solução de Problemas

Widget não aparece:

  • Verifique no código-fonte renderizado se as duas tags de script geradas estão antes de </body>
  • Verifique se o ID do agente está correto
  • Limpe o cache do navegador
  • Verifique o console do navegador em busca de erros

Posição errada:

  • Verifique as configurações de Design
  • Procure por conflitos de CSS

Não está respondendo:

  • Certifique-se de que existe conteúdo de treinamento
  • Verifique os limites de mensagens do plano
  • Teste primeiro no Playground

Restrições de Domínio

Se você configurou domínios permitidos:

  • O widget só carrega em domínios aprovados
  • Outros sites não veem o widget (nenhum erro é exibido)

Configurar domínios →

Desempenho

O widget é otimizado para impacto mínimo:

  • Carrega de forma assíncrona (atributo async)
  • Tamanho de pacote pequeno
  • Sem bloqueio de renderização
  • Carregamento lento (lazy load) da interface de chat

Conflitos de Estilo

O widget usa estilos isolados e não deve entrar em conflito com seu site. Se você notar problemas:

  1. Verifique se há seletores CSS globais
  2. Procure por regras !important
  3. Contate o suporte se os problemas persistirem

Removendo o Widget

Para remover:

  1. Remova as duas tags de script geradas do seu HTML
  2. Limpe qualquer cache
  3. O widget desaparece imediatamente

Próximos Passos