Back to Blog

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.

SiteSupport Team3 min read
tutorialchatbotintegration

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:

html
<script src="https://sitesupport.ai/widget.js"
        data-key="your-unique-key"></script>

Step 5: Add to Your Website

WordPress

  1. Go to Appearance → Theme Editor (or use a plugin like "Insert Headers and Footers")
  2. Paste the code before </body>
  3. Save

Shopify

  1. Go to Online Store → Themes → Edit Code
  2. Open theme.liquid
  3. Paste the code before </body>
  4. Save

Webflow

  1. Go to Project Settings → Custom Code
  2. Paste in the "Footer Code" section
  3. Publish

React / Next.js

Add the script to your main layout or use the next/script component:

jsx
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

  1. Add more content — The more you train it, the better it gets
  2. Review conversations — See what questions visitors ask and improve your training
  3. 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.

Ready to try AI-powered support?

Set up in 5 minutes. No credit card required.

Get Started Free