Adding an AI chatbot to a website is now a 30-minute job, not a 3-month project. The question isn't whether to add one — it's which one, and how to set it up so it's genuinely useful to visitors instead of an annoying chat bubble that says "sorry, I didn't understand that."
This guide walks through the practical steps: picking a platform that won't lock you in, embedding the widget, giving the AI real knowledge to work from, setting up the handoff to humans, and the metrics to watch once it's live. Everything below is what we tell teams rolling out Dchat for the first time, but it applies to any modern AI chat platform.
Step 1: Pick a platform with the controls you actually need
The AI chat space split into two camps in the last two years. On one side: big suites like Intercom that bundle AI into a broader service platform with per-resolution billing. On the other: focused products like Dchat, Crisp, and Tidio that ship AI chat as the main thing.
Three questions separate the winners from the rest:
- Who owns the AI key? If the platform won't let you bring your own OpenAI key, you're stuck with their markup on AI usage forever. This is the single biggest lock-in risk. Only Dchat lets you switch between managed AI and a customer-managed key without changing products.
- Is pricing flat or metered? Intercom Fin charges $0.99 per AI resolution on top of seats. At 1,000 resolutions a month, that's roughly $1,000 more than a flat-priced competitor at the same traffic. Our pricing calculator makes the math visible.
- Is there a self-hosted path if you need one later? Almost every vendor is cloud-only. If your company ever ends up in a regulated industry, needs EU data residency, or acquires a division that does, you'll want to know there's a self-hosted option you can move to without replatforming.
Step 2: Embed the widget (it really is one script tag)
Modern AI chat widgets install with a single script tag. For Dchat, it looks like this:
<script src="https://widget.dchat.com/loader.js"
data-api="https://api.dchat.com"
data-widget-token="YOUR_WIDGET_TOKEN"></script>
Paste that into your site's shared layout — in WordPress it goes in the theme footer, in Shopify it's theme.liquid, in a React app it's the root index.html. Once it's in, you never touch it again. Every future change — branding, AI settings, routing rules, knowledge base — happens in the dashboard.
One thing most guides miss: the widget token is workspace-scoped, not site-scoped. If you run multiple sites, create a separate site inside the same workspace for each one and use that site's token. Otherwise conversations from different properties get mixed in one inbox, which gets ugly fast.
Step 3: Feed the AI real knowledge before it talks to anyone
This is the step that separates useful AI chatbots from generic ones. An AI with no context gives generic answers. An AI grounded in your actual docs, pricing, and product copy gives answers a human support agent would sign off on.
Three ways to feed knowledge into a modern AI chat platform, in order of effort:
- Site crawl (lowest effort). Point the crawler at your site and it pulls page content into the knowledge base automatically. Good for a first day. Refreshes on a schedule.
- URL import. Drop in specific URLs — help-center articles, pricing page, FAQ, terms. Lets you control exactly what the AI sees.
- Manual articles (highest quality). Write short answers to the 20 questions your support team gets most. This is where an AI goes from "helpful" to "feels like an expert."
Most teams do crawl + URL import on day one, then add manual articles over the first two weeks as real conversations expose gaps. That's the pattern we see with every industry we work with.
Step 4: Set up the handoff to real humans
AI chatbots that can't hand off cleanly lose more customers than they help. Two questions should drive your handoff setup:
What triggers a handoff? Good defaults: visitor explicitly asks for a person, message matches a handoff keyword (refund, cancel, escalate, manager), conversation length exceeds a threshold, AI message cap is hit. Dchat handles all four out of the box.
What does the agent see when the conversation lands? This is the quiet differentiator. Bad AI chat platforms drop the agent into a conversation with no context, making the visitor repeat themselves. Good ones — including Dchat's platform — preserve the full transcript, highlight the moment AI hit its limit, and show the visitor's identity if known. Same-thread handoff is the term of art.
Step 5: Watch three metrics, ignore the rest
Most dashboards show 40 metrics. Three actually matter:
- Deflection rate: percentage of conversations AI resolves without a human. Target 60–80% for standard ecommerce/SaaS. Below 40% means your knowledge base is thin.
- Handoff-to-resolution time: from the moment AI hands off to the moment a human closes the conversation. Below 5 minutes is excellent; above 30 minutes means your routing or staffing needs work.
- CSAT on AI-only conversations: visitor ratings for conversations that never touched a human. If this drops below 4/5, visitors are walking away unhappy even when the bot "resolved" the question — dig in.
Common mistakes to avoid
The five mistakes we see most often, in rough order of severity:
- Launching with zero knowledge articles. The AI hallucinates. Trust breaks. Clean it up by seeding the KB before you go live.
- Letting AI handle billing and account questions. Always route these to humans — AI can't actually make account changes, and attempting to answer leads to confused visitors.
- Over-branding the widget. Visitors don't care what the chat is called. They care whether it answers. Keep the launcher small, the copy short.
- No proactive triggers. A chat that only responds when clicked leaves 80% of possible conversations on the table. Set a trigger on your pricing page at the 30-second mark.
- Ignoring the first 20 AI-only conversation transcripts. Read every one in the first week. You'll find five patterns you can fix with one article each.
What it looks like when it works
A working AI chatbot on a website should feel invisible when it's doing its job. Visitors ask a question, get a grounded answer with a source citation, and move on. When the AI hits a boundary, a human picks up in the same thread and the visitor doesn't feel the seam.
At that point, your support team shifts from answering the same 15 questions a day to focusing on the genuinely hard ones. That's the actual ROI — not the deflection number, but the change in what your team spends their day on.
Try Dchat free
Free forever for one site, no credit card. Install the AI chatbot in 5 minutes, see the full AI-to-human handoff flow, and try the knowledge base auto-crawl before you spend a dollar.