๐ŸŽ‰ Free 7-day trial ย ยทย  No credit card required
nDesk

Explainers ยท 9 min

How to add an AI chatbot to your website

Adding an AI chatbot to a website takes four steps: decide what it should answer from, decide what it must never answer on its own, paste one script tag, and test it with real questions before customers do. The install is the easy part โ€” usually five minutes on any platform. The two decisions before it are what determine whether the chatbot helps your customers or quietly makes things up in front of them.

Step 1: Decide what the chatbot answers from

A support chatbot is only as good as the material it answers from. Modern AI chatbots don't need to be "trained" in the machine-learning sense โ€” they retrieve from the sources you connect at the moment a question is asked, and answer from what they find. So the first job is picking those sources.

Start with whatever your team already answers from: a help centre or docs site is the best first source, because it's already organised around real customer questions. Past resolved tickets are the most underrated second source โ€” they show how customers actually phrase things. A sitemap crawl is the fastest way to connect a whole site, but exclude careers pages, old blog posts and marketing pages before the first crawl, or they'll dilute the answers.

  • Help centre or docs site โ€” connect first
  • Past resolved tickets โ€” connect early; they hold the real phrasing
  • Product and pricing pages โ€” useful for pre-sale questions
  • Changelog โ€” lets it answer "has this been fixed yet?"

Step 2: Decide what it must never answer alone

Before the chatbot goes live, decide where it should stop. Good AI chatbots give each answer a confidence score and let you set a threshold below which the bot hands off to a person instead of guessing. Set stricter thresholds for anything involving money, refunds or contracts, and looser ones for low-stakes questions like opening hours or password resets.

Some topics shouldn't be automated at all โ€” cancellations tied to a retention conversation, safety complaints, legal or compliance questions. Mark those as never-automate so they route straight to a human however confident the bot is. And make sure any customer who asks for a person gets one immediately.

Step 3: Install the chat widget

Almost every AI chat widget installs the same way: one script tag pasted before the closing </body> tag of your site. It loads asynchronously, so it shouldn't slow your page down. Where that tag goes depends on your platform:

  • WordPress: Appearance โ†’ Theme File Editor โ†’ footer, or a header-and-footer plugin like WPCode if you'd rather not edit theme files.
  • Shopify: Online Store โ†’ Themes โ†’ Edit code โ†’ theme.liquid, just before the closing body tag.
  • Webflow: Project Settings โ†’ Custom Code โ†’ Footer Code, then publish (custom code doesn't run in the Designer preview).
  • Wix: Settings โ†’ Custom Code โ†’ Add Custom Code, load on All pages, place in Body โ€“ end.
  • Squarespace: Settings โ†’ Advanced โ†’ Code Injection โ†’ Footer (needs a Business plan or above).
  • Ghost: Settings โ†’ Code injection โ†’ Site Footer.
  • Framer: Project Settings โ†’ General โ†’ Custom Code โ†’ End of <body> tag, then publish.
  • React, Next.js, Vue, Svelte, Angular: add the script tag to your root layout or index.html โ€” no SDK needed.

Step 4: Tell it who it's talking to

If visitors are signed in, pass their email, name and user ID to the widget. The chatbot can then look up an order or a plan instead of asking the customer questions your app already knows the answers to โ€” which is the difference between a chatbot that feels like a search box and one that feels like a colleague.

Step 5: Test it with your hardest real questions

Before announcing anything, open your last month of tickets and ask the chatbot twenty of the questions you actually received โ€” including the awkward ones. Check three things for each: did it answer correctly, did it cite the article it used, and did it hand off when it should have? A wrong answer at this stage almost always points to a missing or ambiguous article, not a broken bot; fix the article and ask again.

  • Ask a question your docs don't cover โ€” it should say so and offer a person, not improvise.
  • Ask about refunds or billing โ€” it should be conservative or hand off.
  • Type "talk to a human" โ€” it should hand off immediately.
  • Ask in another language โ€” check the reply is in that language.

What "free" AI chatbots usually leave out

Plenty of tools advertise a free AI chatbot. The free tier is usually capped at a small number of AI messages a month, carries the vendor's branding, and sometimes leaves out human handoff entirely โ€” which means once the cap is hit or the bot doesn't know, the customer hits a dead end. When comparing, check what happens at the cap, whether handoff is included, and whether you're billed per AI answer, per conversation or per "resolution" โ€” the last one gets more expensive as the bot gets better.

nDesk has a 7-day free trial with 250 AI answers and no card required, then plans from $29 a month with 500 AI answers included and human handoff on every plan.

See it on your own knowledge base

Seven days free, no card. Connect what you already have and see what it answers.