You can add an AI chatbot to a website built with plain HTML in about five minutes: create the bot from your documents, copy one script tag, and paste it before </body>. This guide walks through each step, the options you can set on the tag, and how to check it's working. The same snippet works on any site or builder that lets you add custom code.
What do you need before you start?
- Your documents: an FAQ, price list, policies, product information or handbook. PDF, DOCX, TXT, Markdown, CSV, HTML and JSON files work (up to 50 MB each, 25 per upload), and you can paste text too.
- Access to your site's HTML, or to a shared footer or layout file used by every page.
- An InstantKnowledgeBot account. It's free to sign up, with no card. Confirm the 6-digit code we email you and you're in.
Step 1: How do you create the chatbot from your documents?
- In the dashboard, click New bot.
- Start from a template or blank. Templates exist for 10 industries, such as dental, real estate and e-commerce, and pre-fill the welcome message, starter questions, instructions and lead capture settings. See the templates.
- Add knowledge: drop your files or paste text.
- Customize: set the bot name and accent color. We suggest a name, greeting and starter questions from your documents.
- Choose the AI engine: hosted Claude (included in your plan) or your own API key.
- Click to create the bot, then try it in the Test tab.
Ask it ten real questions your customers ask, plus one it shouldn't be able to answer, and check it says it doesn't know. If an answer is off, improve the document rather than the bot. Detailed advice: how to train a chatbot on PDFs.
Step 2: Where do you find the embed code?
Open the bot and go to the Embed & share tab. You'll see three options:
| Option | What it does | Best for |
|---|---|---|
| Chat bubble | A floating launcher in the corner of every page | Most websites |
| Inline iframe | The chat embedded inside a page | Help, FAQ and contact pages |
| Share link | A full-page chat at its own URL, with a QR code | Emails, social bios, print |
Choose Chat bubble and copy the snippet. It looks like this, with your bot's ID:
<script src="https://instantknowledgebot.com/widget.js" data-bot="YOUR_BOT_ID" defer></script>Step 3: Where do you paste the chatbot code in HTML?
- Open the HTML file for your site, or the shared footer template that every page includes.
- Paste the snippet just before the closing
</body>tag:
<!-- ...your page content... -->
<script src="https://instantknowledgebot.com/widget.js" data-bot="YOUR_BOT_ID" defer></script>
</body>
</html>- Save and upload or deploy the file.
If your site has many separate HTML files without a shared footer, paste the snippet into each page where the bubble should appear. Pages without the snippet won't show the chat.
Step 4: How do you check the chatbot is working?
- Open your website in a new browser tab and refresh.
- Look for the chat bubble in the bottom corner. Click it and ask a question.
- Back in the dashboard, the bot's overview shows where it's installed once it has been loaded on a site, plus messages and conversations.
If the bubble doesn't appear:
- Check the page source (right-click → View source) and search for
widget.js. If it's missing, the file you edited isn't the one being served, or a cache needs clearing. - Check the bot ID matches the one in your dashboard.
- Check your Content Security Policy, if your site has one. It needs to allow scripts and frames from
https://instantknowledgebot.com. - Disable the bot? A bot that's disabled in the dashboard won't answer.
Which options can you set on the script tag?
The snippet works as-is. Optional attributes let you adjust it without touching the dashboard:
| Attribute | Example | Effect |
|---|---|---|
data-position | data-position="left" | Puts the bubble bottom-left instead of bottom-right. |
data-open | data-open="true" | Opens the chat automatically when the page loads. |
data-color | data-color="#0A7CFF" | Overrides the accent color for this page. |
You can also set the widget position, accent color, welcome message and up to six starter questions in the bot's Settings tab; those apply everywhere the bot is installed.
How do you embed the chat inside a page instead?
For a help center or contact page, the inline iframe often works better than a bubble. Copy the Inline iframe code from Embed & share and paste it where the chat should appear:
<iframe src="https://instantknowledgebot.com/embed/YOUR_BOT_ID" width="100%" height="640"
style="border:0;border-radius:16px;max-width:720px" title="Chat with us" allow="clipboard-write"></iframe>More on inline embeds, share links and QR codes: embed a chatbot with an iframe or share link.
Using a site builder or framework instead?
The same snippet works everywhere, but each platform has its own place for custom code. Follow the guide for yours: WordPress, Shopify, Wix, Squarespace, Webflow or React and Next.js.
What should you do after installing?
- Turn on lead capture (Pro and Agency, and during the free trial) so interested visitors can leave their details. See set up chatbot lead capture.
- Set a fallback message with your contact details for questions the bot can't answer.
- Check knowledge gaps weekly at first, and add answers to your documents.
The free plan includes one bot and 100 hosted AI messages a month; see the pricing page for higher limits.
Frequently asked questions
Do I need to know how to code to add the chatbot?
No. You copy one line from your dashboard and paste it into your page's HTML, the same way you'd add an analytics snippet. If you can edit a footer, you can install it.
Will the chatbot slow down my website?
The script tag uses defer, so it loads without blocking your page from rendering. The chat opens in an isolated panel, so your site's styles aren't affected.
Can I put the bubble on the left side?
Yes. Add data-position="left" to the script tag, or set the widget position in the bot's settings. Add data-open="true" to open the chat automatically.
Do I need to change the code when I update the bot's knowledge?
No. Knowledge, name, greeting and color changes apply to the live bot immediately. The embed code stays the same.
Can I put the chat inside a page instead of a bubble?
Yes. Use the inline iframe code to place the chat inside a help or contact page, or share the full-page chat link.
Turn your docs into an AI chatbot today.
Free plan forever, no card needed. Upload your files and get a bot that answers from them in under a minute.
Last updated: · InstantKnowledgeBot