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.

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.

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> Enter fullscreen mode Exit fullscreen mode 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.

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> Enter fullscreen mode Exit fullscreen mode 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.

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> Enter fullscreen mode Exit fullscreen mode Three details worth noticing:

To change the corner, swap right:20px for left:20px in both rules.

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.

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

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

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

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.