How to Add an AI Chatbot to Any Website (No Rebuild Required)

You have a website. You want an AI assistant on it that answers customer questions - without rebuilding the site, without a monthly SaaS subscription, and without the bot inventing refund policies you never wrote.

This guide shows the three ways to add a chatbot to an existing site, from zero-code to fully embedded, including a copy-paste floating chat bubble that works on WordPress, Shopify, plain HTML, React - anything that lets you add a snippet.

First, the Bot Itself

One thing before the how: the bot itself. A chatbot for a business must answer only from your real content - your FAQ, policies, product docs - and admit when it doesn't know.

That's called RAG (Retrieval-Augmented Generation), and I wrote a full free tutorial on building one and hosting it at a public URL for ₹0: Build a Free AI Support Chatbot with FastAPI, Groq, and Vercel. You can also try my live demo to see exactly what you'd be adding.

Once your bot has a URL, adding it to your site is one of these three moves.

Option 1 - The "Chat with us" Link

Add a button or menu item anywhere on your site that opens your chatbot URL:

<a href="https://YOUR-CHATBOT-URL" target="_blank" rel="noopener">💬 Chat with us</a>

That's it. Works on every platform ever made, changes nothing about your site, and on mobile it opens full-screen - which is actually the best chat experience on a phone.

Best for: testing whether customers even use the bot, before investing another minute.

Option 2 - The Embedded Panel

Put the chatbot inside a page - a support page, a contact page, a help center:

<iframe src="https://YOUR-CHATBOT-URL" style="width: 100%; max-width: 480px; height: 600px; border: 0; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.12);" title="Support chat"></iframe>

In WordPress, paste this into an HTML block. In Shopify, into a Custom Liquid section. On a plain site, anywhere in the body.

Best for: a dedicated "Help" or "Support" page where chat is the main event.

Option 3 - The Floating Chat Bubble

The classic: a round button in the bottom-right corner of every page; clicking it opens the chat in a panel. Here's a complete, dependency-free snippet - paste it once before your site's closing </body> tag:

<!-- AI chat bubble - paste before </body>. Set data-src to your bot URL. -->
<div id="ai-chat-root" data-src="https://YOUR-CHATBOT-URL"></div>
<script>
(function () {
  var root = document.getElementById("ai-chat-root");
  var SRC = root.getAttribute("data-src");
  var style = document.createElement("style");
  style.textContent = "#ai-chat-btn{position:fixed;right:20px;bottom:20px;width:60px;height:60px;"
    + "border-radius:50%;border:0;background:#2B6B35;color:#fff;font-size:26px;"
    + "cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:99998}"
    + "#ai-chat-btn:hover{transform:scale(1.06)}"
    + "#ai-chat-frame{position:fixed;right:20px;bottom:92px;width:380px;height:560px;"
    + "max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);border:0;"
    + "border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:99999;"
    + "display:none;background:#fff}";
  document.head.appendChild(style);
  var btn = document.createElement("button");
  btn.id = "ai-chat-btn";
  btn.setAttribute("aria-label", "Open support chat");
  btn.textContent = "💬";
  var frame = document.createElement("iframe");
  frame.id = "ai-chat-frame";
  frame.title = "Support chat";
  var open = false;
  btn.addEventListener("click", function () {
    open = !open;
    if (open && !frame.src) frame.src = SRC; // load only on first open
    frame.style.display = open ? "block" : "none";
    btn.textContent = open ? "✕" : "💬";
  });
  root.appendChild(btn);
  root.appendChild(frame);
})();
</script>

Three details worth noticing:

• Lazy loading - the iframe only loads when someone clicks, so the bubble adds zero weight to your page load.
• Mobile-safe sizing - max-width/max-height keep the panel inside small screens instead of overflowing them.
• Change the color - the #2B6B35 in the button style is the bubble color; swap in your brand hex. To change the corner, swap right:20px for left:20px in both rules.

Make It Answer Your Content

Whichever option you choose, the bot is only as good as its knowledge base. The pattern (from the chatbot tutorial): write your docs as markdown sections - shipping, returns, pricing, how-tos - with headings phrased the way customers ask.

Update the docs, restart the bot, and it knows the new answers. No retraining, no fine-tuning.

Keep It From Running Up a Bill

A public chatbot calls your AI API on strangers' behalf. Three guardrails, all cheap:

• Use a free or low-cost model tier (Groq's free tier handles a small business's volume comfortably)
• Cap messages per visitor in the bot's backend
• Set a hard monthly spending limit in your API provider's dashboard

Done right, a site chatbot costs less per month than one coffee.

Skip the Building Entirely

If you'd rather start from working code than build from scratch:

• Free - complete tutorial code: the serverless chatbot from my tutorial, deployable to a free public URL
• AI Chatbot Starter Kit - $29: the production version - vector search for bigger knowledge bases, Docker deployment, one-command setup, customization guides, and a commercial license (use it for client projects)

Or if you want it done for you - your content, your branding, embedded in your site - that's literally my job: I'm Sammishra - an AI engineer and published researcher. I build chatbots, RAG pipelines, and AI automations for businesses. See my work at sammishra.hashnode.dev/work-with-me, or email me at samm******************@gmail.com.