How to Add an AI Chatbot to Webflow

Webflow lets you design anything — except a good FAQ experience

Webflow is incredible for building pixel-perfect sites without writing code. Animations, CMS collections, responsive layouts — all drag-and-drop. Beautiful.

But when a visitor needs to ask a question that isn't covered by your carefully curated copy? They hit a contact form and wait. In a world where people abandon checkout flows if they take more than 12 seconds, "we'll get back to you in 24 hours" might as well be "goodbye."

An AI chatbot fills that gap. It reads your content and answers questions in real time. And adding one to Webflow is surprisingly straightforward — no Webflow Logic or third-party app needed.

What you'll need

• A Webflow site (works on all plans — details below)
• A free Factfu account
• 5 minutes

Step 1: Create your chatbot

1. Sign up at factfu.com/signup
2. Click Create Bot
3. Add your content sources:
   • Website URL — enter your Webflow site's URL. The bot crawls your published pages and CMS collection items.
   • Text/FAQ — paste frequently asked questions directly
   • Documents — upload PDFs, guides, or other materials

Webflow CMS pages are fully crawlable, so if you have a blog, resource library, or product catalog built with CMS collections, the bot will pick all of that up automatically.

Step 2: Get the embed code

In your 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 Webflow

You have two options depending on your Webflow plan:

Option A: Site-wide Custom Code (Any paid plan)

The cleanest approach:

1. Open your Webflow project
2. Go to Project Settings → Custom Code
3. In the Footer Code section, paste the embed code
4. Click Save Changes
5. Publish your site

The chatbot will appear on every page. Done.

Option B: Embed element (Works on all plans, including free)

If you're on the free Webflow plan or want the chatbot on specific pages only:

1. Open the Webflow Designer
2. Navigate to the page where you want the chatbot
3. From the Add panel (+), drag an Embed element onto the page (find it under Components → Embed)
4. Paste the script tag into the embed code editor
5. Click Save & Close
6. Publish your site

Place the Embed element at the bottom of your page — it won't be visible on the canvas (the widget renders as a floating overlay), but keeping it at the bottom is tidier.

Option C: Use the Body section in page settings

For per-page custom code on paid plans:

1. Select a page in the Pages panel
2. Open the Page Settings (gear icon)
3. Scroll to Custom Code → Before tag
4. Paste the embed code
5. Publish

Step 4: Test it

Visit your published site (not the Webflow Designer preview — that doesn't execute custom scripts). You should see a chat bubble in the bottom-right corner.

Open the chat. Ask something. Watch the bot pull the answer from your own content.

If you're building client sites, this is the part where the client goes: "Wait, how does it know that?" Every time.

Webflow-specific tips

CMS Collection content

If your site uses Webflow CMS (blog posts, products, team members, etc.), point the bot's URL crawler at your sitemap. Webflow auto-generates sitemaps at yoursite.com/sitemap.xml. The crawler follows it and indexes all your collection pages.

Interactions and animations

The widget uses a shadow DOM with z-index: 2147483647 (the highest safe value). Your Webflow interactions, overlays, and modals won't interfere with it, and it won't interfere with them.

Client handoff

If you're an agency building sites for clients, here's the handoff process:

1. Client creates their own Factfu account
2. They add content and get a widget key
3. You add the script tag to the site's custom code
4. Client manages the bot themselves — no ongoing work for you

Troubleshooting

Widget doesn't appear on the published site:

• Confirm you published the site after adding the code
• Check that the code is in the Footer section (or an Embed element that's on the live page)
• View the browser console for errors — incorrect widget keys show an error message
• Try incognito mode to rule out browser extensions

Widget doesn't show in the Designer:

• That's expected. The Designer doesn't run custom scripts. You'll only see the widget on the published site.

Bot doesn't know about my CMS content:

• Make sure you added your site URL (including subfolders) as a content source
• CMS collection items need to be published (draft items won't be crawled)
• Wait a few minutes after adding the source — crawling takes a moment

Performance

~30 KB gzipped, loaded asynchronously with defer. No impact on your Webflow Lighthouse scores. The widget initializes after your page is fully rendered.

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

Webflow gives you total control over how your site looks. An AI chatbot gives visitors control over what they learn. The combination means your site isn't just a static brochure — it's a conversation partner that knows your content inside and out.

One script tag. Five minutes. Your Webflow site just got a brain. Start free.