Coloque um chatbot com IA no seu site em menos de 1 hora

Todo site tem dúvidas que se repetem. Horário de atendimento, preço, como funciona, qual plano escolher. Dúvidas que você responde no WhatsApp, no e-mail, às vezes às 23h de um domingo.

Um chatbot com IA resolve isso. Não o chatbot de botão com respostas fixas — aquele que frustra todo mundo. Um que realmente entende a pergunta, busca a resposta na base de conhecimento do seu negócio e responde como um atendente humano bem treinado.

E você vai colocar isso no ar hoje.

---

O que vamos construir

Um widget de chat que:

• Aparece no canto inferior direito do seu site (o padrão que todos conhecem)

• Responde perguntas com base no conteúdo que você fornecer

• Salva o histórico da conversa durante a sessão

• Captura o e-mail do visitante quando ele quiser continuar a conversa

• Funciona em qualquer site — basta colar um script

Stack: Lovable para construir o widget, Supabase para salvar conversas, OpenAI como cérebro.

---

Passo 1 — Crie o projeto no Lovable

Abra o Lovable e use este prompt:

Crie um widget de chat com IA para site.

O widget deve:
- Aparecer como um botão flutuante no canto inferior direito
- Ao clicar, abre uma janela de chat (300x450px)
- Ter um header com nome "Assistente lowcode.ai" e botão de fechar
- Campo de input no rodapé com botão enviar
- Bolhas de mensagem diferenciando usuário (direita, azul) 
  e assistente (esquerda, cinza escuro)
- Indicador de digitação animado enquanto aguarda resposta da IA
- Ao final de cada conversa, oferecer campo para capturar e-mail

Conecte ao Supabase para salvar as conversas.
Use a API da OpenAI para as respostas.
O widget deve ser exportável como componente React embeddable.
Design: fundo escuro #0A0A0A, azul #2563EB como cor de destaque.

---

Passo 2 — Escreva a base de conhecimento

Antes de conectar a OpenAI, escreva um documento simples com tudo que o chatbot precisa saber. Guarde como texto — vai entrar no system prompt.

Estruture assim:

SOBRE O NEGÓCIO:
[Descreva o que você faz em 3-5 linhas]

PRODUTOS E SERVIÇOS:
[Liste o que você oferece com preços se tiver]

PERGUNTAS FREQUENTES:
P: [pergunta comum]
R: [resposta completa]
(repita para cada dúvida recorrente)

COMPORTAMENTO DO ASSISTENTE:
- Responda sempre em português
- Seja direto e cordial
- Se não souber a resposta, diga que vai verificar e 
  peça o e-mail para retornar
- Nunca invente preços ou prazos que não estão aqui
- No final de respostas longas, pergunte se ficou claro

Quanto mais completa essa base, menos vezes o bot vai errar.

---

Passo 3 — Configure o system prompt no Lovable

Volte ao Lovable e instrua:

Configure o system prompt da OpenAI com o seguinte conteúdo:

"Você é o assistente virtual do [seu negócio]. 
Responda apenas com base nas informações abaixo.
Se a pergunta não estiver coberta, diga que vai verificar 
e solicite o e-mail do visitante para retornar.

[COLE AQUI SUA BASE DE CONHECIMENTO]

Mantenha respostas com no máximo 3 parágrafos curtos.
Tom: profissional e acolhedor. Nunca robótico."

Use o modelo gpt-4o-mini para reduzir custo.
Limite o histórico enviado a API às últimas 6 mensagens.

O limite de histórico é importante — evita que o custo por conversa exploda em sessões longas.

---

Passo 4 — Salve as conversas no Supabase

Peça ao Lovable para criar a tabela e a lógica de salvamento:

Crie uma tabela no Supabase chamada "conversas_chat" com:
- id (uuid)
- session_id (texto — gerado aleatoriamente por visita)
- mensagens (jsonb — array com role e content)
- email_capturado (texto, nullable)
- criado_em (timestamp)
- atualizado_em (timestamp)

Salve a conversa atualizada após cada mensagem do usuário.
Atualize o campo email_capturado quando o visitante informar.

Isso te dá um histórico de todas as conversas — útil para entender o que as pessoas mais perguntam e melhorar a base de conhecimento.

---

Passo 5 — Exporte e instale no seu site

No Lovable, peça para gerar o código de embed:

Gere um script de instalação do widget que possa ser colado 
em qualquer site HTML como uma única tag <script>.
O script deve carregar o widget de forma assíncrona, 
sem bloquear o carregamento da página.

O código gerado vai ser algo como:

html

<script 
  src="https://seu-widget.vercel.app/widget.js" 
  data-site-id="seu-id"
  async>
</script>

Cole antes do </body> do seu site. Pronto — o chatbot aparece em qualquer página.

---

Quanto custa manter

Para um site com 500 visitas por mês e média de 5 mensagens por conversa:

• OpenAI (gpt-4o-mini): menos de R$ 3,00/mês

• Supabase: gratuito até 500MB de banco

• Vercel (deploy do widget): gratuito

• Total: menos de R$ 3,00/mês

Para comparar: soluções prontas como Intercom ou Drift começam em US$ 39/mês. Você está construindo algo equivalente por menos de R$ 5.

---

Evoluções possíveis

Notificação quando e-mail é capturado: adicione um webhook no Supabase que te avisa no Telegram toda vez que alguém deixar o e-mail.

Transferência para humano: se o usuário digitar "falar com atendente", o bot coleta nome e e-mail e você recebe a notificação para assumir.

Análise de dúvidas mais frequentes: uma consulta simples no Supabase nas conversas salvas revela o que as pessoas mais perguntam — e onde sua página de vendas está falhando em explicar.

---

Conclusão

Um chatbot bem configurado não substitui o atendimento humano — ele filtra o que não precisa de você. As dúvidas repetitivas ficam com a IA. As que precisam de atenção chegam até você qualificadas.

Uma hora de configuração hoje pode economizar horas de atendimento todo mês. Começa simples, melhora a base de conhecimento conforme as conversas chegam, e vai ajustando o tom até ficar com a sua cara.