How to Add an AI Chatbot to Your Framer Site

Add an AI chatbot to Framer in two minutes. Custom code component, paste the script, publish. Your motion-perfect site just learned how to have a conversation.

Your Framer site has beautiful motion. Now give it a mouth.

Framer sites are a vibe. The scroll animations are smooth. The interactions are buttery. The layout is immaculate. Every hover state is intentional.

And then someone visits your portfolio or landing page and thinks: "This looks incredible. But... do they do custom work? What's the pricing? How long is the turnaround?"

They could fill out your contact form. They could also close the tab and move on with their life. Guess which one happens more often.

An AI chatbot lets visitors ask questions and get answers immediately — using the content you've already written. It's like the conversational equivalent of a well-crafted micro-interaction: small, delightful, and surprisingly useful.

What you'll need

A Framer site (any plan — but custom code requires a paid plan)
A free Factfu account
2 minutes

Step 1: Create your chatbot

Go to factfu.com/signup
Click Create Bot and name it
Add your content:
- Website URL — point it at your Framer site's published URL
- Text/FAQ — paste your services, pricing, FAQ, process description
- Documents — upload case studies, briefs, or rate cards

If you're a freelancer or agency, the content that matters most is: what you do, what it costs, how long it takes, and how to hire you. Feed the bot that, and it'll handle 80% of prospect questions.

Step 2: Get your embed code

In the Factfu dashboard, go to Settings → Widget and copy the code:

<script
  src="https://factfu.com/v0/widget.loader.js"
  data-widget-key="pk_your_key_here"
  defer>
</script>

Step 3: Add it to Framer

Framer supports custom code in two ways:

Option A: Site-wide custom code (recommended)

In your Framer project, go to Site Settings (gear icon in the top-left)
Navigate to the General tab
Scroll down to Custom Code
Paste the embed code in the End of <body> tag section
Publish your site

The chatbot now appears on every page. Clean and done.

Option B: Code component (per-page)

If you want the chatbot on specific pages only:

In the Framer editor, click the Code tab in the left panel
Create a new Code Component
Replace the contents with:

export default function FactfuChat() {
  return (
    <script
      src="https://factfu.com/v0/widget.loader.js"
      data-widget-key="pk_your_key_here"
    />
  )
}

Drag the component onto the pages where you want the chatbot
Publish

The site-wide approach is simpler. The code component approach is for when you want surgical control over which pages show the widget.

Step 4: Admire your work

Visit your published Framer site. There's a chat bubble in the corner. It matches the sophistication of your design work about as well as any floating bubble can — which is actually pretty well once you customize the colors.

Ask it a question about your services. It answers. Visitors who would have bounced now have a reason to engage.

Customizing to match your aesthetic

You didn't spend hours on your Framer site just to have a chatbot show up in default blue. In the Factfu dashboard:

Bots → Customize — set the accent color to match your brand
Avatar — upload your logo or brand mark
Welcome message — keep it on-brand. If your site is minimal, the bot greeting should be too
Quick replies — "Services", "Pricing", "Get a Quote" — whatever fits your conversion funnel

The widget renders in a shadow DOM, so your Framer CSS and animations won't conflict with it. It stays in its own lane.

Framer-specific notes

Animations and the widget: Your Framer page transitions and scroll animations run independently of the widget. The chat bubble stays fixed in the viewport regardless of what your page is doing. No z-index battles or animation conflicts.

Framer CMS pages: If you're using Framer's CMS for blog posts, case studies, or project pages, the crawler picks those up when you give it your site URL. All your CMS content becomes searchable by the bot.

Custom domains: Works identically whether your site is on yoursite.framer.website or a custom domain. The widget key is what matters, not the URL.

Troubleshooting

Widget doesn't appear after publishing:

Verify the code is in the End of <body> section (not Head)
Hard-refresh your published site (Ctrl+Shift+R)
Check the browser console for errors
Custom code requires a paid Framer plan — free sites can't inject scripts

Widget appears in the editor preview but not live:

That's unusual — more likely the other way around. Make sure you published after adding the code.

Bot gives generic answers:

Feed it more specific content. If you're a designer, include your process, deliverables, timelines, pricing tiers, and tools you use.
The bot is only as good as the content you give it. Think of it like onboarding a new team member — the more context, the better.

Pricing

	Free	Starter ($19/mo)	Pro ($49/mo)
Bots	1	3	Unlimited
Messages/month	200	2,000	5,000
Content sources	5	25	Unlimited
Custom branding	✓	✓	✓
Live chat handoff	—	✓	✓
Zapier integration	—	✓	✓
Slack integration	—	—	✓
Remove "Powered by"	—	—	✓

Wrapping up

Your Framer site makes one hell of a first impression. A chatbot makes sure that first impression turns into a conversation — and conversations turn into clients.

Two minutes of setup. One script tag. Your site goes from beautiful-but-silent to beautiful-and-actually-helpful.

Start free at factfu.com.