Chatbots estão se tornando um canal padrão de atendimento ao cliente, mas sites HTML não contam com integrações com um clique disponíveis em plataformas como Shopify ou WordPress. A boa notícia é que você não precisa construir um do zero: um chatbot em HTML pode ser configurado visualmente e incorporado em qualquer página com um único snippet de código.
Isso pode ser feito com o Elfsight AI Chatbot – um widget amigável que aprende com o conteúdo do seu próprio negócio e pode ser inserido em qualquer arquivo HTML com uma colagem de duas linhas. Ele lida com perguntas dos visitantes, coleta leads e oferece conversas multilíngues prontas para uso. Abaixo, apresentamos essa abordagem ao lado de métodos faça-você-mesmo, para que você possa escolher aquela que melhor se adequa à sua configuração.
- Uma forma rápida e fácil de incorporar um Chatbot de IA em HTML sem codificação
- Como treinar e personalizar um chatbot para o seu caso de uso
- Quais são as limitações dos métodos de integração manuais
- 6 dicas de otimização para uma experiência de chatbot verdadeiramente eficaz
Forma rápida de adicionar um chatbot em HTML
É assim que você adiciona um chatbot ao HTML em quatro passos, sem código — basta colar.
- Abra o construtor e selecione um modelo de chatbot com IA
- Configure a base de conhecimento do chatbot e personalize
- Clique em “Adicionar ao site” para obter seu código de instalação
- Cole-o dentro da <body> seção do seu arquivo HTML e salve.
Configure seu chatbot com IA no editor interativo abaixo ↓
Métodos de Configuração para um Chatbot em HTML
Existem várias formas de colocar um chatbot em um site HTML personalizado. A escolha certa depende de quanto controle você precisa, de quanto tempo quer investir e se você procura conversas com IA ou uma simples árvore de decisão.
| Método | Dificuldade | IA | Customização | Manutenção | Preço |
|---|---|---|---|---|---|
| Chatbot de IA da Elfsight | Sem código | Sim (com IA) | Alto (editor visual) | Nenhum (hospedado na nuvem) | Plano gratuito / níveis pagos |
| Chatbot em JavaScript Personalizado | Avançado | Opcional (requer API) | Completo | Alto (auto-gerenciado) | Custos de API |
| Integração de API de terceiros | Intermediário | Sim | Moderado | Moderado | Tarifas de uso da API |
| Framework de chatbot de código aberto | Avançado | Varia | Completo | Alta | Grátis + Hospedagem |
Ponto-chave: Um widget de chatbot é o caminho mais rápido se você não quiser construir ou manter a infraestrutura. Um chatbot em JS personalizado ou integração direta de API oferece mais controle, mas requer tempo de desenvolvimento e manutenção contínua — o mesmo vale para frameworks de código aberto.
Que tipo de Chatbot você precisa?
Antes de configurar qualquer coisa, vale pensar no que você realmente quer que o chatbot faça.
Assistente de Suporte vs. Ferramenta de Conversão
A maioria das pessoas usa por padrão um “bot de suporte ao cliente”, mas os dados da comunidade da Elfsight mostram que a maioria das configurações de chatbot não são puramente agentes de suporte. Eles são usados como assistentes de agendamento, guias de recomendação de produtos, navegadores de FAQ e funis de consultoria.
| Sim! A Elfsight oferece um plano gratuito que permite explorar todos os recursos e publicar o widget sem custo. Você pode atualizar depois para desbloquear opções avançadas. | Foco da Base de Conhecimento | Habilidades-chave para habilitar | Estilo de Saudação |
|---|---|---|---|
| Suporte ao Cliente | Documentação de Ajuda, Políticas e Guias de Solução de Problemas | Contato Humano, Mensagem de Acompanhamento | Focado em tarefas (“Como posso ajudar?”) |
| Vendas / Guia de Produto | Páginas de produto, preços, comparações | Botões de Ação (WhatsApp, Email, URL) | Orientado a benefícios (“Encontre o plano certo”) |
| Reserva / consulta | Serviços, disponibilidade, processo | Botões de Ação (Direções, URL), Coletar Contatos | Foco na ação (“Agendar uma sessão”) |
| Educacional / FAQ | Artigos, guias, blocos de texto | Mensagem de Acompanhamento | Guiado pela curiosidade (“Pergunte-me qualquer coisa sobre…”) |
A distinção importa porque altera o que você coloca na base de conhecimento, como você escreve a saudação e quais habilidades você ativa.
Um chatbot ou vários?
Se o seu site atende a públicos ou casos de uso diferentes, considere usar widgets de chatbot separados para páginas distintas, em vez de um bot único para tudo. Cada widget pode ter sua própria base de conhecimento e instruções — permitindo que o chatbot da página de preços trate de comparações de planos, enquanto o chatbot da página de suporte foca na solução de problemas. Isso mantém as respostas objetivas e reduz a confusão.
Prefere assistir em vez de ler? Este curto tutorial mostra toda a configuração:
Guia detalhado para Configurar um Chatbot em HTML
Agora que você já definiu o tipo de chatbot de que precisa, este guia passo a passo cobre todas as fases de configuração, desde a seleção do template até a incorporação.
Etapa 1: Escolha o seu modelo de chatbot HTML
Abra o construtor do Chatbot de IA e você verá uma biblioteca de templates de início projetados para diferentes casos de uso. Cada um vem com saudações pré-configuradas, perguntas sugeridas e estilos únicos. Escolha o template mais próximo do seu tipo de negócio ou comece do zero — você personalizará tudo nas próximas etapas.
Assim que você selecionar um template, clique em “Continuar com este template” e cole a URL do seu site para iniciar o treinamento inicial.
Passo 2: Configurar o perfil do agente de IA
A seguir, a aba Agente é onde você define como o chatbot se apresenta e como se comunica. Este é o primeiro contato que os visitantes veem quando a janela de chat se abre, então vale acertar.
- Nome de Exibição e Legenda — o nome mostrado no cabeçalho do chat (ex.: nome da empresa + “Agente de IA”)
- Foto de Perfil — faça o upload do seu logotipo ou de um avatar personalizado
- Função — descreva o que o agente faz para manter a IA no personagem
- Tom de Voz — escolha entre Amigável, Profissional, Casual, Direto, ou crie instruções personalizadas
- Comprimento da Resposta — Curto (respostas rápidas e concisas), Médio (respostas equilibradas) ou Longo
Saudações e perguntas sugeridas
Este é um daqueles passos que tem um impacto significativo sobre se as pessoas realmente usam o chatbot. Uma saudação como “Olá! Como posso ajudar?” está OK, mas é genérica. Uma saudação como “Oi! Posso ajudar você a encontrar o plano certo, verificar a disponibilidade de recursos ou orientar na configuração — é só perguntar” mostra aos visitantes exatamente o que o chatbot pode fazer.
Para perguntas pré-definidas, crie 2–4 perguntas que reflitam o que seus visitantes costumam perguntar, guiando-os na direção certa desde o início.
Instruções do agente
Abaixo das configurações de perfil, você também encontrará as Regras de Conversa — elas permitem definir comportamentos específicos, como “Não discutir preços de concorrentes” ou “Sempre sugerir agendar uma consulta para perguntas complexas”. Pense nelas como limites de conduta: a IA baseia-se em seus dados de treinamento para fatos, mas as regras definem como ela lida com casos limites.
Passo 3: Crie e organize sua base de conhecimento
Agora vem o passo mais importante: a aba Conhecimento é onde o seu chatbot aprende o que dizer. Um chatbot é tão bom quanto o conteúdo com o qual é treinado.
Você tem cinco formas de alimentar isso com informações:
- Web Pages — cole URLs do seu site (até 200 páginas)
- Arquivos — faça upload de documentos nos formatos PDF, TXT, JSON, DOCX, PPTX, HTML ou MD
- Perguntas e Respostas — adicione pares de perguntas e respostas predefinidos para as perguntas dos visitantes mais comuns
- Blocos de Texto — blocos de conteúdo de texto livre para detalhes da empresa, políticas e descrições de produtos
- Informações da Empresa — nome da sua empresa, setor e uma visão geral rápida
Para a maioria dos sites de pequenas empresas, comece pela página inicial, páginas-chave de serviços/produtos, a página de FAQ e a página de contato. Isso cobre 80% do que os visitantes costumam perguntar. Você pode adicionar mais conteúdo depois — a base de conhecimento não fica travada após a configuração inicial.
Etapa 4: Configurar habilidades de chatbot em HTML
A aba Skills permite ao seu chatbot fazer mais do que apenas responder perguntas. Quatro habilidades estão disponíveis no momento para aprimorar a experiência dos visitantes do seu site.
A seguir, uma visão geral do que cada habilidade permite:
| Funcionalidade do Chatbot | O que ele faz |
|---|---|
| Botões de Ação | Permita que os visitantes realizem ações rápidas diretamente no chat: abra o WhatsApp, envie um e-mail, obtenha direções ou visite uma URL. Você define condições de gatilho em linguagem natural. |
| Coletar Contatos | Um formulário embutido que solicita nome, e-mail e telefone. Você decide quando o formulário aparece e quais campos incluir. Pode ser obrigatório para continuar o chat. |
| Mensagem de Acompanhamento | Uma mensagem automática é enviada após um período de inatividade do visitante. Útil para reengajar visitantes ou oferecer uma opção de contato |
| Fale com um humano | Redireciona visitantes para uma pessoa real por e-mail, telefone ou WhatsApp quando o chatbot não consegue responder ou o visitante solicita assistência humana. |
A funcionalidade Contato Humano vale a pena configurar mesmo que você não espere tráfego intenso. Ela é acionada automaticamente quando o chatbot não consegue responder a uma pergunta ou o usuário solicita ajuda humana. Além disso, observe que isso redireciona os visitantes para canais externos — não traz um humano para a mesma sessão de chat.
Passo 5: Personalize o tema e a aparência
A aba Tema controla como o chatbot aparece no seu site. Seis temas adaptáveis estão disponíveis — cada um criado em torno de uma única cor de destaque que você pode definir.
Clique em “Personalizar Tema” para ir mais a fundo:
- Escolha a cor e o tamanho do Botão de Lançamento
- Selecione as cores do Cabeçalho e do Rodapé
- Defina o plano de fundo do Chat e o raio das bordas
- Escolha as cores de elementos individuais (botões, mensagens, etc.)
- Selecione uma Fonte da biblioteca
Defina uma cor sólida ou gradiente para o fundo do cabeçalho, adicione um padrão ao fundo do chat ou carregue uma imagem como plano de fundo.
Etapa 6: Configurar as configurações de exibição e comportamento
A guia Configurações gerencia posicionamento, visibilidade, gatilhos e notificações — essencialmente, onde o chatbot aparece, quando aparece e como ele se apresenta.
Posicionamento e layout
Nesta seção, você pode ajustar como o seu chatbot aparece na página:
- Chat Flutuante (bolha no canto) ou Chat Incorporado (em linha com o seu conteúdo)
- <strong>Posição</strong>: esquerda ou direita com controle de deslocamento vertical e horizontal.
- Ícone de Bolha da biblioteca ou carregue o seu próprio
- Exibir: abre manualmente ou automaticamente ao carregar a página/após atraso
Visibilidade do Chat
Aqui, você decide onde exibir ou ocultar seu widget, de acordo com sua estratégia:
- Todas as páginas do site
- Apenas na página inicial
- Páginas específicas que você escolher
- Móvel, desktop ou todos os dispositivos.
Alertas sonoros
Notificações sonoras podem ser configuradas para tocar após interações: quando o usuário abre a janela de chat, envia uma mensagem ou quando o chatbot responde.
Outras configurações
- Google Analytics integração permite acompanhar como os visitantes interagem com o seu chatbot
- Notificações por Email permitem que transcrições completas do chat sejam enviadas automaticamente para a sua caixa de entrada
- Idioma e Região determinam o idioma principal do chatbot e o fuso horário
- Texto do Rodapé pode ser usado para avisos sobre o uso de IA, políticas ou links de contato
- CSS Personalizado e JS podem ser usados para estilos avançados
Passo 7: Integre o Chatbot de IA no seu site HTML
Por fim, clique em “Adicionar ao Website” no editor para gerar o código de instalação — duas linhas: uma tag <script> que carrega a plataforma Elfsight e uma tag <div> que indica onde renderizar o widget.
Abra o arquivo HTML da página onde você quer que o chatbot apareça. Para um chatbot flutuante, cole o código em qualquer lugar dentro da seção <body> — apenas antes da tag de fechamento </body> é uma escolha comum. Alternativamente, para um chatbot incorporado, cole-o na posição exata da página onde você quer que ele apareça.
Checklist rápido de solução de problemas
- <strong>Chatbot não aparece:</strong> Verifique se o código está dentro da tag <body>, e não dentro das tags <head>, <style> ou <script>.
- Chatbot aparece no editor, mas não no site: Alguns widgets exigem conexão com a internet ativa para carregar. Testes locais via protocolo file:// podem não funcionar — use um servidor local ou a versão hospedada ao vivo.
- Quebra de layout após adicionar o código: Verifique se o código de instalação não foi colado dentro de outro elemento HTML que restrinja o conteúdo. Ele deve ficar como um bloco independente dentro de <body>.
- O Chatbot responde com informações incorretas ou vazias: Verifique a aba Conhecimento. Se você adicionou apenas uma ou duas URLs, o chatbot tem pouco conteúdo para trabalhar. Adicione mais páginas, arquivos ou blocos de texto e clique em “Re-treinar.”
Alternativas de Widget: Como Criar um Chatbot HTML Personalizado
O widget da Elfsight cuida de tudo por meio de um editor visual, mas há motivos válidos para seguir por outra rota — especialmente se você precisar de controle total sobre a lógica do chatbot ou quiser conectá-lo ao seu próprio backend de IA. Veja o que cada abordagem envolve:
Opção 1: Crie um chatbot com JavaScript e API
Se você tem recursos de desenvolvimento, pode criar uma interface de chatbot do zero usando HTML, CSS e JavaScript, e depois conectá-la à API de um provedor de IA (como OpenAI, Anthropic ou Google) para a lógica de conversa. O processo, em visão geral:
- Crie a interface de chat (um container div, lista de mensagens, campo de entrada e botão de envio) usando HTML e CSS.
- Crie um script JavaScript que capture a entrada do usuário, envie-a para um endpoint de IA via fetch() e exiba a resposta.
- Gerencie o histórico de conversas enviando o array completo de mensagens em cada requisição da API.
- Implante no seu servidor web ao lado dos seus arquivos HTML existentes.
Opção 2: Use um framework de código aberto
Estruturas como Botpress, Rasa ou Chatwoot oferecem motores de conversa prontos para hospedar localmente e incorporar ao seu site. São ideais para equipes que precisam de fluxos de trabalho personalizados, integrações ou controles de privacidade de dados.
- Instale e configure o framework no seu próprio servidor ou em uma instância na nuvem.
- Crie fluxos de conversa usando o construtor visual do framework ou arquivos de configuração.
- Gere o código de incorporação ou o trecho de código JavaScript fornecido pelo framework.
- Cole o código de incorporação no seu arquivo HTML e publique.
Opção 3: Adicione um chatbot baseado em regras com uma biblioteca JS
Para sites que precisam apenas de um chatbot simples em árvore de decisões (sem IA), bibliotecas JavaScript leves podem gerenciar conversas básicas de ramificação inteiramente no navegador.
- Escolha uma biblioteca (por exemplo, BotUI, simple-chatbot) e a inclua no seu HTML via um link CDN.
- Defina o fluxo de conversa como uma estrutura JSON com perguntas, opções e respostas.
- Inicialize o chatbot em um bloco de script e monte-o em um div contêiner.
Dicas de otimização para o seu Chatbot em HTML
Configuração concluída — veja o que diferencia um chatbot que os visitantes realmente utilizam de um que é fechado após apenas três segundos.
- Escreva perguntas sugeridas com base no comportamento real dos visitantes. Busque as 3–4 perguntas principais a partir da sua caixa de suporte, envios do formulário de contato ou logs de busca no site.
- Use o recurso Perguntas e Respostas para as suas questões de maior impacto. Se houver uma pergunta cuja resposta precisa ser absolutamente precisa (preços, política de reembolso, conformidade legal), adicione-a como um par Perguntas e Respostas na base de conhecimento.
- Configure a habilidade Contact Human com expectativas realistas. O chatbot redireciona visitantes para canais externos, portanto, certifique-se de que os dados de contato que você configurar sejam monitorados ativamente para que os visitantes não encontrem um beco sem saída.
- Treine com arquivos JSON para dados estruturados. Se você tem catálogos de produtos, tabelas de preços ou comparações de recursos, formate-os como JSON antes de enviar. O modelo de IA interpreta JSON com mais precisão do que texto não estruturado.
- Controles de visibilidade para comportamento específico por página. Não exiba um chatbot com foco em vendas nas páginas da documentação de suporte e não exiba um bot de solução de problemas na sua página inicial.
Perguntas Frequentes
Por que meu chatbot não aparece ao abrir o arquivo HTML no navegador?
Como exibir o chatbot em todas as páginas do seu site HTML?
O Chatbot de IA atualiza automaticamente quando você altera seu conteúdo?
Posso usar o chatbot em um site HTML estático?
Por que meu chatbot responde errado?
Conclusão
Existem várias formas de adicionar um chatbot a um site HTML personalizado: desde construir um do zero com JavaScript e uma API até incorporar um widget sem código. Com um HTML chatbot widget, todo o processo funciona através de um editor visual e de um único código de incorporação – sem backend, sem dependências de framework, sem manutenção de código contínua.
Se você ainda não começou, abra o editor de IA Chatbot e adicione suas primeiras páginas ao Knowledge Base. Assim que estiver ativo, o passo seguinte mais impactante é refinar o que o chatbot sabe e como ele se comunica — adicione mais URLs à base de conhecimento, depois ajuste suas regras e instruções de conversa, e modele a personalidade do chatbot para combinar com a voz da sua marca.
