Documentação

Widget JavaScript

Adicione o widget de chat a qualquer site com uma simples tag de script.

O widget JavaScript é a maneira mais simples de adicionar seu agente a qualquer site. Uma única tag de script cria um balão de chat flutuante que os visitantes podem clicar para iniciar uma conversa.

Configuração Rápida

  1. Vá até a aba Publicar do seu agente
  2. Selecione Widget de chat (padrão)
  3. Copie o trecho JavaScript exibido
  4. Cole-o no seu site antes de </body>
  5. Salve e atualize seu site

O balão de chat aparece no canto da sua página. Seu trecho inclui o ID específico do seu agente e a URL correta do script.

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

Adicione o script imediatamente antes de </body> para melhor desempenho:

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

  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

Aplicativos de Página Única

Para SPAs, adicione o script ao seu template HTML principal ou arquivo index.

Múltiplas Páginas

Adicione o mesmo script em todas as páginas onde você deseja que o widget apareça. Ou adicione-o ao template de layout do seu site.

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 se o script está 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. Exclua a tag de script do seu HTML
  2. Limpe qualquer cache
  3. O widget desaparece imediatamente

Próximos Passos