An AI Chatbot for Your Website That Answers Only From Your Content
Write your knowledge base, pick a colour, paste one script tag. ChatKit answers your visitors from what you wrote — in their language — and says the fallback line you chose when the answer is not there.
Add an AI chatbot to your website in four steps — no developer needed
Everything below is a form you fill in yourself. These are the actual fields, in the order you meet them, so you can see the whole job before you start it.
Create the chatbot
Three fields. Name, which is required; Status — Active, Draft or Archived, and it defaults to Active; and an optional Description. There is no onboarding form, no approval queue and nobody to email. The chatbot exists the moment you save.
Add knowledge-base entries
Each entry is a Title, a Category picked from a dropdown of nine, the Content itself in a textarea with a live word count, and a Sort order. The next section covers what to write, which category to file it under, and why the order matters more than you would expect.
Style the widget
Five controls, one panel: the greeting message; a free-text custom system prompt, which is where you set personality and house rules; the primary colour from a hex picker; the fallback message it uses when an answer is not in your content; and the allowed-domains list.
Paste one line before </body>
The portal shows your snippet with a copy button once the chatbot's status is Active. It looks exactly like this, with your own chatbot id in place of the placeholder:
your page HTML<script src="https://mdntech.org/widget.js" data-chatbot-id="your-chatbot-id"></script>It has to be a real script tag in your page HTML. Tag managers and script injectors that add it dynamically are not supported or tested — the FAQ has the details.
No plugin, no hosting, nothing to maintain — and you can do all four steps before you spend a single credit.
30 free messages — no credit card, nothing to cancel.
Your knowledge base: the chatbot's only source of truth
Most chatbot pages say 'trained on your data' and stop there. Here is the actual mechanism, which is both more honest and a better reason to trust it.
This is what people mean by an AI chatbot trained on your own content. With ChatKit nothing is trained, indexed or embedded. Your entries are handed to the model with every single question, and the instructions it runs under say: answer only from this, and if the answer is not here, say the fallback line the owner wrote. That is why it cannot quietly invent a shipping policy you never published.
Nine categories, and what each one is for
- general
- hours, location, the basics
- about
- who you are and what you do
- products
- what you sell, specs, stock rules
- faq
- the questions you already answer daily
- policies
- shipping, returns, refunds, cancellation
- tone
- how the chatbot should sound
- pricing
- rates, packages, what is included
- support
- how to get help or book you
- other
- anything that does not fit above
The categories are not cosmetic. Entries are grouped and ordered by category before they reach the model, so everything you filed under policies arrives together, in a predictable place, on every question.
The fastest way to fill it: let Claude Code write it for you
M.D.N Tech publishes a copy-paste prompt that points Claude Code at your whole project — code, docs, README, marketing copy, anything user-facing — and has it write a single knowledge-base.md organised into ChatKit's own category headings, skipping any category it does not have enough source material for rather than inventing one. You paste each section into the matching entry. It is also packaged as the free /build-kb skill in our free directory of Claude Code skills. New to Claude Code? Our complete guide to Claude Code starts at installation.
How content gets in
Everything is added by you, through the entry form. There is no crawler pointed at your site, no PDF upload and no help-centre sync. The upside is worth the typing: nothing gets published to your visitors that you did not write and sort yourself, so the chatbot cannot surface a page you forgot was still online.
Sort order is a priority list, not a filing preference
Sort order decides which entries make the cut — only the first five reach the model, and inside the prompt those five are regrouped by category. So put your highest-value answers first and keep each one tight and single-topic — one entry per subject beats one long entry covering five. The caps are stated plainly in the limits section.
What your visitors actually see: inside the chat widget
The panel below is drawn at the widget's real proportions, in its real layout. Everything alongside it is a specific figure rather than a promise, so you can judge whether it will suit your site before you install it.
A 56-pixel bubble, bottom right
The launcher is a 56-pixel circle fixed to the bottom-right corner, and it opens a 380-pixel panel up to 520 pixels tall on a dark #0d0d20 background. The position is fixed — it is not something you can move.
Your colour, everywhere it counts
The bubble, the header accent, the panel border, the send button and the visitor's own message bubbles all take the primary colour you picked in the widget settings.
It cannot break your CSS, and your CSS cannot break it
The widget renders inside a Shadow DOM whose host rule is ':host { all: initial }'. Styles do not cross in either direction: your theme cannot squash the panel, and the widget cannot restyle your buttons or inherit your type scale.
Mobile is a different layout, not a shrunk one
On screens 480 pixels wide or narrower the panel goes near-full-width — calc(100vw - 16px) — caps its height at 65vh so it never swallows the page, and the bubble drops to 50 pixels.
Answers stream in as they are written
Replies arrive token by token over a server-sent event stream, so the visitor watches the answer being typed rather than staring at a spinner. An animated three-dot indicator covers the gap before the first token.
The thread survives navigation
The visitor id, the conversation id and the recent messages are held in the browser's session storage, so clicking from your pricing page to your contact page does not restart the chat.
Light formatting only
Bold, links — opened in a new tab with rel=noopener — and simple bullet lines. Everything is HTML-escaped before any formatting is applied.
It carries our badge
The panel has a small 'Powered by M.D.N Tech' footer link. There is no white-label option today, paid or otherwise.
English chrome, multilingual answers
The placeholder text, the AI tag and the error strings are English. The answers follow the visitor's language; the widget's own furniture does not.
How ChatKit answers: short, grounded, and in the visitor's language
Most of what follows is a constraint rather than a feature. Each one is deliberate, and together they are why the chatbot is safe to put in front of your customers.
It answers like a busy professional, not a brochure
The instructions cap every reply at two or three sentences, with no bullet lists, no headings, no markdown and no emojis, and a hard ceiling on output length behind that. On a support widget this is what people actually want: the answer, not an essay. It is also the cheaper behaviour, because it is one credit per reply whether the reply is one line or five.
When it does not know, it says your line — word for word
You write the fallback message in the widget settings, and the model is instructed to output it verbatim rather than improvise something plausible. Every fallback is then counted, so the Fallback rate tile on your dashboard — free with every chatbot — tells you exactly how often visitors asked something your content does not cover. Read it as a content to-do list, not a failure rate.
One chatbot, every language your visitors use
The model replies in the same language the question was asked in. There is no per-language setup and no second chatbot to build: your knowledge base can be written in English while a visitor asks in German and gets German back. The widget's own chrome stays English — the answers travel, the furniture does not.
It follows the thread
The recent conversation is replayed to the model on every turn, and the instructions forbid re-introducing itself or recapping what it has already said, so a follow-up like “and to Germany?” lands correctly instead of restarting the pitch. A casual greeting gets a short friendly reply rather than a product dump.
Powered by Anthropic's Claude.
AI customer support for small businesses, without a support team
Every account starts with one chatbot. Here is what filling it in looks like for four kinds of business, described in the categories you would actually use.
An e-commerce store
- policies
- products
- faq
Shipping, returns and refunds under policies. Sizing, materials and stock rules under products. Order tracking under faq.
The three questions that fill your inbox get answered at 11pm, in the buyer's language, on the product page where the doubt appeared rather than two emails later.
A service business — clinic, studio, trades, restaurant
- general
- pricing
- support
Hours, location and parking under general. The service menu under pricing. How to book and the cancellation window under support.
Fewer 'are you open on Sunday?' calls, and the fallback rate quietly tells you which detail you never got round to publishing.
A SaaS or app with docs
- products
- faq
- support
What the product does under products. Setup, integrations and limits under faq. Where to get help under support.
The repetitive pre-sales questions get deflected without adding a help-desk seat, and the keyword list shows which part of the docs people cannot find.
An agency or freelancer running client sites
- about
- pricing
- faq
One chatbot per client site, each with its own knowledge base, colour and domain list.
A support layer you can hand over at the end of a project. Each additional chatbot is a one-time 1,250 credits slot unlock, and every chatbot keeps its own separate content and settings — they draw on one shared credit balance, so you top up in one place.
We run ChatKit on our own client sites — the same widget, the same nine categories, the same credit counter. You can read about the engineers who build and run it if that matters to you.
What every chatbot includes, and what costs extra
The line between the two is drawn in the code, not in the copy: a new chatbot is created with no unlocks at all, so everything in the first list works on the free trial and nothing in the second does.
Included with every chatbot, including on the free trial
All of this works within your 30 free messages, with no card on file.
Grounded answers with your own fallback line
Grounded in the knowledge base you wrote, with your own fallback line whenever the answer is not in it.
One knowledge base, every visitor language
One chatbot for an international audience, with no per-language setup and no second knowledge base.
Name, greeting, colour and instructions
Including the free-text system prompt, which is where you set how the chatbot behaves rather than just what it knows.
Hostname allow-list, enforced server-side
Restrict the chatbot to hostnames you name. It starts empty, which allows any origin, so fill it in the day you go live.
The streaming widget
Shadow-DOM isolated, mobile-responsive, token-by-token replies, conversation kept across page navigation.
Four live dashboard tiles
Conversations, Messages, Fallback rate and Average messages per conversation run for every chatbot with no unlock. The four numbers that tell you whether the chatbot is earning its place are not behind a paywall — most comparison shoppers assume they are.
The live usage meter
Messages used against your total, with a bar that turns yellow when you are nearly out and red at zero, and a label that switches from Free trial to Message credits the moment you top up.
One-click knowledge-base export
Download your entire knowledge base as dated Markdown, grouped by category, whenever you want it. This is the free export and it is separate from the paid conversation export — your content is never held hostage.
Optional one-time unlocks
One credit spend each, per chatbot, permanent. Not subscriptions, and none of them are needed for the chatbot to work.
Conversation viewer + export500 credits once
Every transcript end to end, with three filter tabs — all conversations, the ones containing a fallback, and untagged replies. You can give any individual reply a thumbs-up or thumbs-down, and export the lot as Markdown in one click. The ratings are yours alone; visitors never see a rating control.
Trends + keyword analytics750 credits once
A 7-day message trend chart and the top 8 topics pulled out of visitor questions, with common words filtered out so the list reads as subjects rather than 'the' and 'and'. Read the keyword list as the gaps in your knowledge base — it is a writing brief, not a vanity chart.
Auto-learning1,250 credits once
It takes the replies you rated badly in the last week, pairs each with the question that triggered it, and drafts up to five new knowledge-base entries to close the gap. Nothing changes until you accept it: every draft is a pending suggestion, accept promotes it to a real entry, dismiss archives it, and where the correct answer is unknowable the draft writes a [FILL IN] placeholder instead of inventing one.
Weekly reports1,000 credits once
A digest of conversations, replies, fallback count and rate, your positive and negative ratings and the top topics, each measured against the previous week, with a short plain-language summary and one suggested action. You can run it on demand from the dashboard; the designed cadence is a Monday morning email. A week with no activity sends nothing rather than an empty report.
One more unlock sits at account level rather than on a single chatbot: Additional chatbot 1,250 credits once. Every account starts with one chatbot, and each slot you add is a separate chatbot with its own knowledge base, styling and domain list, sharing your account's credit balance.
What an AI chatbot costs when you only pay for replies
No subscription of any kind, no monthly minimum, nothing to cancel. You top up credits and spend them only when the chatbot answers someone.
One credit, one reply.
Visitor questions cost nothing. Only the chatbot's answer moves the counter, once, after the reply has finished streaming. Because it is one credit per reply, the credit number and the message number are the same number — there is no conversion to work out.
No monthly reset, no subscription clock.
One balance sits on your account and every chatbot draws from it. There is no monthly reset and no recurring charge — credits are simply valid for 12 months from purchase, and each pack you add keeps its own 12-month window. Stop topping up and you simply stop spending.
You start with 30 free messages and no card.
That covers writing the knowledge base, styling the widget, embedding it on your site and watching real answers come back. There is no card field in the signup flow to leave one in.
The three credit packs
Starter
$29
500 credits = 500 replies
Top up a low-traffic chatbot.
Growth
$99
2,500 credits = 2,500 replies
For a site with steady support volume.
Scale
Best value$299
10,000 credits = 10,000 replies
For high-traffic sites and busy inboxes.
The per-message figure is the number that matters, and it is on every card, so you can work out your own bill before you sign up rather than asking us for a quote.
What a balance is attached to
Every account starts with one chatbot, and additional slots are a one-time 1,250 credits each. Credits sit on the account, not on any single chatbot: two chatbots on the same login keep separate knowledge bases and settings, but they share one credit balance — and the same credits pay for feature unlocks.
Prices are listed here so you can budget before you start. Neither payment nor the app itself is open yet: nothing is charged today, and when ChatKit opens, sign-up and the free trial will need no card. Prices and availability may change before then. Terms of service.
Domain control, spend protection, and what happens at zero credits
Two questions decide whether a self-service signup happens: can somebody copy my snippet and spend my money, and what breaks when I run out. Both have specific answers.
Restrict your chatbot to your own domains
You list hostnames one per line, with an optional *. wildcard. example.com also covers www.example.com; *.example.com covers the apex and any subdomain. Whatever you paste — a full URL, a port, a trailing slash, mixed case — is normalised down to a plain hostname before it is saved, so a copy-pasted address from your browser bar works.
Enforcement is a server-side refusal on both the config load and the message send. A stolen snippet fails at widget load rather than on the first question, and because the check lives in the API rather than only in CORS headers, it also stops scripted abuse that ignores browsers entirely.
The list starts empty, which allows any origin, so add your domains the day you go live. This is a control you switch on, not one that is on for you.
Abuse cannot run up your bill
Rate limits are applied per visitor IP and per chatbot, per minute — 20 requests a minute from one visitor, 120 a minute across a single chatbot — and they are evaluated before the chatbot record, your knowledge base or the model are touched. Traffic that is going to be blocked never reaches anything that costs a credit.
The limiter is deliberately built to fail open on an infrastructure error. A database hiccup should never take a paying customer's chatbot offline, and every request that gets past the limiter still has to clear the credit check behind it.
Separately: every field on the public endpoint is validated before any database work happens, and a conversation id belonging to one chatbot can never read or write another chatbot's thread, even if somebody knows a valid one.
Running out pauses; it never deletes
At five or fewer remaining messages the dashboard meter turns yellow and tells you how many are left. At zero it turns red. That warning is in the dashboard — we do not send a low-balance email.
On your site the widget simply stops rendering. Visitors see nothing at all, rather than a broken bubble or an error message, and nothing is destroyed: your knowledge base, styling, unlocks, conversations and transcripts stay exactly as they were. Adding credits brings the widget straight back.
No compliance badges here on purpose — these are the mechanisms, named, so you can judge them. There is also our privacy policy.
Honest limits: what ChatKit does not do
Every chatbot page on the internet lists what the product does. Here is what ours does not, so you can decide before you spend an evening on it.
No crawler, no uploads, no imports
You cannot point it at your sitemap or drop in a PDF. Content is added through the entry form — or generated locally with the free /build-kb Claude Code prompt and pasted in.
Keep the knowledge base short and ordered
Only the first 5 knowledge-base entries in sort order reach the model, each capped at 2,000 characters. You can store more — they are listed, counted and exported — but they will not answer visitors. Write few, dense, well-sorted entries.
Short answers only, by design
Two or three sentences, no bullet lists and no headings, with a hard ceiling on length behind that. If you need a bot that outputs long formatted documents, this is the wrong tool.
Fixed position
The launcher sits in the bottom-right corner and cannot be moved.
No white-label
The panel carries a 'Powered by M.D.N Tech' link and there is no option to remove it, paid or otherwise.
A real script tag, not a tag manager
The snippet must be in your page HTML. Installing through a tag manager or an async loader is not supported or tested — if the widget misbehaves there, the fix is moving the tag back into the page HTML.
Visitors do not rate answers
Thumbs-up and thumbs-down live in your dashboard, for you. Auto-learning learns from your judgement, not from strangers'.
Auto-learning never edits your chatbot on its own
Every suggestion waits for you to accept it, and a suggestion that trips the injection checks needs a second, explicit confirmation before it can be accepted at all.
Conversations are stored, not discarded
Full transcripts, plus a random visitor id, the IP address the conversation started from and the page the chat started on. That retention is what makes transcripts, exports and analytics possible. See also our privacy policy.
No certifications or uptime guarantee to quote
We have no compliance badge to show you and we do not publish an uptime figure. What we do have are the named mechanisms in the previous section.
If none of that is a dealbreaker, 30 messages will tell you the rest.
Coming soonChatKit questions we get asked most
The behavioural questions — where the bubble sits, what counts as a credit, what happens when you run out, and what we keep.
Where does the chat bubble appear on my site, and can I move it?
The launcher is a 56-pixel circle fixed to the bottom-right corner of every page the script runs on, and it opens a 380-pixel panel above itself. The position is not configurable in ChatKit today. On screens 480 pixels wide or narrower the bubble shrinks to 50 pixels and the panel goes near-full-width so it does not cover your page.
Do visitors' questions cost credits, or only the replies?
Only the replies. A visitor can type as much as they like at no cost; the counter moves once, after the chatbot has finished answering, at one credit per reply. That is why the Messages tile on your dashboard and your credit balance always agree with each other.
What happens when my free messages or credits run out?
The widget stops rendering on your site, so visitors see nothing rather than a broken bubble or an error. Nothing is deleted: your knowledge base, widget styling, unlocked features, conversations and transcripts all stay exactly as they were. The dashboard warns you when five messages remain and turns red at zero, and adding credits brings the widget back immediately.
What does the chatbot do when the answer is not in my content?
It outputs the fallback message you wrote in the widget settings, word for word, instead of improvising an answer. Those fallbacks are counted and shown as a Fallback rate tile on your dashboard for every chatbot at no extra cost, so you can see how often visitors ask about something your content does not cover and write the missing entry.
How long are the answers, and how quickly do they appear?
Two to three sentences, by design: the chatbot is instructed to answer like a busy professional rather than write an essay, and there is a hard ceiling on reply length behind that instruction. The reply streams token by token, so text starts appearing while the rest is still being written, with an animated typing indicator until the first word arrives.
Does it remember what a visitor asked earlier?
Yes, within the same browsing session. The recent conversation is replayed to the model on every turn, so a follow-up like 'and to Germany?' is understood without repeating the original question. The visitor id, conversation id and recent messages are kept in the browser's session storage, so moving from one page of your site to another keeps the same thread.
Will the widget clash with my site's design or break my CSS?
No, in either direction. The widget renders inside a Shadow DOM whose host element resets all inherited styling, so your stylesheet cannot reach into the panel and the widget's styles cannot leak out onto your buttons or typography. You choose the primary colour, which drives the bubble, the header accent, the panel border, the send button and the visitor's own message bubbles.
Can I install it through Google Tag Manager or a script-injecting plugin?
No — installs through a tag manager or a script-injecting plugin are not supported or tested. The supported install is a literal script tag in your page HTML, just before the closing body tag, and it is the only path we debug against. If the snippet arrives any other way and the widget misbehaves, moving the tag into the page HTML is the first thing to try.
Can I remove the 'Powered by M.D.N Tech' link?
Not today. The panel carries a small 'Powered by M.D.N Tech' footer link, and there is no white-label option and no paid removal in ChatKit. If an unbranded widget is a requirement for you, this is the point to stop reading rather than the point to start a trial.
Do you store my visitors' conversations, and what exactly is saved?
Yes. Every visitor message and every chatbot reply is stored as a full transcript, together with a randomly generated visitor id that is not tied to any identity, the IP address the conversation started from, and the URL of the page where the chat started. That retention is precisely what makes transcripts, exports, fallback rate and keyword analytics possible. Our privacy policy is at mdntech.org/privacy.
What is the fastest way to build the knowledge base?
Run our copy-paste Claude Code prompt inside your own project — it is also packaged as the free /build-kb skill in ToolKit. It reads your code, docs, README and marketing copy and writes a single knowledge-base.md organised into ChatKit's own category headings, skipping any category it does not have enough material for rather than inventing content. You then paste each section into the matching entry, which takes minutes rather than an evening.
Can I test on a staging site before going live on my real domain?
Yes. The widget reads its settings from your account every time it loads, so you can embed it on a staging site while the domain allow-list is still empty, check it there, then add your live domains before launch. Bear in mind that an empty allow-list allows any origin, so filling it in is the last step before going live, not the first.
Anything else you want to check first: our privacy policy, the rest of the M.D.N Tech lineup, or more from our engineering blog.
Try it on your own content
30 free messages, no card and nothing to cancel — enough to write the knowledge base, style the widget, embed it on your site and watch real answers come back before you spend anything.
