All posts
GuideAI Chatbot

How to add an AI chatbot to your website (2026 guide)

Add an AI chatbot to any website in minutes: train it on your content, then paste one script tag into WordPress, Shopify, Webflow or Next.js. Free plan.

TMThe MySiteGPT TeamJune 24, 2026Updated 8 min read

The short answer

To add an AI chatbot to your website, train a hosted assistant on your own content (a URL crawl, pasted text, files or Q&A pairs), test its answers, then paste one script tag before the closing </body> tag. With MySiteGPT that takes a few minutes, works on WordPress, Shopify, Wix, Webflow, Next.js or plain HTML, and starts on a Free plan with no card.

Adding an AI chatbot to your website used to be a quarter-long project. In 2026 it's closer to a coffee break. This guide covers what an AI chatbot actually is now, the two realistic ways to build one, and exactly how to embed a chat widget on any stack — WordPress, Shopify, Webflow, Next.js, or plain HTML.

What an AI chatbot does in 2026

The old rules-based chatbot walked visitors down a scripted decision tree and broke the moment someone phrased a question differently. A modern AI chatbot is different: it uses retrieval-augmented generation (RAG) to read your real content and answer in natural language, with a link back to the source. If the term is new to you, our explainer on what RAG is covers it in five minutes.

The practical difference comes down to coverage:

  • A rules bot can only answer questions someone scripted in advance.
  • An AI chatbot answers anything your content covers — in the visitor's own words, in 50+ languages — and says "I'm not sure" when it genuinely doesn't know.

That last part matters more than it sounds. A support bot that invents a refund policy is worse than no bot at all.

Two ways to add an AI chatbot to your site

1. Build it yourself on an LLM API

You can wire one up directly on an LLM API. You'll need embeddings, a vector database, a chunking strategy, a retrieval step, response streaming, a widget UI, conversation storage, and some moderation. It's a real build with real maintenance, and the costs scale with traffic. If you go this route, estimate the embedding bill first with our token and chunk estimator so there are no surprises.

2. Use a hosted, content-trained assistant

The faster path: point a hosted assistant at your content, let it train, and drop in one script tag. No infrastructure, no vector database to babysit, and updates are a re-train away. For most teams this is the right trade — you're in the support business, not the RAG-plumbing business.

Step by step: the hosted route

  1. Point it at your content. Crawl your sitemap, paste text, upload a PDF, or add Q&A pairs. Mix and match — your help center, pricing page, and FAQ are a great start. (New to this? How to train an AI chatbot on your own website content covers the pipeline end to end.)
  2. Check your content is AI-ready first. Thin or unstructured pages retrieve poorly, which means weak answers. Run a key page through the RAG readiness checker and fix what it flags before you train.
  3. Test in a playground. Ask the questions your customers actually ask — including the awkward edge cases — and confirm the answers cite the right pages.
  4. Embed the widget. It's a single script tag:
<script src="https://mysitegptassistant.com/widget.js" data-bot-id="your-bot-id" defer></script>

The widget renders inside a Shadow DOM, so its styles never collide with your site's CSS.

Where the embed works

The same script tag drops into almost any stack:

  • WordPress: a custom HTML block or your theme footer.
  • Shopify: add it to theme.liquid.
  • Webflow / Squarespace: the custom-code embed.
  • Next.js / React: your root layout.
  • Plain HTML: paste it before the closing body tag.

There's a full walkthrough in embed a chat widget on any stack in 5 minutes.

What to measure once it's live

An AI chatbot earns its keep on three numbers: how many tickets it deflects, how many leads it captures, and what it still can't answer. Watch the unanswered-questions log and feed the gaps back into training. To size the upside before you start, run your numbers through the chatbot ROI calculator.

The honest caveat

An AI chatbot is only as good as the content behind it. Vague, contradictory, or missing pages produce vague answers. Treat your help content as the product it now is, keep it current, and let the bot stay quiet when your content doesn't have the answer. Do that, and a five-minute embed turns into your most patient support agent.

Try it on your own site, free

MySiteGPT has a Free plan with every feature, one chatbot and 100 messages a month, no card and no time limit. Start free, paste your URL, and you'll have a cited assistant to embed in a few minutes. Comparing options first? The comparison hub lines it up against 50+ alternatives.

Frequently asked questions

How do I add an AI chatbot to my website?

Train a hosted assistant on your content (crawl your site, paste text, upload files or add Q&A pairs), test the answers, then paste one script tag before the closing body tag. The widget loads asynchronously and renders in a Shadow DOM, so it doesn't clash with your site's styles.

Can I add an AI chatbot to my website for free?

Yes. MySiteGPT's Free plan includes every feature, one chatbot and 100 messages every 30 days, with OpenAI usage included, no card and no time limit. Pro is $19.99/mo for 3 chatbots, 3,000 messages a month and no branding.

Do I need to code to embed a chatbot on my website?

No. The only code is a single script tag you copy from the dashboard and paste into your site's footer or custom-code setting. Everything else, including crawling, chunking and embedding your content, happens without code.

Where do I paste the chatbot script on WordPress, Shopify or Webflow?

On WordPress, use a footer-code plugin or your theme's footer. On Shopify, paste it into theme.liquid just above </body>. On Webflow, use Site settings, Custom code, Footer code, then publish. On Next.js or React, add it to your root layout.

Will an AI chatbot slow down my website?

Not this one. The widget is a single async script that mounts in an isolated Shadow DOM, so it never blocks your page from rendering.

Build your own cited assistant, free
Free plan: every feature, 1 chatbot and 100 messages every 30 days, OpenAI included. No card, no time limit.