How to Add AI Chat to Your Website in 5 Minutes
Published on by Antoni
Why AI Chat, Not Just Live Chat?
Traditional live chat has a fundamental problem: it requires a human on the other end. When nobody's there — nights, weekends, holidays — visitors bounce. When support is overwhelmed, wait times spike. When a new agent joins, they spend weeks learning your product before they can be useful.
AI chat solves all three. Instant answers, 24/7, trained on your actual docs. The AI doesn't get tired, doesn't take vacation, and doesn't forget what was in the onboarding guide.
This guide walks you through adding an AI chat widget to any website in under five minutes.
What You'll Need
- A FutureBase account (free to start)
- Access to your website's HTML (or your CMS/site builder settings)
- 5 minutes
That's it. No developer required. No backend to set up.
Step 1: Create Your AI Agent
Go to futurebase.io and sign up. After onboarding, you'll be asked to create your first AI agent.
Give it a name — something like "Support Bot" or your product name. This is what customers see when they open the chat window.
Step 2: Train It on Your Content
Enter your website URL. FutureBase will start crawling your public pages automatically — help center articles, product pages, FAQs, pricing — and index them as the AI's knowledge.
This typically takes 2–5 minutes depending on the size of your site.
While it's crawling, you can also:
- Add custom URLs — specific docs pages, a blog post, any public URL.
- Upload files — PDFs, markdown files, Word documents.
- Create FAQ entries — for questions where you want exact, controlled answers (e.g., "What is your refund policy?").
Tip: Don't overthink what to include. Start with your top 10 most-asked support questions and the pages that answer them. You can always add more later.
Step 3: Copy the Embed Snippet
Once your agent is configured, go to Integrations → Web Widget. You'll see a single-line script tag:
<script src="https://embed.futurebase.io/widget.js" data-wid="YOUR_WIDGET_ID"></script>
Copy this snippet.
Step 4: Add It to Your Website
Plain HTML
Paste the snippet just before the </body> closing tag:
<body>
<!-- Your site content -->
<script src="https://embed.futurebase.io/widget.js" data-wid="YOUR_WIDGET_ID"></script>
</body>
Next.js
In your root layout (app/layout.tsx), add the script with Next.js's <Script> component:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://embed.futurebase.io/widget.js"
data-wid="YOUR_WIDGET_ID"
strategy="lazyOnload"
/>
</body>
</html>
);
}
WordPress
In WordPress, go to Appearance → Theme Editor → footer.php and paste the snippet before </body>. Or use a plugin like "Insert Headers and Footers" (WPCode) to add it without touching theme files.
Webflow
In Webflow, go to Project Settings → Custom Code → Footer Code and paste the snippet. Publish your site — the widget appears immediately.
Shopify
In Shopify, go to Online Store → Themes → Edit Code → Layout → theme.liquid. Find the </body> tag and paste the snippet just before it. Save and you're done.
Step 5: Customize the Widget
Before you call it live, take 2 minutes to customize:
- Brand color — match your site's primary color
- Widget position — bottom-right (default) or bottom-left
- Welcome message — "Hi! How can I help you today?" or something on-brand
- Agent name and avatar — use your product name or a friendly persona
All of this is configured in the FutureBase dashboard under Widget → Appearance.
Step 6: Test It
Open your website in an incognito window and start a chat. Ask 5–10 questions your customers typically ask:
- "How do I get started?"
- "What's included in the free plan?"
- "How do I cancel?"
- "Can I export my data?"
For each answer, check: Is it accurate? Is it complete? Does it sound right?
If an answer is wrong or missing, the fix is almost always in your content — update the relevant doc or FAQ entry. The AI reflects what you feed it.
What Happens After You Launch
The widget is live on every page of your site the moment you add the snippet. Here's what to watch in the first week:
- Check the conversations dashboard — see what customers are actually asking.
- Look for unanswered questions — these reveal gaps in your docs.
- Watch the escalation rate — if lots of chats escalate to humans, the AI needs more content on those topics.
After the first two weeks, most teams settle into a rhythm: review conversations once a week, update content when needed, and let the AI handle the rest.
Common Questions
Will the widget slow down my site?
No. The script loads asynchronously (it doesn't block page rendering) and is served from a CDN. Impact on page load time is typically under 20ms.
What if the AI gives a wrong answer?
The AI only knows what you've given it. If it's wrong, the fix is improving the underlying content — not prompting the AI differently. Add an FAQ entry with the exact question and correct answer for precision-critical topics.
Can I limit which pages show the widget?
Yes. In the FutureBase dashboard, you can configure inclusion/exclusion rules by URL pattern. Show it only on /support/*, hide it on /checkout/* — whatever makes sense for your site.
Can I use this with my existing help desk?
Yes. FutureBase integrates with HelpScout for seamless handoff. When the AI can't resolve a conversation, it escalates to your HelpScout inbox. Agents see the full chat history.
Is the free plan enough to get started?
The free plan includes 600 credits/month — enough to handle hundreds of conversations. Most small sites stay on the free plan for months before needing to upgrade.
Checklist: AI Chat in 5 Minutes
- Sign up and create your FutureBase agent
- Enter your website URL (auto-crawl starts immediately)
- Add 3–5 FAQ entries for critical questions
- Copy the embed snippet
- Paste it into your site before
</body> - Customize brand color and welcome message
- Test with 5 real customer questions
- Go live
That's it. Five minutes from sign-up to live AI support.
— Antoni
