如何在不重建網站的情況下加入 AI 聊天機械人

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.

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 (zero code, 2 minutes)

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 (one iframe)

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 one you actually want)

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:

1. Use a free or low-cost model tier (Groq's free tier handles a small business's volume comfortably)
2. Cap messages per visitor in the bot's backend
3. 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 sammishrakh.freelancer@gmail.com.