Widget de chat em JavaScript: adicione chat ao vivo com IA a qualquer site com uma única tag de script
Uma linha de JavaScript. Sem pacotes npm, sem dependências de framework, sem etapas de build. Cole uma tag de script no seu HTML e seu site terá um widget de chat com IA que lê seu conteúdo e responde às perguntas dos visitantes — em qualquer stack, em 36 idiomas.
Veja como a IA responde a perguntas no seu site
Cole qualquer URL de site abaixo. A IA lê suas páginas e começa a responder às perguntas dos visitantes usando seu próprio conteúdo — sem configuração, sem arquivos de configuração, sem chaves de API para gerenciar.
A maioria dos widgets de chat força você a adotar um ecossistema inteiro antes de poder cumprimentar um visitante
Adicionar chat ao vivo a um site deve ser simples. Em vez disso, a maioria das soluções de widget de chat puxa uma cadeia de dependências que transforma uma tarefa de cinco minutos em um projeto de engenharia. Você precisa de um pacote npm, que exige Node.js, que exige um pipeline de build, que exige uma configuração de bundler que funcione bem com o framework que você está usando. O wrapper do React não funciona com seu projeto Vue. O módulo Angular não suporta sua versão. A opção de JavaScript puro existe tecnicamente, mas a documentação pressupõe que você já está rodando Webpack com um carregador de módulos. Antes que um único visitante possa fazer uma única pergunta, você já queimou horas lutando com gerenciadores de pacotes, resolvendo conflitos de dependências peer e depurando erros de build que não têm nada a ver com chat. Seu site de marketing construído em HTML e CSS puro? Agora ele precisa de um ambiente Node só para exibir um balão de chat no canto. O site WordPress do seu cliente de agência? Boa sorte explicando por que ele precisa instalar o Node em sua hospedagem. Enquanto isso, seu objetivo real — permitir que os visitantes façam perguntas e obtenham respostas — fica no backlog atrás de um trabalho de infraestrutura que nunca deveria ter sido necessário. Um widget de chat é um elemento de UI, não um compromisso de plataforma. A Asyntai o trata dessa forma. Uma tag de script no seu HTML — a mesma linha de código, independentemente de seu site rodar React, Vue, Angular, Svelte, Astro, Next.js, HTML puro, um gerador de site estático, um CMS ou um framework renderizado pelo servidor que você construiu. Sem pacotes para instalar. Sem configuração de build para manter. Nenhuma dependência de tempo de execução que quebre quando você atualizar outra coisa. O script carrega de forma assíncrona, renderiza o widget e começa a responder às perguntas dos visitantes usando o conteúdo do seu site.
- Funciona em todas as stacks sem adaptaçãoApp de página única em React, site PHP renderizado pelo servidor, portfólio em HTML puro, blog Jekyll, site de documentação Hugo, aplicação Rails — o código de incorporação é idêntico em todos os casos. Você cola a tag de script antes da tag
</body>de fechamento e o widget de chat aparece. Não há wrapper específico de framework para configurar, nem guia de integração para seguir, nem matriz de compatibilidade para verificar. Se o navegador puder executar JavaScript, o widget funciona. - Impacto zero no seu pipeline de build existenteO widget carrega de uma CDN externa como um script autônomo. Ele não entra na sua árvore de dependências, não aparece no seu package.json e não participa do seu processo de build. Atualizar o React, mudar de Webpack para Vite ou migrar do Vue 2 para o Vue 3 não afeta o widget de chat. Ele opera independentemente do código do seu aplicativo, o que significa que nunca causa falha no build e nunca precisa de um aumento de versão.
- Carrega de forma assíncrona sem bloquear a renderização da páginaA tag de script usa o atributo async, então o conteúdo da sua página carrega primeiro e o widget de chat aparece assim que o navegador termina de renderizar. Os visitantes veem seu conteúdo imediatamente — o widget inicializa em segundo plano sem aumentar o tempo de carregamento da sua página. Não há flash de conteúdo não estilizado, nem deslocamento de layout, nem recurso de bloqueio de renderização diminuindo sua pontuação no Lighthouse.
Conecte suas APIs de backend e permita que o widget de chat busque dados ao vivo durante as conversas
O widget de chat responde às perguntas dos visitantes a partir do conteúdo do seu site imediatamente — páginas de produtos, documentação, tabelas de preços, seções de FAQ, páginas sobre nós. Mas algumas perguntas precisam de dados em tempo real que não estão em uma página estática. Ferramentas Personalizadas — disponíveis nos planos Standard ($139/mês) e Pro ($449/mês) — permitem que o widget de chat chame suas próprias APIs REST durante uma conversa, para que os visitantes obtenham respostas ao vivo em vez de informações desatualizadas.
- Inventário e disponibilidade em tempo realConecte uma Ferramenta Personalizada à sua API de produto. Quando um visitante pergunta "o modelo de 256GB está em estoque?", a IA consulta seu sistema de inventário e responde com a disponibilidade atual, datas de reabastecimento esperadas e preços — buscados ao vivo do seu banco de dados, não em cache de uma página rastreada.
- Status do pedido sem um ticket de suportePermita que os visitantes digitem o número do pedido no widget de chat e obtenham uma atualização instantânea. A IA chama sua API de rastreamento de pedidos e retorna o status de envio, o número de rastreamento e a data de entrega estimada. Sem fila de suporte, sem troca de e-mails e sem tempo de espera no telefone.
- Busca de conta e agendamentosPara produtos SaaS, empresas de serviços e sites baseados em agendamento, as Ferramentas Personalizadas permitem que o widget de chat verifique o status da assinatura, os próximos agendamentos ou saldos de conta consultando seu backend. Um visitante que pergunta "quando é meu próximo agendamento?" obtém a resposta do seu sistema de agendamento em tempo real.
- Preços e orçamentos dinâmicosSe o seu preço depende de configuração, quantidade ou segmento de cliente, uma Ferramenta Personalizada pode calcular orçamentos na hora. A IA coleta os requisitos através da conversa — tamanho, quantidade, velocidade de entrega — e chama seu endpoint de preços para retornar um orçamento preciso sem que o visitante preencha um formulário.
- 36 idiomas com detecção automáticaUm visitante navegando no seu site em inglês em Tóquio recebe respostas em japonês. Um visitante em São Paulo recebe respostas em português. A IA detecta o idioma do visitante automaticamente e responde na mesma língua — 36 idiomas suportados em todos os planos, sem custo adicional. O conteúdo do seu site não precisa ser traduzido.
Adicione o widget de chat em JavaScript ao seu site
Sem pacotes, sem ferramentas de CLI, sem etapas de build. Quatro passos e seu site terá um widget de chat com IA respondendo às perguntas dos visitantes.
- Escolha um plano em asyntai.com/pricing — o plano Gratuito oferece 1 site e 100 mensagens por mês para testar com tráfego real de visitantes.
- Adicione o URL do seu site no painel. A IA rastreia até 50 páginas — descrições de produtos, documentação, seções de FAQ, páginas de preços, páginas sobre nós — e constrói sua base de conhecimento a partir do seu conteúdo existente.
- Personalize a aparência do widget de chat. Defina as cores da sua marca, avatar, mensagem de saudação e posição. Adicione qualquer conteúdo suplementar — PDFs, artigos da base de conhecimento, documentos de política — como arquivos enviados para cobrir informações além do que suas páginas da web contêm.
- Copie a tag de script de linha única e cole-a no seu HTML — antes da tag
</body>de fechamento, no cabeçalho do seu template, ou onde quer que seu site carregue scripts externos. O widget entra no ar imediatamente.
<script src="https://asyntai.com/widget.js"
data-id="your-site-id" async>
</script>
# Sem npm. Sem bundler. Sem dependências.
# Funciona em React, Vue, Angular ou HTML puro.
Widget de Chat em JavaScript — FAQs
Perguntas comuns de desenvolvedores e proprietários de sites sobre a adição de um widget de chat em JavaScript ao seu site.
Isso funciona com React, Vue, Angular e outros frameworks?
Sim. O widget de chat carrega como um script autônomo de uma fonte externa — ele não interage com a árvore de componentes, gerenciamento de estado ou ciclo de renderização do seu framework. Você cola a mesma tag de script em um aplicativo React, um projeto Vue, uma aplicação Angular, um site Svelte ou uma página HTML pura. Não há wrapper específico de framework, nem pacote adaptador, nem etapa de integração. O widget renderiza independentemente no DOM e não entra em conflito com o código do seu aplicativo. Se o seu site executa JavaScript no navegador, o widget funciona nele.
Isso vai deixar meu site lento?
Não. O script carrega de forma assíncrona, o que significa que ele não bloqueia a renderização da sua página. Seu HTML, CSS e conteúdo visível primeiro — o widget de chat inicializa em segundo plano depois que a página está interativa. O script em si é leve e servido de uma CDN, então os tempos de carregamento são mínimos, independentemente da localização do seu visitante. Ele não adiciona ao seu caminho de renderização crítico e não afeta suas Core Web Vitals ou pontuação de desempenho do Lighthouse.
Como a IA sabe o que dizer sobre meu site?
Quando você adiciona o URL do seu site no painel, a IA rastreia até 50 páginas e lê o conteúdo — descrições de produtos, documentação, informações de preços, páginas de FAQ, páginas sobre nós, documentos de política e qualquer outra coisa publicamente acessível. Ele usa esse conteúdo para responder às perguntas dos visitantes. Ele não gera informações que não estão no seu site. Você também pode enviar documentos adicionais — PDFs, artigos da base de conhecimento, guias internos — para expandir o que o chatbot sabe além das suas páginas da web publicadas.
Posso personalizar a aparência para combinar com minha marca?
Sim. O painel permite que você defina a cor principal do widget, a cor do texto, a imagem do avatar, a mensagem de saudação e a posição do balão de chat (esquerda ou direita). Você pode combiná-lo com a paleta da sua marca para que pareça uma parte nativa do seu site, em vez de um complemento de terceiros. A personalização é feita através da interface do painel — sem necessidade de substituições de CSS ou objetos de configuração JavaScript.
Funciona em sites estáticos e aplicações de página única?
Sim para ambos. Em um site HTML estático, o widget carrega quando a página carrega e permanece ativo enquanto o visitante estiver na página. Em uma aplicação de página única — onde a navegação acontece no lado do cliente sem recarregamentos completos da página — o widget persiste automaticamente em todas as mudanças de rota. Um visitante pode navegar por todo o seu SPA e a conversa do chat continua ininterrupta. Não é necessária configuração especial para roteamento do lado do cliente.
O widget de chat pode se conectar às minhas APIs de backend?
Sim, através das Ferramentas Personalizadas nos planos Standard ($139/mês) e Pro ($449/mês). Você define seu endpoint de API no painel, especifica quais parâmetros a IA deve extrair da conversa, e o widget de chat chama sua API durante as conversas para buscar dados ao vivo. Usos comuns incluem verificações de inventário, consultas de status de pedidos, agendamento de compromissos e consultas de saldo de conta. A IA lida com a conversa naturalmente — os visitantes apenas fazem sua pergunta, e o chatbot chama sua API nos bastidores para obter a resposta.
Quais idiomas o widget de chat suporta?
A IA suporta 36 idiomas e detecta o idioma do visitante automaticamente. Um visitante que digita em espanhol recebe uma resposta em espanhol. Um visitante que digita em japonês recebe uma resposta em japonês. O conteúdo do seu site não precisa ser traduzido — a IA lê suas páginas em inglês e entrega as respostas no idioma que o visitante usa. O suporte a idiomas está incluído em todos os planos sem custo adicional.
Quanto custa?
O plano Gratuito oferece 1 site e 100 mensagens por mês — o suficiente para testar o widget de chat com tráfego real de visitantes e ver como a IA lida com as perguntas no seu site. Starter custa $39/mês com 2.500 mensagens e 2 sites. Standard custa $139/mês com 15.000 mensagens, 3 sites e Ferramentas Personalizadas para integrações de API. Pro custa $449/mês com 50.000 mensagens, 20 sites e branding white-label. Todos os planos são mensais, sem contratos. Você pode atualizar ou cancelar a qualquer momento.
Preciso atualizar a tag de script quando o widget receber novos recursos?
Não. A tag de script aponta para um URL hospedado que sempre serve a versão atual. Quando novos recursos ou melhorias são lançados, seu widget os obtém automaticamente — sem alterações de código do seu lado. O código de incorporação que você cola no seu HTML hoje é o mesmo código que funcionará no próximo ano. Você nunca precisa atualizar uma versão de pacote, executar uma migração ou alterar sua integração.
Widget de chat em JavaScript: o caso de uma linha de código
Existe um tipo específico de frustração que vem ao tentar adicionar um recurso simples a um site e descobrir que a versão "simples" exige um gerenciador de pacotes, uma ferramenta de build e três arquivos de configuração. Os widgets de chat atingem esse nervo regularmente. Você quer um pequeno botão flutuante no canto do seu site que permita aos visitantes fazer perguntas. O guia de implementação começa com "npm install" e termina com um plugin do Webpack. Em algum momento, o projeto mudou de "adicionar chat ao site" para "modernizar o pipeline de build para suportar os requisitos do widget de chat". O rabo está abanando o cachorro, e o visitante que só queria perguntar sobre sua política de devolução ainda está olhando para um canto de página vazio.
O ecossistema JavaScript se move rápido, e o dano colateral dessa velocidade é a fragilidade das dependências. Um widget de chat distribuído como um pacote npm herda todos os problemas que os pacotes npm carregam: conflitos de versão com outros pacotes no seu projeto, alterações de quebra em lançamentos menores, avisos de dependências peer que podem ou não importar, e a ansiedade silenciosa de saber que seu recurso de chat depende de uma árvore de dependências transitivas mantidas por estranhos. Quando uma dessas dependências publica uma atualização ruim — e eventualmente uma o fará — seu widget de chat quebra sem culpa sua. Você está depurando a cadeia de suprimentos de outra pessoa às 9 da manhã de uma segunda-feira porque um visitante relatou que o botão de chat desapareceu.
Uma tag de script elimina essa categoria de problemas inteiramente. O widget de chat carrega de um URL hospedado, é executado em seu próprio escopo e não participa do seu processo de build. Ele não tem entrada no seu package.json, nenhuma linha no seu arquivo de lock e nenhum nó no seu gráfico de dependências. Quando você atualiza o React de 18 para 19, o widget de chat não é afetado. Quando você muda de Create React App para Vite, o widget de chat não é afetado. Quando você migra seu site de marketing de Gatsby para Astro, o widget de chat não é afetado. É uma tag de script no seu HTML — o mesmo mecanismo de implantação que funciona desde 1995 — e não carrega nenhum do acoplamento que a distribuição moderna de pacotes introduz.
O desempenho é o outro eixo onde uma tag de script autônoma supera um pacote empacotado. Quando um widget de chat reside dentro do seu bundle de aplicação, ele aumenta o tamanho do seu bundle. Cada visitante baixa o código do widget de chat como parte do seu arquivo JavaScript principal, quer ele interaja com o chat ou não. A inicialização do widget é executada durante a sequência de inicialização da sua aplicação, competindo com a thread principal durante o caminho de renderização crítico. Uma tag de script com o atributo async carrega independentemente — o navegador a busca em paralelo com o código da sua aplicação e a executa depois que a página está interativa. O widget de chat nunca aparece na sua análise de tamanho de bundle, nunca contribui para sua métrica Time to Interactive e nunca causa um deslocamento de layout durante a renderização inicial.
Agências e freelancers que constroem sites para clientes enfrentam uma versão particularmente aguda do problema de dependência. O site de marketing de um cliente é construído em WordPress, Squarespace, Wix ou HTML puro servido de hospedagem compartilhada. O cliente não tem Node.js instalado. O cliente não tem um pipeline de build. O cliente não sabe o que é npm, e explicar isso levaria mais tempo do que a configuração do widget de chat deveria levar. Quando a solução de chat exige um ambiente Node, a agência tem duas opções: configurar um processo de build na hospedagem do cliente (que o cliente não pode manter) ou dizer ao cliente que sua plataforma não é suportada. Uma tag de script não exige nenhuma das duas. A agência cola uma linha de código no template do site, e o widget de chat funciona. O cliente pode ver funcionando imediatamente. A entrega é limpa porque não há ambiente de desenvolvimento para manter.
Aplicações de página única apresentam um desafio sutil que a maioria das instalações de widget de chat lida mal. Quando a navegação acontece no lado do cliente — React Router, Vue Router, roteador do Angular — uma implementação de chat ingênua perde o estado da conversa em cada mudança de rota. O visitante faz uma pergunta na página de preços, navega para a página de recursos e a janela de chat é redefinida. O widget Asyntai persiste na navegação do lado do cliente automaticamente. A conversa continua ininterrupta, independentemente de quantas vezes o visitante navega dentro da aplicação. Isso não é uma opção de configuração que você precisa ativar — é o comportamento padrão porque perder o estado da conversa durante a navegação é um bug, não um recurso.
A questão do que o widget de chat realmente faz com o conteúdo do seu site é onde a lacuna entre o chat ao vivo tradicional e um widget com IA se torna mais aparente. Um widget de chat JavaScript tradicional é um canal de comunicação — ele conecta um visitante a um operador humano. Se nenhum operador estiver disponível, o visitante recebe um formulário de "deixar mensagem" ou uma resposta automática que não diz nada útil. Um widget de chat com IA lê o conteúdo do seu site — até 50 páginas, rastreadas automaticamente quando você adiciona seu URL — e usa esse conteúdo para responder diretamente às perguntas. Um visitante que pergunta "quais são suas taxas de envio?" obtém a resposta da sua página de política de envio. Um visitante que pergunta "vocês oferecem um teste gratuito?" obtém a resposta da sua página de preços. A IA não inventa informações. Ela lê o que você publicou e entrega de forma conversacional, que é o que o visitante faria por conta própria se tivesse paciência para encontrar a página certa e o parágrafo certo.
A implementação técnica da tag de script é deliberadamente mínima. Você copia uma linha de HTML do seu painel, cola-a no template da sua página — antes da tag body de fechamento, em uma seção head ou onde quer que seu site normalmente carregue scripts externos — e o widget aparece. O script aceita um único atributo de dados: seu ID de site. Não há objetos de configuração para definir em JavaScript, nenhuma função de inicialização para chamar, nenhum listener de evento para conectar. O painel lida com toda a configuração — cores, mensagem de saudação, posição, avatar, configurações de comportamento — para que as alterações não exijam implantações de código. Sua equipe de marketing pode ajustar a aparência e a saudação do widget de chat sem tocar em um editor de código ou esperar que um desenvolvedor envie uma atualização.
O suporte a idiomas é outra área onde a simplicidade da implementação oculta a sofisticação do resultado. A IA detecta o idioma de cada visitante automaticamente e responde na mesma língua — 36 idiomas, do árabe ao vietnamita, sem configuração adicional. Um visitante navegando no seu site em inglês vindo de Seul digita uma pergunta em coreano e recebe uma resposta em coreano. Um visitante de Berlim digita em alemão e recebe uma resposta em alemão. O conteúdo do seu site não precisa ser traduzido. A IA lê suas páginas em inglês e entrega a resposta no idioma que o visitante usa. Isso acontece em todos os planos, incluindo o Gratuito, sem pacotes de idiomas para instalar e sem arquivos de tradução para manter.
Para sites que precisam que o widget de chat faça mais do que apenas responder a partir de conteúdo estático, as Ferramentas Personalizadas nos planos Standard e Pro permitem que a IA chame suas próprias APIs REST durante uma conversa. Um visitante pergunta "meu pedido já foi enviado?" e a IA extrai o número do pedido, chama sua API de fulfillment e retorna as informações de rastreamento. Um visitante pergunta "vocês têm a versão azul no tamanho M?" e a IA consulta seu endpoint de inventário. Isso transforma o widget de chat de uma ferramenta de recuperação de conteúdo em uma interface de autoatendimento para seus sistemas de backend — sem construir um framework de chatbot, escrever fluxos de diálogo ou gerenciar o estado da conversa. Você define o endpoint da API e os parâmetros. A IA lida com a conversa naturalmente.
Desenvolvedores preocupados com segurança geralmente perguntam sobre as implicações de carregar um script de terceiros. O widget é executado no contexto de execução padrão do navegador — da mesma forma que scripts de análise, carregadores de fontes e pixels de marketing são executados. Ele não acessa o escopo JavaScript do seu aplicativo, não lê cookies definidos pelo seu aplicativo e não modifica seu DOM além do contêiner que ele cria para a interface de chat. O widget se comunica com o backend da Asyntai via HTTPS para enviar mensagens de visitantes e receber respostas da IA. Os dados da conversa são processados para gerar respostas e não são usados para construir perfis ou vendidos a terceiros.
A estrutura de custos reflete a realidade de que a maioria dos sites não precisa de infraestrutura de chat de nível empresarial. O plano Gratuito — um site, 100 mensagens por mês — permite que você incorpore o widget em um projeto pessoal, site de portfólio ou página de pequeno negócio e veja como os visitantes interagem com ele. Cem mensagens são suficientes para avaliar a qualidade das respostas da IA no seu conteúdo específico. Se funcionar, o plano Starter por $39 por mês cobre 2.500 mensagens e dois sites, o que lida confortavelmente com o tráfego da maioria dos sites de pequenas e médias empresas. Standard por $139 por mês adiciona Ferramentas Personalizadas para integrações de API e 15.000 mensagens em três sites. Pro por $449 por mês é projetado para agências e empresas que executam o widget em várias propriedades — 20 sites, 50.000 mensagens, branding white-label e recursos completos de integração de API.
Sites de documentação são um caso de uso subestimado para um widget de chat com IA. Desenvolvedores constroem documentação com geradores de sites estáticos — Hugo, Jekyll, Docusaurus, MkDocs, VitePress — e o resultado são dezenas ou centenas de páginas cobrindo APIs, opções de configuração, tutoriais e guias de solução de problemas. Os visitantes de sites de documentação estão procurando respostas específicas: "Como faço para autenticar com a API?" "Quais são os limites de taxa?" "Por que ocorre este erro?" Eles precisam navegar por uma barra lateral, pesquisar em páginas e procurar a seção relevante. Um widget de chat com IA que lê o conteúdo da documentação permite que eles façam a pergunta diretamente e obtenham a resposta específica — extraída da página correta, entregue em uma frase em vez de uma página. Para projetos de código aberto e ferramentas para desenvolvedores, isso transforma a documentação de uma referência que você pesquisa em um recurso com o qual você conversa.
O comportamento do widget em dispositivos móveis vale a pena mencionar porque o celular é muitas vezes onde os widgets de chat falham. O espaço da tela é limitado, e um widget mal implementado cobre o conteúdo da página, cria problemas de captura de rolagem ou é renderizado em um tamanho inutilizável. O widget Asyntai é responsivo por padrão — ele se adapta ao viewport, usa alvos de toque apropriados para interação móvel e abre como uma sobreposição de tela cheia em telas pequenas para que a conversa seja legível sem apertar os olhos. Fechar o chat restaura a página exatamente como estava. Não há configuração móvel especial. A mesma tag de script que funciona no desktop funciona no celular, tablet e tudo mais.
Uma tag de script. Sem dependências. IA que lê seu site e responde às perguntas dos visitantes em 36 idiomas. Comece com o plano Gratuito e veja funcionando no seu site em cinco minutos — ou vá para o Standard para Ferramentas Personalizadas e integração de API.