How to Add an AI Chatbot to Your Website in 5 Minutes (Free)

Adding an AI chatbot to your website used to mean hiring a developer, integrating complex APIs, and spending weeks on setup. Not anymore.

With modern chatbot builders, you can go from zero to a working AI chatbot in about 5 minutes. Upload your docs, customize the look, copy a script tag, paste it on your site. Done.

This guide walks you through the entire process using ChatRig -- a chatbot builder that's free during early access. The same general steps apply to most chatbot builders, but I'll use ChatRig since it's what I know best.

What you'll need

• A website (any platform works)
• Some content for the chatbot to learn from (your website URL, PDF docs, or text)
• About 5 minutes

That's it. No coding skills, no API knowledge, no credit card.

Step 1: Create your account

Head to chatrig.dev/signup and create a free account. Email and password, that's all.

During early access, everything is free. No credit card required, no trial that expires.

Step 2: Create a new project

Once you're in the dashboard, click "New Project." Give it a name -- something like "Website Support Bot" or your company name.

Each project is a separate chatbot. If you have multiple websites, you'll create one project per site.

Step 3: Train it on your content

This is where the magic happens. You have a few options:

Option A: Website URL Enter your website URL and ChatRig will crawl your pages and learn from the content. This is the fastest option if your website already has the information you want the chatbot to know.

Option B: Upload documents Upload PDFs, Word docs, or text files. This works great for FAQs, product manuals, pricing guides, or any documentation you want the bot to reference.

Option C: Direct text Paste text directly. Good for adding specific Q&A pairs or information that isn't on your website yet.

You can use all three methods together. The chatbot learns from everything you give it.

Step 4: Customize your chatbot

Before embedding it, customize a few things:

• Welcome message -- what the chatbot says when someone opens it. Keep it friendly and specific: "Hi! Ask me anything about [your product/service]."
• Brand color -- match your website's primary color so the widget looks native.
• Bot personality -- set the tone. Professional? Casual? Helpful but concise? This shapes how the AI responds.

Step 5: Copy the embed code

Click "Get Embed Code" in your project dashboard. You'll get a simple script tag that looks like this:

<script
  src="https://chatrig.dev/embed.js"
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

Copy this code. Now let's add it to your website.

Adding the chatbot to your website

WordPress

1. Go to your WordPress admin panel
2. Navigate to Appearance > Theme Editor (or use a plugin like "Insert Headers and Footers")
3. Find your theme's footer.php file or header template
4. Paste the script tag just before the closing </body> tag
5. Save and refresh your site

Using a page builder? Most page builders (Elementor, Divi, Beaver Builder) have an "HTML" or "Code" widget. Drop it on your page and paste the script tag.

Using a plugin? Install the "Insert Headers and Footers" plugin by WPCode. Go to Settings > Insert Headers and Footers, paste the code in the "Footer Scripts" box, and save.

Shopify

1. Go to your Shopify admin
2. Navigate to Online Store > Themes
3. Click Actions > Edit Code on your active theme
4. Open theme.liquid in the Layout folder
5. Paste the script tag just before the closing </body> tag
6. Save

The chatbot will appear on every page of your store.

Wix

1. Go to your Wix dashboard
2. Navigate to Settings > Custom Code
3. Click "Add Custom Code"
4. Paste the script tag
5. Set it to load on "All pages" in the "Body - end" position
6. Save and publish

Webflow

1. Go to your Webflow project settings
2. Navigate to the Custom Code tab
3. Paste the script tag in the "Footer Code" section
4. Save and publish

Plain HTML

If you're working with raw HTML files, paste the script tag right before the closing </body> tag in your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- ChatRig chatbot -->
  <script
    src="https://chatrig.dev/embed.js"
    data-project-id="YOUR_PROJECT_ID"
    async
  ></script>
</body>
</html>

React / Next.js

If you're running a React or Next.js app, add the script tag to your root layout or use the next/script component:

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://chatrig.dev/embed.js"
        data-project-id="YOUR_PROJECT_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Step 6: Test it

Visit your website and you should see the chat widget in the bottom-right corner. Click it, ask a question about your product or service, and watch it respond using the knowledge you gave it.

If something doesn't look right:

• Widget doesn't appear? Make sure the script tag is loading (check browser console for errors). Clear your browser cache.
• Answers are wrong or generic? Add more training content. The more specific information you give it, the better the responses.
• Styling looks off? Adjust the brand color in your ChatRig dashboard to match your site.

Tips for a better chatbot

1. Be specific with training data. Don't just dump everything -- curate the content you want the bot to reference. Focus on FAQs, product info, and common customer questions.

2. Set clear expectations in the welcome message. Tell visitors what the bot can help with. "Ask me about our pricing, features, or how to get started" is better than "How can I help you?"

3. Review conversation logs. Check your ChatRig dashboard regularly to see what people are asking. This tells you what content to add and what questions you should be answering better.

4. Keep it focused. A chatbot that knows a lot about one topic is more useful than one that knows a little about everything.

What it costs

During early access, ChatRig is completely free. After early access, plans start at $9/mo with BYOK (bring your own OpenAI key) or $29/mo for managed AI. Check the pricing page for full details.

The BYOK option is worth understanding -- you connect your own OpenAI API key and pay OpenAI directly for AI usage. For most small businesses, this means paying $2-5/mo in API costs instead of $40-100/mo on platforms that mark up those same API calls.

Ready to add a chatbot?

Create your free ChatRig account and follow the steps above. The whole process takes about 5 minutes, and you'll have a working AI chatbot on your website today.