Do I need any framework or build tool to install ApnaAI on HTML?

No. ApnaAI is a single script tag you paste before in your index.html. Works on static HTML, Bootstrap templates, jQuery sites, plain PHP sites and any site where you control the HTML.

Will the chatbot work on a free GitHub Pages or Netlify static site?

Yes. ApnaAI loads from its own origin, so it works on GitHub Pages, Netlify, Vercel, Cloudflare Pages and any static hosting — free or paid.

Can I show the chatbot only on specific HTML pages?

Yes. Paste the script only in the HTML pages where you want the chat widget. Pages without the script will not show the bubble.

How to Add a Free AI Chatbot to a Plain HTML Website (5-Minute, Copy-Paste)

15 July 20267 min read

Add a free AI chatbot to any static HTML website in 5 minutes — copy-paste one ApnaAI script tag before </body> and your bot is live. No framework, no build, no coding.

Want this on your website today?

Train ApnaAI on your FAQs and embed a free chatbot in minutes.

Get free chatbot apnaai.online

Plain HTML is still everywhere in India — and it's the easiest to add a chatbot to

Many Indian small business sites are plain HTML — a static template hosted on Hostinger, GoDaddy, GitHub Pages, or a custom PHP site. Adding a free AI chatbot to plain HTML is the simplest of all integrations: one paste, no framework, no build step.

This guide shows you how to install ApnaAI on any HTML site in 5 minutes — copy, paste, done.

Why plain HTML is the easiest

No plugin, no app, no theme editor to learn
No build step (no Webpack, no Vite, no npm)
No framework conflict (works alongside Bootstrap, jQuery, Tailwind, anything)
One self-contained script tag — paste before </body>

Prerequisites

Access to edit your site's HTML (via FTP, cPanel File Manager, GitHub repo, or hosting dashboard)
Your ApnaAI owner ID (free — get it at apnaai.online → login)
Your knowledge base pasted into ApnaAI dashboard (FAQs, prices, hours)

If you have not trained your bot, follow the main setup guide first.

Method — paste before </body>

Open your index.html (or your main template / header-footer file) in any editor
Scroll to the very bottom of the file
Find the closing </body> tag
Just before </body>, paste your ApnaAI script:

<script src="https://apnaai.online/chatBot.js" data-owner-id="YOUR_OWNER_ID"></script>

Save the file
Upload back to your hosting (via FTP / cPanel / git push)
Open your live site in a new browser tab
The floating chat bubble appears bottom-right — test a question

Your final HTML should look like:

<!DOCTYPE html>
<html>
<head>
  <title>Your Business</title>
</head>
<body>
  <!-- your existing content -->

  <script src="https://apnaai.online/chatBot.js" data-owner-id="YOUR_OWNER_ID"></script>
</body>
</html>

Replace YOUR_OWNER_ID with your real ID

Common mistake: copying the script above without replacing the placeholder. Your real owner ID is in the Embed page of your ApnaAI dashboard after login. It is tied to your authenticated session.

Multi-page HTML sites

If your site has multiple HTML pages (index.html, about.html, services.html, contact.html):

For chatbot on every page → paste the script in your footer include (footer.php, partial.html, or whichever file is included at the bottom of every page)
For chatbot only on selected pages → paste the script only in those pages before </body>

Bootstrap and Tailwind HTML templates

ApnaAI works perfectly with Bootstrap, Tailwind, Bulma, Foundation and any CSS framework. The chat widget is self-contained — no CSS conflict, no class name clashes.

jQuery and vanilla JS sites

ApnaAI does not depend on jQuery or any library. It loads even on pages with no other JavaScript. No $ conflict, no window.onload timing issues.

PHP, ASP, JSP and other server-rendered sites

If your site renders HTML via PHP / ASP / JSP / Django templates / EJS / Pug, paste the script in your footer partial so it appears on every server-rendered page. The script tag is plain HTML — server-side rendering does not affect it.

Static site generators — Hugo, Jekyll, Eleventy, Astro

For static generators, paste the script in your base layout template:

Hugo: layouts/_default/baseof.html before </body>
Jekyll: _layouts/default.html before </body>
Eleventy: your base layout file before </body>
Astro: src/layouts/Layout.astro before </body>

Rebuild and redeploy — the chatbot appears on every generated page.

React, Vue, Next.js single-page apps

For SPAs, paste the script in your root layout's </body> (Next.js app/layout.tsx or Vue App.vue template). The chat widget persists across client-side route changes. See our WordPress guide for the same pattern in a CMS context.

Hosting platforms — where it works

ApnaAI works on every static hosting platform — free and paid:

GitHub Pages
Netlify
Vercel
Cloudflare Pages
Hostinger
GoDaddy shared hosting
Bluehost
Any cPanel hosting
Your own VPS / dedicated server

The script loads from apnaai.online — your hosting does not need any special config.

Verify the chatbot is working

Open your live HTML site in an incognito window
Click the floating chat bubble bottom-right
Type a test question — "What are your business hours?"
The bot replies in under 1 second
If no reply: check your knowledge base is saved in ApnaAI dashboard

Common issues and fixes

Chat bubble not appearing

You pasted inside a <p> or <div> block by mistake — paste raw before </body>
Browser cache — hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
You uploaded to wrong folder — usually public_html on cPanel

Bot replies "Please contact our customer support"

Your knowledge base in ApnaAI dashboard is empty — paste your FAQs and prices
Your question is not covered — add the answer in the dashboard, test again

Mixed content warning (https vs http)

If your site is HTTPS (it should be), the script loads from https://apnaai.online — no mixed content
If your site is still HTTP, get a free Let's Encrypt SSL from your hosting

SEO benefits of adding chatbot to HTML

Dwell time up 30-60 seconds as visitors chat instead of bouncing
Lead capture 24x7 — even at 11 PM when your office is closed
Lower support calls — repetitive FAQs handled by the bot
Helpful content signal — Google sees engaged visitors, not bounces

Mobile-first important

Most Indian traffic is mobile. ApnaAI chat widget is mobile-optimized — floating bubble, full-screen chat on phone, fast load on 4G. Test on real Android Chrome, not just desktop.

Speed and Core Web Vitals

ApnaAI script is <20KB and loads async — it does not affect your Lighthouse score or LCP. No layout shift, no render-blocking. Your HTML site stays fast.

Next steps after install

Train 15 FAQs in your ApnaAI knowledge base
Add industry template from our niche guides — restaurant, CA, clinic, gym, salon, real estate and 40+ more
Test on mobile Chrome
Review missed questions weekly and update knowledge base

Get started free

Open ApnaAI, login, grab your owner ID and paste the script before </body> in your HTML before dinner.

For the full setup walkthrough, see How to add a free AI chatbot to your website.

Frequently asked questions

Do I need any framework or build tool to install ApnaAI on HTML?: No. ApnaAI is a single script tag you paste before </body> in your index.html. Works on static HTML, Bootstrap templates, jQuery sites, plain PHP sites and any site where you control the HTML.
Will the chatbot work on a free GitHub Pages or Netlify static site?: Yes. ApnaAI loads from its own origin, so it works on GitHub Pages, Netlify, Vercel, Cloudflare Pages and any static hosting — free or paid.
Can I show the chatbot only on specific HTML pages?: Yes. Paste the script only in the HTML pages where you want the chat widget. Pages without the script will not show the bubble.