How to Add a Chatbot to Your Website in 5 Minutes
Step-by-step guide to adding an AI chatbot to any website. Works with WordPress, Shopify, Webflow, React, and plain HTML.
Adding a chatbot to your website used to require developers, custom code, and weeks of setup. Not anymore. With modern AI chatbot platforms, you can have a working chatbot in minutes.
What You'll Need
- A website (any platform works)
- Your website URL or documentation
- 5 minutes
That's it. No coding required.
Step 1: Sign Up and Create Your Chatbot
First, create an account at SiteSupport. The signup takes about 30 seconds.
Once logged in, click "Create Chatbot" and give it a name. Something like "Support Bot" or your company name works great.
Step 2: Train Your Chatbot
This is where the magic happens. You have three options:
Option A: Add Your Website URL
Enter your website URL and click "Train". The AI will automatically:
- Crawl your website
- Extract all relevant content
- Learn your products, services, and FAQs
This typically takes 1-2 minutes depending on your site size.
Option B: Upload Documents
Have a knowledge base, FAQ document, or product manual? Upload it directly:
- PDF files
- Text documents
- Markdown files
The AI will learn from these documents and use them to answer questions.
Option C: Paste Text
For quick setup, just paste your FAQ content or key information directly into the text box.
Step 3: Customize the Look
Make the chatbot match your brand:
- Primary color — Match your brand color
- Welcome message — What should the bot say first?
- Quick prompts — Suggested questions for visitors
Step 4: Copy the Embed Code
Click "Embed" to get your code snippet. It looks something like this:
<script src="https://sitesupport.ai/widget.js"
data-key="your-unique-key"></script>Step 5: Add to Your Website
WordPress
- Go to Appearance → Theme Editor (or use a plugin like "Insert Headers and Footers")
- Paste the code before
</body> - Save
Shopify
- Go to Online Store → Themes → Edit Code
- Open
theme.liquid - Paste the code before
</body> - Save
Webflow
- Go to Project Settings → Custom Code
- Paste in the "Footer Code" section
- Publish
React / Next.js
Add the script to your main layout or use the next/script component:
import Script from 'next/script'
export default function Layout({ children }) {
return (
<>
{children}
<Script src="https://sitesupport.ai/widget.js"
data-key="your-unique-key" />
</>
)
}Plain HTML
Just paste the code before </body> in your HTML files.
You're Done!
Refresh your website and you should see the chat widget in the bottom corner. Try asking it a question — it should answer based on your content.
Tips for Better Results
- Add more content — The more you train it, the better it gets
- Review conversations — See what questions visitors ask and improve your training
- Update regularly — Retrain when you update your website or products
Common Questions
Does it work on mobile?
Yes, the widget is fully responsive.
Will it slow down my site?
No, the script is under 15KB and loads asynchronously.
Can visitors talk to a human?
Yes, you can enable human handoff in settings.
Ready to add a chatbot to your website? Get started free — no credit card required.