How to Add a Chatbot to Your Framer Site (5-Minute Walkthrough)

Before you paste anything into Framer, have three things ready:

• A published Framer site. You can embed scripts on a draft project, but the widget will only run on the live (published) URL. If you have not hit Publish yet, do that first.
• A Chatloom account. Free tier is fine. Sign up at chatloom.app, verify your email, and you will land in an empty dashboard with a "Create your first agent" prompt.
• A short piece of text to train on. Even 200 words about your product is enough to get a real answer out of the bot on the first test message. Pull it from your hero section and your About page.

That is the entire prerequisite list. You do not need a Framer Pro plan, a custom domain, a Zapier seat, or a developer on call.

In the Chatloom dashboard, click Create new agent. Give it a name (your company name is fine), pick a language (Chatloom supports 95+ languages with native answers in ten of them), and pick a personality preset: Support, Sales, or Custom.

For a Framer marketing site, Sales is almost always the right default. It is tuned to qualify leads, push toward demo bookings, and answer pricing questions confidently instead of deflecting to a contact form.

Once the agent is created, you land on the builder. Do not touch anything else yet — we will configure the brand after the widget is live. For now just grab the embed snippet: Install → Custom embed. Copy both script tags to your clipboard.

In Framer, open your project and click the gear icon (Site Settings) in the top bar. Scroll to General → Custom Code. You will see three text areas:

• Start of head — for verification tags, preload links, analytics snippets that need to run early.
• End of body — for scripts that should run after the page renders. This is where Chatloom goes.
• End of head — for CSS overrides and meta tags.

Paste the two script tags from Step 1 into the End of body field. Save. Then hit Publish (top right). The widget will be live on your published URL within ten seconds of the publish completing.

Open your published site in an incognito window. You should see the Chatloom launcher in the bottom-right corner. Click it; the chat panel opens. Type a question. Congratulations — your Framer site now has an AI chatbot.

The widget exists but it still does not know anything about your product. This is the step most guides skip.

Go back to Chatloom and open Knowledge base → Add source. You have four options:

• Crawl website — paste your Framer domain. The crawler walks the sitemap and pulls rendered text from each page. This is the right choice for most Framer sites and takes under two minutes.
• Upload files — drop in your pitch deck PDF, one-pager, or pricing sheet.
• Paste text — for quick FAQs, pricing details, or "what happens if…" answers that do not live on your site yet.
• Sitemap URL — use this if your Framer site has password protection or non-indexed pages you still want the bot to know about.

For a typical Framer marketing site, Crawl website + paste text is the winning combination. The crawl covers everything that is on the site already; the paste field is for the nuanced answers that never made it into copy.

Trigger the training. On the free tier this takes about 60 seconds. The dashboard shows a "Ready" status when the knowledge base is queryable.

This is the step that separates a chatbot that looks like a 2019 support bubble from one that feels native to your Framer design. In the builder, open the Widget section.

Start with Launcher mode. Button is the safe default (floating circle bottom-right), but Fullscreen is worth trying for landing pages — the entire viewport dims and the chat takes center stage, which is a much stronger conversion pattern for hero CTAs.

Next, Brand colors. Chatloom exposes primary, accent, and surface. Match these to your Framer palette. There is a live preview on the right side that updates instantly.

Typography. Upload the .woff2 of the Framer font you are using (or pick from the Google Fonts picker). The chat surface, suggestion chips, and headers will all re-render with the new font. On a retina display you cannot tell the difference between the widget and a native Framer component.

Corner radius. Framer defaults to 12px for most components. Matching that makes the widget disappear into the design.

Logo and avatar. Upload a transparent PNG. The launcher button respects the PNG; the AI avatar appears next to every bot message.

Save. Re-open your Framer site in incognito. The widget is now indistinguishable from a native part of the design.

Two final touches before you call this done.

Scope the widget. By default Chatloom shows on every page of your Framer site. If you want it off the pricing page (common for enterprise deals where you want the sales team visible instead), use the widget's Visibility rules: exclude URLs matching /pricing, /contact, or any pattern you want.

Set greetings. In the builder Messages section, write a short welcome line ("Hey — I can answer questions about Framer integration, pricing, or getting started. What are you working on?") and 3–5 suggested prompts. Suggested prompts are the single highest-leverage conversion lever in the entire widget; people click them more often than they type.

Test. Open the site in incognito, go through a full conversation from different entry pages, and specifically ask questions you know are not in your docs yet. Watch how the bot handles "I don't know" — if it hallucinates, add the missing answer to the knowledge base and re-test. Five minutes of this upfront prevents a week of bad conversations.

That is the complete workflow. Most Framer founders finish this entire sequence in under 15 minutes and never touch the embed script again.