Como adicionar um chatbot com IA ao Webflow (em 5 minutos)

A Nexoply é um assistente com IA que você cria no painel dela e adiciona a um site Webflow com uma tag script. O Webflow só guarda essa linha; o conhecimento, o visual e o comportamento do assistente são gerenciados na Nexoply, sem programar e sem chave de IA, porque a Nexoply cuida da IA. Na prática:

• Ele conhece o negócio. Adicione serviços e preços, perguntas frequentes, políticas, horários e áreas de atendimento, ou importe tudo das páginas públicas do site Webflow (15 por varredura no plano Free). Nada é adicionado sem a sua aprovação.
• Ele responde só com essas informações. É instruído a dizer quando não sabe, em vez de chutar, e todas as conversas ficam no painel para revisão.
• Ele se encaixa no design. Botão de mensagem ou aba lateral, cores, fontes e logo, modelos prontos, um visual próprio no celular, regras para páginas específicas e botões na tela inicial como Agendar, Ligar ou WhatsApp.
• Ele responde em 12 idiomas. Quem escreve em outro idioma disponível recebe a resposta nesse idioma.
• O que ele não é. Não é uma caixa de entrada de chat ao vivo para atendentes humanos e não faz agendamentos nem recebe pagamentos; os botões levam o visitante a uma página de agendamento, a um telefone ou ao WhatsApp.

O plano Free inclui 50 conversas por mês; os planos pagos começam em US$ 19 por mês na página de preços. Cria sites Webflow para clientes? Cada negócio tem a própria conta na Nexoply e um chatbot, então configure com as informações do seu cliente. Para ver todas as opções, confira os recursos do chatbot.

Confira antes estas três coisas:

• Uma conta na Nexoply. Cadastre-se grátis: o plano Free inclui 50 conversas por mês, sem cartão.
• As informações do negócio na Nexoply: serviços e preços, perguntas frequentes, políticas, horários e áreas de atendimento. O jeito mais rápido é digitar o endereço do site Webflow e deixar a Nexoply importar as páginas públicas, inclusive as feitas com JavaScript. Você revisa as sugestões; nada é adicionado sem a sua aprovação.
• Acesso às configurações do projeto no Webflow e um plano que permita código personalizado. Se a seção Custom code não estiver disponível para você, confira o seu plano ou peça a quem administra o site.

No painel da Nexoply, abra a página Chatbot (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. Quer ver o assistente antes de mexer no Webflow? Use Abrir uma página de teste com o seu chatbot para testar em uma página de exemplo.

1. 1

   Abra Project settings

   No Webflow, abra Project settings do projeto.

2. 2

   Vá em Custom code

   Abra a seção Custom code. O código daqui vale para o site inteiro, então roda em todas as páginas do projeto.

3. 3

   Cole em Footer code

   Cole o código da Nexoply em Footer code. Esse código é colocado logo antes do fim de cada página, que é onde o script deve ficar.

4. 4

   Salve

   Salve as alterações em Project settings.

5. 5

   Publique

   Publique o site. O código personalizado só é adicionado ao site publicado, então é este passo que faz o botão de chat aparecer.

Abra o site publicado em uma nova janela anônima, para vê-lo como um visitante. Um botão de chat aparece no canto inferior. Faça uma pergunta real, como "Vocês atendem pacientes novos?" ou "O que devo levar na primeira consulta?" (veja mais exemplos no guia de chatbot com IA para clínicas). 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 publicar de novo no Webflow.

• Não publicado. Salvar o Project settings não basta: publique o site e recarregue.
• Você está olhando o Designer. Confira o site publicado em uma janela anônima, não o Designer.
• Campo errado ou código incompleto. Abra o Custom code de novo e confira se o código está em Footer code, completo e sem alterações, de <script até </script>.
• Plano ou permissões. Se não conseguir salvar código personalizado, confira se o seu plano do Webflow permite ou se o seu papel no projeto deixa editar o Project settings.
• Domínios permitidos. Se você configurou Permitir apenas nestes sites na página Chatbot, inclua cada endereço onde o site é publicado (por exemplo minhaclinica.com.br, ou *.minhaclinica.com.br para subdomínios).
• Content-Security-Policy. Se o site envia uma Content-Security-Policy, permita 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, não no Webflow. Em Chatbot → Personalizar você escolhe o ícone do botão de mensagem (uma imagem sua ou código SVG colado), 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 mudá-lo em páginas específicas (por exemplo /servicos/*). Combine a janela de chat com as fontes e cores do site, adicione um logo ou comece por um modelo pronto. Uma tela inicial pode mostrar seus próprios botões, como Agendar, Ligar ou WhatsApp.

Para abrir o chat a partir de um botão seu no Webflow, um script curto pode chamar window.dispatchEvent(new Event("nexoply:open-chat")); para abri-lo assim que a página carrega, adicione data-open="true" à tag script. 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. Leia como a Nexoply funciona para ter a visão completa, ou veja como adicionar um chatbot com IA a qualquer site para outras plataformas.