Chatbot IA para sites Framer: o guia de setup para 2026

Framer virou o default de fundadores que querem um site de marketing que realmente vai ao ar. Tipografia limpa, coleções CMS organizadas, animações suaves — tudo sem uma linha de React. Mas no instante em que chega o primeiro visitante com uma pergunta, o Framer para de ajudar: não tem live chat embutido, não tem widget de FAQ, e os poucos plugins da comunidade são formulários de e-mail simples ou estão trancados atrás de preços enterprise.

O buraco custa caro. A maioria das decisões de compra B2B acontece antes de alguém falar com vendas, e boa parte dessa pesquisa é feita em horários em que ninguém está olhando a caixa de entrada. Uma página FAQ estática é um cemitério de deals: as pessoas passam o olho, não encontram nada específico para a situação delas e fecham a aba.

Um chatbot IA de verdade fecha esse buraco. Não a árvore de decisão de 2018, mas um assistente com LLM que lê sua documentação, seus preços, seus estudos de caso e responde com fontes. Especificamente para Framer, o chatbot certo tem três traços:

1. Zero dependência em build time — nada para instalar no projeto Framer, nenhum componente code custom, nenhum re-export do Next.js. Ele entra como um único script de embed.
2. Funciona com o conteúdo do CMS Framer — ele consegue crawlear seu site publicado e ficar sincronizado à medida que você sobe páginas novas.
3. Combina com seu sistema visual — designers Framer são obcecados por marca; um chatbot com cara de bolha de suporte de 2019 é desinstalado na hora.

Chatloom foi construído exatamente para atender essas três restrições, e é por isso que o nome aparece tanto nos Slacks de fundadores Framer em 2026.

O caminho mais rápido é o embed por código custom, disponível em qualquer plano Framer, incluindo o Hobby gratuito. O fluxo completo tem quatro passos e leva menos de três minutos se você já tem uma conta Chatloom:

Criar agent → Crawlear site Framer → Copiar embed → Colar no Custom Code do Framer → Publicar

1. Crie seu agent. Cadastre-se em chatloom.app, dê um nome ao agent e escolha um modelo (GPT-4.1 Mini é o default e resolve 95% das perguntas de um site de marketing por centavos por mês).
2. Aponte-o para seu site Framer. O crawler embutido do Chatloom pega sua URL publicada (seudominio.framer.website ou seu domínio personalizado) e indexa cada página acessível. Para um site típico de 12 páginas isso leva cerca de 90 segundos. O crawler respeita robots.txt e rate limits, então não dispara a proteção anti-bot do próprio Framer.
3. Pegue o snippet de embed. No dashboard do agent, abra Install → Custom embed e copie o script de três linhas:

<script>
  window.CHATLOOM_AGENT_ID = "agt_xxxxxxxxxxxxxxxx";
</script>
<script async src="https://chatloom.app/widget.js"></script>

1. Cole no Framer. Abra seu projeto Framer, vá em Site Settings → General → Custom Code e cole o snippet no campo End of body. Salve, publique. O widget aparece globalmente em todas as páginas — incluindo as que você vai adicionar depois.

Esse é todo o trabalho de desenvolvimento. Sem npm, sem rota de API, sem plugin Framer para autorizar. O widget é self-hosted no CDN do Chatloom e se atualiza sozinho, então você nunca mais toca nesse código.

Designers Framer se importam com uma coisa acima de tudo: o chatbot não pode parecer colado por cima. O widget builder do Chatloom foi desenhado para exatamente essa restrição. Toda propriedade visual que importa é um controle, não um nome de classe CSS.

Na seção Widget do builder você configura:

• Launcher mode — botão, compact panel, overlay em tela cheia ou sidebar. Fullscreen funciona lindamente em landings Framer porque respeita o viewport do hero e escurece o fundo.
• Cores da marca — primária, destaque e superfície. A superfície inteira do chat (header, balões, sugestões, indicador de digitação) troca de tema em tempo real.
• Raio dos cantos — combine com o padrão de 12 px do Framer, mais seco para sites editoriais ou completamente arredondado para marcas descoladas.
• Fontes custom — suba um .woff2 ou escolha do Google Fonts. Em site de marketing a batalha é sobre tipografia, e essa é a feature mais pedida pela comunidade Framer.
• Ícone e avatar — suba sua marca em PNG transparente. O botão launcher respeita o alpha e fica nítido em retina.
• Fundo do chat — gradiente, cor sólida ou imagem. Combine com o hero do Framer e o widget parece parte da página, não um inserido de terceiros.

Cada seção do builder tem um botão Test Live que abre o widget real em um viewport simulado. Nada entra em produção antes de passar pelo teste visual.

Um chatbot com base de conhecimento vazia é pior que nenhum chatbot — ele inventa respostas e espanta visitantes. Sites Framer são incomumente fáceis de treinar porque o conteúdo já é estruturado: seções hero têm títulos claros, itens de CMS têm campos consistentes, tabelas de preços vivem nos componentes nativos do Framer.

Chatloom oferece quatro caminhos de ingestão e todos funcionam em um projeto Framer:

1. Crawl — cole seu domínio Framer uma vez, e Chatloom percorre o sitemap, extrai o conteúdo principal, limpa a UI do Framer (navbar, cookie banner, footer) e faz chunk do resto para o RAG. Sozinho cobre 80% das perguntas de marketing.
2. Upload de sitemap — se seu site está protegido por senha ou você quer um subset, suba uma sitemap.xml e escolha as URLs.
3. Upload de PDF e doc — jogue o pitch deck, o one-pager, o PDF de preços ou o doc de onboarding. Chatloom faz parsing com o mesmo pipeline de embedding do crawl.
4. Texto manual — para as respostas mais sutis que ainda não estão no site («o que acontece se eu cancelar no meio do trial?»), digite direto na base de conhecimento. Elas viram chunks de primeira classe e superam o crawl quando o visitante faz exatamente aquela pergunta.

O motor de busca híbrida por baixo (vetores densos + BM25 + RRF + reranker Cohere) faz você não precisar pensar em overlap de palavras-chave. «Como faço downgrade?» acha a resposta certa mesmo que sua documentação diga «trocar de plano».

IA não é o produto todo em um site Framer. No momento em que o bot esbarra em um comprador sério, ele precisa sair do caminho. Chatloom traz três caminhos de escalonamento embutidos:

Handover humano. Qualquer conversa pode ser assumida por um operador humano na inbox do Chatloom. O operador vê o transcript completo, o caminho de página do visitante (então sabe qual seção do site Framer disparou o chat) e os scores de confiança que a IA emitia. Fundadores Framer normalmente cuidam disso pessoalmente no primeiro mês e depois delegam a um freelancer ou SDR contratado.

Captura de leads. O bot pode coletar nome, e-mail e uma ou duas perguntas de qualificação em conversa natural, e empurrar o lead para seu CRM via webhook, Zapier ou integração direta com HubSpot/Pipedrive. Sem formulário.

Agendamento de reunião. Coloque um link Cal.com ou Calendly no system prompt e o bot distribui URLs de reserva quando o comprador diz coisas como «posso ver uma demo?» ou «como eu começo?». Para vendas de alto intent isso converte muito melhor que um botão estático «Agendar demo» na nav.

Os três caminhos compartilham o mesmo registro de conversa. Se a IA respondeu às três primeiras mensagens e o humano assumiu a quarta, o CRM recebe o histórico completo — nada de «você pode repetir o que falou para o bot?».

Essa é a parte em que fundadores Framer normalmente se preparam para a cotação da Intercom. A economia é completamente diferente agora.

Chatloom Free (US$ 0/mês) cobre 100 mensagens IA por mês, crawls ilimitados de páginas, customização de marca e o script de embed. Para uma landing Framer com waitlist isso é realmente o bastante.

Chatloom Starter (US$ 29/mês) libera 2.000 mensagens, handover para chat ao vivo, analytics, webhooks para CRM e remove o badge «Powered by Chatloom». É o tier em que a maioria dos fundadores se acomoda quando começa a ter tráfego real.

Chatloom Pro (US$ 99/mês) adiciona routing customizado de modelos, suporte prioritário, tetos maiores de mensagens e acesso multi-seat — útil quando um SDR contratado ou uma pessoa de suporte part-time compartilha a caixa.

Compare isso com os players estabelecidos:

Para um site de marketing feito em Framer, esses números estabelecidos estão completamente desproporcionais ao tráfego. A matemática do ponto de equilíbrio também é mais amigável do que o pessoal espera: no preço Starter, o chatbot paga a si mesmo se desviar dois e-mails por mês que iriam para uma VA freelance de US$ 75/hora. Na prática a razão fica mais perto de 40 para 1.