Short answer: to add an AI chatbot to a plain HTML website, paste the chatbot's script tag just before the closing body tag on every page you want it on, then upload the files to your server. No build step, no framework, no plugin. It works the same on a static site, a hand-coded site, or anything that outputs HTML.
Where exactly does the script go?
Immediately before the closing body tag, at the bottom of your HTML document.
The structure looks like this: your head section, then your body with all your page content, then your chatbot script, then the closing body tag and the closing html tag.
Two reasons that position matters.
It doesn't block rendering. Scripts in the head can delay your page from painting. A chat widget is not the most important thing on the page, so it should load after your content. Your visitors see your site at full speed and the chat bubble appears a moment later.
The page is ready when it runs. By the time the script executes, the document exists, which is what the widget needs to attach itself to the page.
You can technically put it in the head, and it will usually still work. Don't. There's no upside and a real downside on slower connections.
How do you install it step by step?
1. Get your script tag. In Clerkzo, create a chatbot and copy the install snippet from your dashboard. It's one line with your unique chatbot ID in it. Copy it exactly, don't retype it.
2. Open your HTML file in a text editor. Any editor works. VS Code, Sublime, Notepad++, even Notepad at a pinch.
3. Find the closing body tag. It's near the bottom of the file. If your file is long, search for it.
4. Paste the script directly above it. Nothing else needs to change.
5. Repeat for every page. This is the part people forget. Static HTML sites don't have a shared layout unless you built one, so a five-page site means five pastes. Do them all, because you can't predict which page a visitor lands on.
6. Upload and test. FTP, Git push, drag into your host's dashboard, whatever your workflow is. Then load the live site in a fresh browser tab.
The bubble should appear within a second or two.
What if you have a lot of pages?
Pasting into fifty files by hand is not a plan. A few better options depending on your setup.
If you use a static site generator like Hugo, Eleventy, Jekyll, or Astro, you have a base layout template. Put the script in that layout once, before the closing body tag, and rebuild. Every page picks it up.
If you use server-side includes or PHP includes, add it to your shared footer include.
If you use a build step, add it to whatever produces your HTML shell.
If you genuinely have loose HTML files, a find-and-replace across the folder in VS Code will do it. Search for the closing body tag, replace with your script followed by the closing body tag. Back up the folder first. Obviously.
If none of that appeals, Clerkzo offers done-for-you setup. That's what it's for.
What can go wrong, and how do you fix it?
The widget doesn't appear at all. Check you're looking at the live uploaded file, not a local copy. Then hard refresh, or open a private window, because browsers cache HTML aggressively.
The script got mangled. Copying through a word processor, an email, or some chat apps converts straight quotes into curly ones, which silently breaks the tag. Delete it, copy fresh from the dashboard, paste into a plain text editor.
It works on one page and not others. You missed a page. Check each file has the script.
Console errors. Open developer tools on the live site and read the console. An error naming the widget URL usually points at a typo in the snippet or a content security policy blocking the domain. If you have a strict CSP, you'll need to allow the widget's domain.
It looks wrong or breaks your layout. This is the classic third-party widget problem: global CSS collisions. Clerkzo renders inside a Shadow DOM, so the widget's styles and your site's styles can't reach each other. If your custom site has aggressive global selectors, that isolation is what keeps things sane.
An ad blocker is hiding it. Test in a clean private window before assuming the install failed.
What should you do after it's live?
Installing is ten minutes. Making it earn its place takes a bit more.
Check what it was trained on. Clerkzo learns by crawling your own site. If your HTML site is thin, the answers will be thin. Upload knowledge files for anything customers ask about that isn't published, like service areas, lead times, or your pricing rules.
Test in the playground first. Run your ten most common customer questions before you point real traffic at it. Anything wrong, flag it and type the correct answer, and the fix applies permanently.
Set up lead capture. This is the part that turns a chatbot from a novelty into a channel. It can collect details conversationally, or show an in-chat form with your own custom fields. Leads land in an inbox with a New to Contacted to Qualified to Won/Lost pipeline, and you can be notified by email, webhook, or Telegram. See how to capture more leads from your website.
Style it. Widget Studio gives you 8 themes, light and dark, 3 shapes, and your brand color. A custom HTML site usually has a strong visual identity, so spend two minutes matching it.
Read the transcripts. The questions people ask that the bot can't answer are a free content brief for your website.
If you're still weighing whether this beats what you have now, chatbot vs contact form is the relevant comparison, and do I need a chatbot for my business is the honest version of the question.
Frequently asked questions
Does this work on a static site hosted on GitHub Pages, Netlify, or Vercel?
Yes. The script runs in the visitor's browser, so it doesn't care what serves the HTML. Static hosts are actually the easiest case, since you just commit the change and let the host redeploy.
Do I need to add the script to every single page?
Yes, unless you have a shared layout or include that generates every page. The script only runs on pages that contain it, so any page without it won't show the widget.
Will it slow my site down?
Placed just before the closing body tag, it loads after your content, so your page renders at its normal speed. That's the reason for the placement.