Stepthrough Start free

How do I add an AI chat widget to my website?

Build and test the chatbot in a tool such as Chatbase, then open its deploy settings, turn on the chat bubble, limit it to your own domain, copy the short script it gives you and paste it into your website (or send it to whoever runs the site). After it goes live, read the chat logs and fix weak answers. The free lesson Chatbase: Answer Customer FAQs with an AI Agent covers every step, from the FAQ file to the widget code.

Getting the widget on the page is the quick part. What makes it safe to switch on is the testing before and the log reading after. This page is about embedding and going live. For building the knowledge behind it, see build an AI support bot.

What are the steps?

  1. Build and train the bot on your FAQ, policies or site pages.
  2. Tell it to answer only from that and to give a contact route when it cannot help.
  3. Test it in the tool's preview. Ask a real question, then one it should not know.
  4. Get the widget code. Look for Deploy, Publish, Embed or Widget code in the tool.
  5. Turn the widget on and lock it to your domain, if the tool offers that, so nobody else can put your bot on their site.
  6. Paste the code into your site. Usually a script that goes just before the closing body tag on every page. Many site builders have a place for custom code, and some tools have plugins for platforms like WordPress.
  7. Check it on the live site, on a phone too.
  8. Read the chat logs weekly and fix the answers that missed.

What does this look like in a real lesson?

In the Chatbase lesson, a made-up five-person bookkeeping firm trains an agent on a 22-question FAQ file, replaces Chatbase's default instructions, adds guardrails including "only answer from the training data", and keeps the Temperature at Reserved. In the Playground it answers "Are you open on a Saturday in March?" correctly from the FAQ, and answers "Do you work with nonprofits?" with "I'm not sure about that one" and the firm's contact details.

Then you go live: click Deploy, choose Website widget, click Enable chat bubble (it is off until you do), turn on Only allow embedding the agent on specific domains with your own domain, and copy the script under Widget setup. After launch, Activity, then Conversations, shows every chat with a confidence score. You click Revise answer on the nonprofit reply, write the right answer, and the next time the agent answers it properly.

Which tool should I use?

  • Chatbase for an FAQ agent trained on your files and pages, with chat logs and revisable answers.
  • tawk.to if you also want live chat with your team. In tawk.to: Answer Website Questions After Hours, you copy the widget code from Administration, then Chat Widget, or install the official WordPress plugin, switch on AI Assist, build an AI agent from your website, tick Exact prices under "Don't state these as fact", and set an offline form for when nobody is there.
  • Jotform AI Agents if you already use Jotform. In the Jotform lesson, Publish, then Chatbot, gives you Copy Code for the embed.
  • Lovable if Lovable built your site. In Add an AI chatbot to your site, you ask for the assistant in plain English, test it in the preview (it does not invent a service the salon does not offer), and click Publish to put it on the live site.

If you run n8n, you can also put an n8n chat on a public page, covered in the n8n public chat post. For a wider comparison, see which AI chatbot builder can I put on my website without coding.

What mistakes should I avoid?

  • Going live without the "I don't know" test. A bot that guesses prices or policies creates promises you have to keep.
  • Leaving domain limits off. Lock the widget to your site when the tool allows it.
  • Pasting the code on one page only. Put it in the site-wide footer or template so it shows everywhere.
  • No route to a person. Every bot needs an email, phone or form for what it cannot answer.
  • Never reading the logs. The first weeks show you exactly which answers to fix.

Key takeaways

  • Build and test the bot first, then get its widget code from the deploy or publish screen.
  • Turn the widget on and limit it to your domain.
  • Paste the script site-wide, usually before the closing body tag.
  • Give visitors a way to reach a person.
  • Read the chat logs and fix answers every week.

Frequently asked questions

Do I need a developer to add the widget?

Usually not. Most site builders have a box for custom code, and tawk.to has a WordPress plugin. If someone else manages your site, send them the code.

Will the chat widget slow my site down?

It adds a small script. Check your page on a phone after you install it, and remove any old chat widgets so only one loads.

Can the bot hand over to a real person?

Some tools, like tawk.to, let your team join a chat. Others give the visitor an email or phone number. Decide this before you go live.

Learn it hands-on

Free, interactive lessons: you do every step yourself in a practice copy of the real tool, it checks your work as you go, and nothing touches your real accounts.

Start the free lesson

AI tools in this answer

Each one in the Stepthrough AI tools directory: what it does, who it is for and the free lesson where there is one.

The full AI tools directory

Plain-English definitions, each with an example from a free lesson.

The full AI glossary

All free prompt templates

More questions: How do I... · All AI questions · All free tutorials