How to add AI chat to your website in 2026

Step 1 - Decide what the bot should actually do

Skip this and your AI chat will disappoint everyone. Before picking a vendor, write down five specific questions a real visitor would ask. Not "what does the bot do" - what does a real customer who's never heard of you actually type into the chat?

Examples by industry:

• Dental clinic: "Do you take walk-ins?" "Do you accept BlueCross?" "How much for a root canal?" "What are your hours?" "Are you near the metro?"
• SaaS product: "Can I export my data?" "Do you have a free trial?" "Where are your servers?" "Do you support SSO?" "Can I cancel anytime?"
• E-commerce store: "When will my order ship?" "What's your return policy?" "Do you ship to Canada?" "Is this in stock in M?" "How do I track my order?"

Now ask yourself: can these questions be answered from content you already have on your website? If yes, an AI bot can do this with minimal setup. If no, you'll need to add a knowledge base (PDFs, FAQ articles, a help center) before the bot will be useful.

Step 2 - Pick the right vendor for your use case

There are 6-8 serious AI chat vendors in 2026. Most "best AI chat" lists score them all 9/10 and recommend whoever pays the highest affiliate. Here's the honest match-to-use-case:

If you have a small site, no support team, and want AI chat answering questions

Quick21 or Chatbase. Both are designed for the "just put a bot on my site" use case. Quick21 also includes voice and a flat-tier price; Chatbase is simpler but chat-only. We wrote a fuller 6-tool roundup if you want options.

If you have an existing support team using Intercom or Zendesk

Intercom Fin ($0.99 per resolution on top of $39-139 seat plans) or Zendesk AI. Switching cost outweighs the per-resolution price if you're already in the ecosystem. We have a detailed Quick21 vs Intercom Fin piece with three cost scenarios.

If humans on chat are your primary channel and AI is the deflection layer

LiveChat + ChatBot. LiveChat's 23-year polish on agent workflow is real. See our Quick21 vs LiveChat piece for the cost math.

If you're a European SaaS and GDPR-by-default matters

Crisp + Hugo. French company, EU defaults. AI lives on the $295/mo Plus tier. Detailed comparison.

If you want the cheapest option with reasonable AI quality

Quick21 has the most generous AI tier (2 months free, no credit card; AI chat + voice both included). Chatbase starts at ~$40/mo but is chat-only.

Step 3 - Sign up and configure the bot

This step's effort varies wildly by vendor.

With a modern conversational-setup vendor (Quick21)

1. Sign up at login.quick21.com - email + password, no credit card.
2. The Quick21 Builder bot greets you and asks for your website URL.
3. You paste the URL. The Builder crawls your homepage (~10 seconds).
4. It drafts a persona, welcome message, and 5-6 industry-specific FAQs in one chat turn.
5. You confirm or tweak. Total time: about 90 seconds.

With a forms-based vendor (Tidio, Crisp)

1. Sign up.
2. Multi-step admin wizard: welcome message, persona, FAQs, business hours, lead-capture fields.
3. Upload knowledge base sources (PDFs, URL, sitemaps, FAQ paste).
4. Configure routing rules and escalation.
5. Test the bot in a preview pane. Iterate. Total time: 30 minutes to a few hours.

With an enterprise vendor (Intercom + Fin)

1. Sign up for an Intercom seat plan ($39-139/agent/mo).
2. Connect your existing helpdesk or import tickets.
3. Fin learns from your resolved-ticket history.
4. Configure deflection rules, escalation paths, and Fin guidance.
5. Often involves an Intercom Solutions Partner or internal CS-ops person. Total time: days to weeks.

Step 4 - Add the embed snippet to your site

Every modern AI chat vendor ships a one-line script tag. The Quick21 version looks like:

<script src="https://login.quick21.com/widget.js" data-api-key="qk_YOUR_KEY" defer></script>

Paste it before the closing </body> tag on every page where you want the widget to appear. Specific platforms:

WordPress

Options, from least to most invasive:

• Code Snippets plugin - paste the script, set "Insert in footer." No theme changes needed.
• Child theme footer.php - paste just before wp_footer();.
• Header and Footer Scripts plugin - widely used; works fine.

Webflow

Site settings → Custom Code → Footer Code. Paste the script tag. Publish.

Shopify

Online Store → Themes → Actions → Edit Code → theme.liquid. Paste before </body>. Save. Test in incognito to verify - Shopify caches aggressively.

Wix / Squarespace / Framer

Each has a "custom code" or "code embed" setting. Paste the script in the site-wide footer slot. Publish.

Static site (Jekyll, Hugo, Eleventy, Astro)

Paste in your base layout template before </body>. Rebuild and deploy.

React / Vue / Next.js app

For Next.js, use the next/script component with strategy="afterInteractive" in your root layout. For Vite/Vue, append the script tag in your index.html before the closing body tag. For SPAs that need the widget on all routes, place the script tag in index.html - not in a route-level component.

Step 5 - Test before announcing

Most "AI chat is broken" stories trace back to skipping this step. A 10-minute pre-launch check catches 90% of issues.

Things to test:

1. Open the site in an incognito window. Make sure the widget loads without auth.
2. Ask 10 real customer questions. Use the list you wrote in Step 1. The bot should answer 7-8 of them accurately and gracefully say "I'll connect you with a human" for the other 2-3.
3. Test the handoff trigger. Type "I want to speak to a human" or "complaint." The bot should escalate, not loop.
4. Mobile layout. Open on a phone. The widget should be positioned correctly, the open button shouldn't cover key navigation.
5. Page-load impact. Run a Lighthouse / PageSpeed Insights check before and after. Widget bundle sizes range from ~12 KB (Quick21) to ~400 KB (Intercom); the heavier ones cost real load time.
6. Off-topic questions. Ask the bot to write a poem or tell a joke. It should politely refuse and redirect. A bot that happily writes poems is a prompt-injection waiting to happen.

Common things that go wrong

"The bot doesn't know basic facts about my business"

Usually a knowledge-base issue. If you skipped Step 1 and didn't add your services / pricing / hours, the bot won't know them. Add a KB or paste the relevant content as FAQs. If you're on Quick21, the homepage crawl picks up most of this automatically.

"The bot answers but invents details"

This is "hallucination" - the LLM filling gaps. Two fixes: (a) lower the bot's confidence threshold so it punts to a human instead of guessing, and (b) add more KB content covering the specific topic. Most vendors expose a confidence-min setting.

"The widget breaks my mobile layout"

Check the widget position setting - bottom-right is safest. If your site has a fixed-bottom mobile nav (common in e-commerce), set the widget to bottom-left or load it only on desktop.

"My bill went way up after a traffic spike"

You're on a per-resolution or per-conversation pricing model (Intercom Fin charges $0.99 per resolution). Switch to a flat-tier vendor (Quick21, Crisp) if your traffic is bursty.

"The bot keeps offering live chat but no one's online"

Configure business hours in the vendor's dashboard. Outside hours, the bot should collect contact info instead of promising a human will reply.

FAQ