Como adicionar um chatbot com IA ao seu site (qualquer plataforma, passo a passo)

Adicionar um chatbot com IA a um site tem duas partes: criar o assistente e colocá-lo no site. Com a Nexoply, a primeira parte é feita no painel da Nexoply, sem programar e sem chave de IA, porque a Nexoply cuida da IA. A segunda parte é uma linha de código. Você precisa de:

• Uma conta na Nexoply. Cadastre-se grátis: o plano Free inclui 50 conversas por mês, sem cartão. Os planos pagos começam em US$ 19 por mês na página de preços.
• Acesso ao lugar onde o seu site aceita código personalizado: uma opção de código do footer no seu criador de sites, os arquivos do seu tema ou os seus templates HTML. Em criadores de sites hospedados, confira se o seu plano permite código personalizado.
• Uns cinco minutos, mais o tempo para revisar as informações do seu negócio.

Um chatbot com IA para o site de um pequeno negócio é tão útil quanto o que ele sabe. Na Nexoply você informa seus serviços e preços, perguntas frequentes, políticas, horários e áreas de atendimento. O jeito mais rápido é a importação do site: você digita o endereço do seu site e a Nexoply lê as páginas públicas (Free 15, Starter 40, Business 100, Pro 200 por varredura), inclusive as feitas com JavaScript, e sugere serviços com preços, perguntas frequentes, políticas, horários e dados de contato. Você revisa as sugestões; nada é adicionado sem a sua aprovação.

Daí em diante, o assistente responde só com essas informações. Ele é instruído a dizer quando não sabe, em vez de chutar, e todas as conversas ficam no seu painel para revisão. Os visitantes podem escrever em qualquer um de 12 idiomas e recebem a resposta no idioma deles. A Nexoply não é uma caixa de entrada de chat ao vivo para atendentes humanos e não faz agendamentos nem recebe pagamentos; os botões podem levar o visitante à sua página de agendamento, ao seu telefone ou ao seu WhatsApp. Leia como a Nexoply funciona para ter a visão completa.

Abra a página Chatbot no seu painel (clique em Criar chatbot se ainda não criou) e copie o código de instalação. Ele é assim:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

No lugar de YOUR-KEY vai a chave do seu chatbot, que a página Chatbot já preenche para você. A chave é pública: não é uma senha e não dá acesso à sua conta; ela só diz ao widget a qual negócio ele pertence. Para ver o assistente antes de mudar o seu site, use Abrir uma página de teste com o seu chatbot.

Em um site que você edita como arquivos HTML, cole o código em uma linha própria, logo acima da tag de fechamento </body>:

    <!-- …o conteúdo da sua página… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Encontre o footer compartilhado

   Se as suas páginas compartilham um template ou include de footer (comum em sites PHP e geradores de sites estáticos), cole o código lá uma única vez. Se não, cole em cada página onde o botão de chat deve aparecer.

2. 2

   Uma vez por página

   Uma cópia por página basta. O script carrega de forma assíncrona, então colocá-lo no fim da página deixa o seu conteúdo aparecer primeiro.

3. 3

   Envie ou publique

   Salve os arquivos e envie ou publique do jeito que você costuma atualizar o site.

Cada criador de sites e cada framework tem um lugar para o código do site inteiro. Cole a mesma linha lá; os guias de cada plataforma explicam passo a passo.

• Não precisa de pacote npm. O widget é sempre a mesma tag script. Também funciona quando a tag é adicionada por código, desde que mantenha o atributo data-chatbot e um src que contenha widget.js.
• Apps de página única. Ele é montado uma vez na página, fora do elemento raiz do seu app, mantém a conversa enquanto o visitante navega e confere de novo as regras de página quando a URL muda. Carregá-lo duas vezes não causa problema.
• Renderização no servidor. Ele só roda no navegador e não mexe no markup do seu framework, então não há problemas de hidratação.
• Content-Security-Policy. Se o seu site envia uma, permita https://nexoply.com em script-src, connect-src e img-src.
• Testes locais. Se você preencher Permitir apenas nestes sites, adicione o seu host de desenvolvimento local com a porta (por exemplo localhost:3000), ou deixe a lista vazia enquanto testa.

Abra o seu site publicado em uma nova janela anônima. Um botão de chat aparece no canto inferior. Faça uma pergunta real, como "Vocês atendem emergências no fim de semana?" ou "Quais regiões vocês atendem?" (veja mais exemplos no guia de chatbot com IA para encanadores). Em segundos, a conversa aparece em Conversas no seu painel da Nexoply. Daí em diante, as alterações feitas no painel chegam ao site em cerca de um minuto, sem editar o código de novo.

• O código ainda não está no ar. Confira se a alteração foi salva e publicada, e recarregue o site publicado em uma janela anônima. As pré-visualizações dos editores nem sempre executam código personalizado.
• Código alterado ou incompleto. Confira se a linha está completa, de <script até </script>, com data-chatbot e a sua chave sem alterações.
• Código personalizado não permitido. Em criadores de sites hospedados, o código personalizado pode depender do plano (por exemplo, o Wix exige plano Premium com domínio conectado, e o Squarespace o plano Business ou superior).
• Domínios permitidos. Se você configurou Permitir apenas nestes sites na página Chatbot, confira se cada endereço do seu site está escrito exatamente (por exemplo meunegocio.com.br, ou *.meunegocio.com.br para subdomínios).
• Content-Security-Policy. Uma política rígida bloqueia o script até você permitir https://nexoply.com em script-src, connect-src e img-src.
• Chatbot desligado ou bloqueadores de anúncios. Verifique se a chave Chatbot ativado está ligada. Raramente, uma extensão do navegador bloqueia widgets de chat; teste em outro navegador.

O visual é definido no painel da Nexoply, nunca no código do seu site. Em Chatbot → Personalizar você escolhe o ícone do botão de mensagem (ou uma imagem ou SVG seu), um texto, o formato, o tamanho, as cores, a borda, a sombra e a posição, ou usa no lugar uma aba lateral na borda da tela (como "Ajuda"). Dá para definir um visual diferente no celular e usar regras de página para mudar ou esconder o botão em páginas específicas (por exemplo /servicos/*). Combine a janela de chat com as suas fontes e cores, adicione seu logo ou comece por um modelo pronto. Uma tela inicial pode mostrar seus próprios botões, como Agendar, Ligar ou WhatsApp. O widget usa um Shadow DOM, então o CSS do seu site não o afeta.

Depois, revise as conversas com frequência: as perguntas que o assistente não conseguiu responder aparecem em uma lista e viram perguntas frequentes com um clique, e as estatísticas mostram os assuntos, os horários de mais movimento e as páginas onde o chat foi aberto. Para ver todas as opções, confira os recursos do chatbot; para comparar ferramentas antes, leia os melhores chatbots com IA para pequenos negócios.