How to Add an AI Chatbot to Your Bubble App

Add an AI chatbot to Bubble.io in under 5 minutes using the HTML element. No plugins required, no code beyond a simple paste — perfect for no-code builders who want smart customer support.

You built an entire app without code. A chatbot should not be harder.

You've built workflows, set up databases, designed responsive layouts, and wired up API calls — all without writing a single line of code. Bubble lets you punch way above your weight class.

But here's the ironic part: when a user of your app asks "How do I reset my password?" or "What does the Premium plan include?", there's no built-in way to answer them automatically. You either write documentation (that nobody reads) or handle support manually (that nobody enjoys).

An AI chatbot trained on your content handles those questions automatically. And adding one to Bubble is delightfully on-brand: no code required.

What you'll need

A Bubble.io app (any plan)
A free Factfu account
5 minutes

No Bubble plugin needed. No marketplace installs. Just a script tag inside an HTML element.

Step 1: Set up the chatbot

Go to factfu.com/signup and create a free account
Click Create Bot
Feed it your content:
- Website URL — if your Bubble app has public-facing pages, enter the URL and let the bot crawl them
- Text/FAQ — paste your help docs, FAQs, feature descriptions, pricing details
- Documents — upload PDF guides, onboarding docs, or anything else

The bot builds a knowledge base from whatever you give it. Better content = better answers. Skip the lorem ipsum.

Step 2: Get your embed code

In the Factfu dashboard, go to Settings → Widget
Copy the embed code:

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

Step 3: Add it to your Bubble app

Here's where it gets pleasingly simple:

Open your Bubble app in the Editor
Go to the page where you want the chatbot (or your reusable header/footer element if you want it site-wide)
From the elements panel, drag an HTML element onto the page
In the HTML element editor, paste the embed code
Resize the HTML element to something small (the widget floats as an overlay — the element itself doesn't need to be visible)
Preview or deploy

That's it. The chat bubble appears in the bottom-right corner of your app.

Want it on every page?

If your Bubble app has a reusable element that appears on all pages (like a nav bar or footer), add the HTML element there instead. The widget will show up everywhere that reusable element is used.

Alternatively, you can add it to each page individually — but why do extra work? You're a no-coder. Efficiency is your love language.

Step 4: Test it

Click Preview in the Bubble editor and test the chat. Ask a question about your app. Watch the bot answer it using the content you provided.

Then deploy to production and check it live. The chatbot will be available to all your users immediately.

Use cases for Bubble apps

The generic "customer support" chatbot is great, but Bubble apps have some specific use cases that are worth calling out:

SaaS help desk

If you built a SaaS product on Bubble, the chatbot replaces your help docs widget. Feed it your documentation and feature descriptions. Users get instant answers without leaving your app.

Marketplace FAQs

Building a marketplace? The chatbot can answer "How do I list an item?", "What are the fees?", or "How does shipping work?" — all trained on your marketplace's rules and policies.

Internal tools

Even if your Bubble app is internal-only, a chatbot can help team members navigate complex workflows. "How do I approve a purchase order?" beats pinging someone on Slack every time.

Client-facing portals

If you build Bubble apps for clients, add a chatbot to each client portal. Each client gets their own bot trained on their specific content.

Troubleshooting

Widget doesn't appear in Preview:

Make sure the HTML element is on the page and contains the script tag
Check the browser console (F12) for errors
Some ad blockers prevent widgets from loading — try incognito mode

Widget doesn't appear when deployed:

Verify the HTML element is included in your deployed version
Make sure pk_ key is correct
Hard-refresh the page (Ctrl+Shift+R) to clear any caching

Bot doesn't know the right answers:

Add more content sources in the Factfu dashboard
If your content is behind a login in Bubble, the crawler can't reach it — paste the content as text/FAQ instead
Wait a few minutes after adding sources for processing to complete

Widget overlaps a Bubble element:

The widget uses a very high z-index. If it's covering something important, adjust the chat bubble position in Bots → Customize in the Factfu dashboard.

Performance

The script loads asynchronously and weighs ~30 KB gzipped. It won't slow down your Bubble app — which, let's be real, has bigger performance concerns than a 30 KB script. (We say that with love.)

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

You built an entire application without writing code. Adding an intelligent chatbot shouldn't require an engineering degree either.

One HTML element. One script tag. Your users get instant answers, your support load drops, and you can get back to making your Bubble app even better.

Get started free at factfu.com. Your users will thank you — possibly through the chatbot.