How to Add an AI Chatbot to Any Website (One Script Tag)

The simplest way to add an AI chatbot to your website. One line of HTML, no framework required. Works with any site that can load a script tag — which is all of them.

One script tag. That's the whole tutorial.

We could pad this out with a 2,000-word intro about the importance of customer engagement in the digital age. We could talk about market trends and customer retention statistics. We could use the phrase "paradigm shift" unironically.

Instead, here's the answer you came for:

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

Drop that before your closing </body> tag. Done.

Okay, you need a widget key first. And you probably want some context. So let's do the slightly longer version.

The 5-minute version

1. Sign up and create a bot

Go to factfu.com/signup. Free account comes with 200 messages per month — enough to test whether this is worth your time (spoiler: it is).

Once you're in:

Click Create Bot
Name it something respectable
Add your content — this is what the bot will actually know about

You've got three ways to feed it information:

Website URL — point it at your site and it crawls everything it can find
Text/FAQ — paste in specific Q&A pairs or free-form text
Documents — upload PDFs, docs, whatever you've got

The bot builds a knowledge base from this. Better input = better answers. Garbage in, garbage out — same as everything else in life.

2. Copy the embed code

Go to Settings → Widget in the dashboard. You'll see your embed code with a unique widget key:

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

3. Paste it into your HTML

Open whatever file serves your site's HTML. Could be index.html. Could be a template. Could be a CMS field that accepts custom code. Put the script tag just before </body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Your Site</title>
</head>
<body>
  <!-- all your existing content -->

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

Refresh. There's a chat bubble in the bottom-right corner of your page. Click it. Ask a question. Watch the bot answer it using your content.

That's genuinely it.

For the "but what about..." crowd

Static HTML sites

Just edit the HTML file. If you have multiple pages, paste the script in each one — or better yet, put it in a shared template/include if your setup supports it.

PHP sites

Add the script to your footer template:

<!-- in footer.php or equivalent -->
<script
  src="https://factfu.com/v0/widget.loader.js"
  data-widget-key="pk_your_key_here"
  defer>
</script>
</body>
</html>

Server-rendered apps (Express, Django, Rails, etc.)

Same idea — add the script tag to your base layout template. The defer attribute means it won't block rendering regardless of where you put it, but </body> is conventional.

Hugo, Jekyll, Eleventy, or any static site generator

Find the base layout (usually something like layouts/_default/baseof.html or _layouts/default.html) and add the script before the closing body tag.

Single-page apps (React, Vue, Angular)

Add it to your root index.html. The widget attaches itself to the DOM independently — it doesn't care what framework you're using. For React/Next.js specifically, check out our Next.js guide for a slightly more idiomatic approach.

How the script works (for the curious)

The loader script (widget.loader.js) is about 2 KB. It:

Fetches a manifest to find the latest widget bundle
Loads the full widget (~30 KB gzipped) asynchronously
Renders the chat bubble in a shadow DOM (isolated from your CSS)
Connects to the Factfu API when someone opens the chat

The defer attribute ensures it doesn't block page parsing. Your content loads first, then the chat bubble appears. Lighthouse won't bat an eye.

Customizing

All customization happens in the Factfu dashboard — not in your HTML:

Colors: Match your brand in Bots → Customize
Welcome message: Set a greeting that fits your tone
Quick replies: Pre-set buttons like "Pricing", "Contact", "FAQs"
Avatar: Upload your logo or a custom icon
Instructions: Tell the bot how to behave ("Keep answers short", "Always suggest booking a call for complex questions", etc.)

Changes apply instantly. No need to touch your site's code.

Troubleshooting

Nothing appears:

View source and confirm the script tag is in the page
Check the browser console for errors (F12 → Console)
Make sure the widget key starts with pk_ and is valid
Try a private/incognito window — aggressive caching or browser extensions can interfere

Bot doesn't know the answers:

Add more content sources in the Factfu dashboard
If you added a URL, wait a few minutes for the crawl to finish
Check source status — it should show "Ready"

Widget conflicts with my layout:

The widget renders in a shadow DOM, so CSS conflicts are extremely unlikely
If the chat bubble overlaps a critical element on mobile, adjust its position in Bots → Customize

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"	—	—	✓

Start free. Upgrade when the bot is answering more questions than you ever did manually.

The bottom line

Adding a chatbot to your website is a one-line-of-HTML operation. No npm install. No build step. No external dependencies. No iframe sizing issues. Just a script tag with your key.

If you can paste code into an HTML file, you can have an AI chatbot running in five minutes. Start here.