Como adicionar um chatbot ao seu site Framer — passo a passo de 5 minutos

Antes de colar qualquer coisa no Framer, tenha três coisas na mão:

• Um site Framer publicado. Você pode embedar scripts em um rascunho, mas o widget só roda na URL publicada. Se ainda não apertou Publish, faça isso primeiro.
• Uma conta Chatloom. O plano gratuito basta. Cadastre-se em chatloom.app, confirme o e-mail e você cai em um dashboard vazio com o prompt «Create your first agent».
• Um texto curto para treinar. Até 200 palavras sobre seu produto são suficientes para ter uma resposta real na primeira mensagem de teste. Puxe do hero e da página Sobre.

Essa é toda a lista de pré-requisitos. Você não precisa de Framer Pro, domínio custom, seat de Zapier ou desenvolvedor de plantão.

No dashboard do Chatloom, clique em Create new agent. Dê um nome (o da sua empresa serve), escolha um idioma (Chatloom tem 95+ idiomas com respostas nativas em dez) e escolha um preset de personalidade: Support, Sales ou Custom.

Para um site de marketing Framer, Sales é quase sempre o default certo. Ele é calibrado para qualificar leads, empurrar reservas de demo e responder perguntas de preço com confiança em vez de encaminhar para um formulário de contato.

Depois que o agent é criado você cai no builder. Não mexa em mais nada ainda — vamos configurar o branding depois que o widget estiver no ar. Por enquanto só pegue o snippet de embed: Install → Custom embed. Copie as duas tags de script para a área de transferência.

No Framer, abra seu projeto e clique no ícone de engrenagem (Site Settings) no topo. Desça até General → Custom Code. Você vê três áreas de texto:

• Start of head — para tags de verificação, preloads, snippets de analytics que precisam rodar cedo.
• End of body — para scripts que devem rodar depois da renderização. É aqui que o Chatloom vai.
• End of head — para overrides de CSS e meta tags.

Cole as duas tags de script do Passo 1 no campo End of body. Salve. Depois clique em Publish no canto superior direito. O widget estará no ar na sua URL publicada em até dez segundos depois que o publish terminar.

Abra seu site publicado em uma janela anônima. Você deve ver o launcher do Chatloom no canto inferior direito. Clique, o painel de chat abre, digite uma pergunta. Parabéns — seu site Framer agora tem um chatbot de IA.

O widget existe mas ainda não sabe nada do seu produto. Esse é o passo que a maioria dos guias pula.

Volte ao Chatloom e abra Knowledge base → Add source. Você tem quatro opções:

• Crawl website — cole seu domínio Framer. O crawler percorre o sitemap e extrai o texto renderizado de cada página. É a escolha certa para a maioria dos sites Framer e leva menos de dois minutos.
• Upload files — jogue o pitch deck PDF, o one-pager ou a lista de preços.
• Paste text — para FAQs rápidas, detalhes de preços ou respostas do tipo «o que acontece se...» que ainda não estão no site.
• Sitemap URL — use se seu site Framer estiver protegido por senha ou tiver páginas não indexadas que o bot ainda assim precisa conhecer.

Para um site de marketing Framer típico, Crawl + Paste text é a combinação vencedora. O crawl cobre tudo que já está no site; o campo de colagem cobre as nuances que nunca chegaram ao copy.

Dispare o treinamento. No tier gratuito isso leva cerca de 60 segundos. O dashboard mostra «Ready» quando a base de conhecimento está pronta para ser consultada.

Esse é o passo que separa um chatbot com cara de bolha de suporte de 2019 de um que parece nativo do design Framer. No builder, abra a seção Widget.

Comece pelo Launcher mode. Button é o default seguro (círculo flutuante no canto inferior direito), mas Fullscreen vale a pena tentar em landings — o viewport inteiro escurece e o chat ganha o centro da cena, um padrão de conversão muito mais forte para CTAs do hero.

Depois, Brand colors. Chatloom expõe primária, destaque e superfície. Combine com sua paleta Framer. Há uma preview ao vivo à direita que atualiza na hora.

Tipografia. Suba o .woff2 da fonte Framer que você usa (ou escolha no picker de Google Fonts). A superfície do chat, os chips de sugestão e os headers re-renderizam com a nova fonte. Em display retina dá para confundir o widget com um componente nativo do Framer.

Raio dos cantos. Framer usa 12 px por padrão na maioria dos componentes. Combinar faz o widget sumir dentro do design.

Logo e avatar. Suba um PNG transparente. O botão launcher respeita o PNG; o avatar da IA aparece ao lado de cada mensagem do bot.

Salve. Abra seu site Framer de novo em anônimo. O widget agora é indistinguível de uma parte nativa do design.

Dois toques finais antes de chamar isso de pronto.

Escopo do widget. Por padrão o Chatloom aparece em todas as páginas do site Framer. Se quiser tirar da página de preços (comum em deals enterprise onde você prefere deixar o time de vendas visível), use as Visibility rules do widget: exclua URLs que combinem com /pricing, /contact ou qualquer padrão que quiser.

Configure as saudações. Na seção Messages do builder, escreva uma linha curta de boas-vindas («Oi — posso responder sobre integração Framer, preços ou como começar. No que você está trabalhando?») e 3–5 prompts sugeridos. Prompts sugeridos são a alavanca de conversão mais forte do widget inteiro; as pessoas clicam neles muito mais do que digitam.

Teste. Abra o site em anônimo, leve uma conversa completa desde páginas de entrada diferentes e pergunte especificamente coisas que você sabe que ainda não estão na documentação. Veja como o bot lida com o «não sei» — se ele alucinar, adicione a resposta que faltava à base de conhecimento e teste de novo. Cinco minutos disso no começo previnem uma semana de conversas ruins.

Esse é o fluxo completo. A maioria dos fundadores Framer termina essa sequência em menos de 15 minutos e nunca mais encosta no script de embed.