TL;DR
To add HTML live chat to a static website, create a Knocket widget, copy the async embed script from the console, paste it before </head> or </body>, publish your HTML files, then test the visitor-message-to-reply loop. Knocket is built for indie developers and early teams that need a lightweight way to catch real user messages, not a CRM or complex support suite.
Quick setup:
- Sign in to Knocket.
- Configure your widget color, welcome message, avatar, and offline text.
- Copy your full script from Knocket installation settings.
- Paste it into your static HTML template.
- Send a test message as a visitor.
- Reply from the Knocket Inbox, Telegram notification, or email flow if connected.
Knocket is 100% free forever, with no ads and no seat limits.
What HTML Live Chat Is for Static Websites
HTML live chat is a small chat widget embedded into a website with a script tag. On a static website, that usually means a floating site-wide chat button that loads on every page and lets visitors send a message without your site needing a backend.
This is different from the “chat UI” examples you may see in tutorials. W3Schools has useful front-end examples for CSS chat message layouts and popup chat windows, but those are mainly interface patterns. They do not provide the full message routing, inbox, notification, and reply loop a real live chat widget needs.
For a static website, the practical requirements are:
| Requirement | Why it matters |
|---|---|
| Copy-paste install | Static sites often have no backend or app server |
| Async loading | The widget should not block your page render |
| Site-wide placement | Visitors may contact you from docs, pricing, blog, or landing pages |
| Real inbox | You need somewhere to read and reply |
| Notifications | Early users should not wait because you missed a tab |
| No complex setup | Indie developers should not spend a day configuring support software |
Knocket focuses on that simple job: help early visitors reach the person building the product.
When a Simple Embed Code Is the Best Option
A simple embed code is the best option when your site is mostly static HTML and your main goal is to make yourself reachable.
Use an HTML chat widget when:
- You run a landing page, waitlist, docs site, blog, portfolio, or open-source project page.
- You want a site-wide chat button without building a messaging backend.
- You are still validating the product and want to talk to the first 100 users.
- You do not need a CRM, ticketing workflow, or enterprise routing rules.
- You want customer messaging for static pages without adding npm packages or changing your hosting stack.
This works well for GitHub Pages, Netlify, Vercel static output, Cloudflare Pages, Carrd, Framer, Webflow, Ghost, and plain HTML uploaded by FTP.
Performance still matters. MDN’s documentation on the async script attribute explains that async scripts are fetched in parallel and executed when available. Google’s web.dev guidance on third-party JavaScript also recommends loading third-party scripts carefully. That is why Knocket’s install snippet uses async.
How Knocket Works on HTML Pages
Knocket loads through one script tag. Once installed, the visitor sees a floating contact button. When they send a message, Knocket routes it to your Knocket Inbox and optional notification channels such as Telegram or email.
The flow is simple:
- Visitor opens your static HTML page.
- The Knocket script loads asynchronously.
- The chat button appears.
- Visitor sends a message.
- You receive it in Knocket Inbox and notifications if enabled.
- You reply.
- The visitor sees your response in the same chat thread.
You can start from the Knocket website, then manage your widget from the Knocket console. If you also want a no-code contact link for your social bio, email signature, or waitlist, create a Knocket Contact Page.
Knocket is intentionally lightweight. It gives early products the contact layer they need: Web Widget, Contact Page, Unified Inbox, and Telegram/email notifications.
Step-by-Step Guide to Adding the Knocket Embed Code
Before you edit your site, prepare these items:
- Access to your static website files or site builder custom code area.
- A Knocket account.
- Your widget identifier from the console.
- Permission to deploy or publish the site.
- A second browser or incognito window for testing as a visitor.
1. Create your Knocket widget
Go to Knocket and sign in. In the console, create or open your Web Widget setup.
Configure the basics:
- Theme color
- Welcome message
- Avatar
- Language
- Offline message
- Notification preferences
For early-stage products, the best first message is direct and human, such as: “Hi, I’m building this product. Ask me anything.”
2. Copy the install script
Open the Knocket installation page and copy the full script generated for your account.
The generic form looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Static Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Knocket HTML live chat widget -->
<!-- Replace YOUR_ID with the identifier from your console -->
<script
src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID"
async>
</script>
</head>
<body>
<main>
<h1>Your product landing page</h1>
<p>Explain what you are building here.</p>
</main>
</body>
</html>
Use the full code from your console, not a guessed identifier. YOUR_ID must match the identifier assigned to your widget.
3. Paste it before </head> or </body>
For most static sites, paste the script before the closing </head> tag. If your static site generator has a shared layout file, add the script there instead of editing every page manually.
Common locations:
| Site type | Where to add the Knocket script |
|---|---|
| Plain HTML | Before </head> in every page, or in a shared template |
| Astro | Main layout file, inside <head> |
| Next.js static export | Root layout or app document pattern using a script strategy |
| Nuxt static site | Global app/layout head config |
| Eleventy | Base layout, usually _includes/layout.* |
| Hugo | Base template, often layouts/_default/baseof.html |
| Jekyll | Default layout, often _layouts/default.html |
| Webflow | Project Settings → Custom Code → Head code |
| Framer | Site Settings → Code → Head |
| Carrd | Site Settings → Embeds → Header |
| Ghost | Code Injection → Site Header |
4. Publish your site
Deploy the updated files as you normally would. After publishing, open your live URL, not only your local preview. Some site builders strip or delay custom scripts in preview mode, so the live page is the real test.
Adding Chat Across Multiple Static Pages
For a one-page site, pasting the Knocket script once is enough. For a multi-page static website, use one shared source of truth.
Bad approach:
- Paste the script manually into
index.html. - Forget to add it to
pricing.html. - Add a different version to
docs.html.
Better approach:
- Put the script in a shared layout, header partial, or site-wide custom code area.
- Deploy once.
- Confirm the button appears on key pages.
For a small hand-coded site with repeated HTML files, you can keep the script consistent by creating a reusable snippet in your build process or editor template:
<!-- shared-head.html: paste into every page head during build -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/site.css">
<script
src="https://trtc.io/knocket-sdk/sdk.js?identifier=YOUR_ID"
async>
</script>
<title>Your Page Title</title>
<meta name="description" content="Your page description">
If you use a static site generator, place this in the global layout instead. The goal is simple: one Knocket HTML embed, loaded everywhere a visitor might decide to contact you.
Also think beyond the widget. If you need a shareable contact link for places where you cannot add JavaScript, use Knocket Contact Page. It gives you a no-code page with live chat and your configured links.
Styling and Placement Tips for a Better Visitor Experience
A live chat button is small, but its placement affects whether visitors use it.
Use these rules:
| Tip | Reason |
|---|---|
| Keep the button visible on landing, pricing, docs, and contact pages | These are high-intent pages |
| Avoid covering cookie banners or checkout buttons | Competing fixed elements create frustration |
| Write a human welcome message | Early users want to know someone real is listening |
| Set an honest offline message | Better to set expectations than appear unresponsive |
| Test on mobile widths | Floating buttons can collide with mobile nav or bottom bars |
| Do not add multiple chat widgets | Two chat buttons look broken and split messages |
For early products, the welcome message should sound like the founder, not a corporate queue.
A good example:
“Hey, I’m Daniel. If you’re trying this page and something is unclear, send me a message.”
A weak example:
“Welcome to our customer service portal. A representative will be assigned shortly.”
Knocket works best as a real communication layer between builders and visitors. You can customize the widget in the console, then keep your site CSS focused on your actual page. Avoid overriding the embedded widget with fragile CSS hacks unless you have a specific reason.
For more context on script behavior, the HTML Standard section on script processing is the underlying browser reference, while MDN’s script documentation is usually easier to apply during implementation.
FAQ
Q: Is Knocket an HTML chat widget?
Yes. For static websites, Knocket works as an HTML chat widget installed with a copy and paste chat script. You paste the script into your page or global layout, and Knocket loads the floating chat button.
Q: Do I need a backend server?
No. Your static website does not need a backend to receive messages. Knocket handles the contact widget, message routing, inbox, and reply flow.
Q: Can I add Knocket to plain HTML files?
Yes. Paste the script before </head> or </body> in your HTML file. For multi-page sites, use a shared layout or repeat the same script consistently.
Q: Will the script block my static website?
The Knocket script uses async, so it is designed not to block initial HTML rendering. You should still test your published page with browser dev tools, especially if you already load many third-party scripts.
Q: Can visitors contact me when I am not in the console?
Yes, if you enable notification channels. Knocket can route messages into the unified inbox and notify you through supported channels such as Telegram and email.
Q: Is Knocket free?
Yes. Knocket is 100% free forever, with no ads and no seat limits.
Q: Is this the same as building a popup chat window with CSS and JavaScript?
No. A CSS/JavaScript popup tutorial gives you the front-end shape of a chat window. Knocket gives you the working contact flow: widget, inbox, notifications, and replies.
How to Test Your Chat Widget Before Publishing
Do not stop after seeing the chat button. Test the full loop.
Use this checklist:
- Open your published site in an incognito window.
- Confirm the chat button appears on desktop.
- Resize to mobile width and confirm it does not cover navigation or key buttons.
- Send a visitor message.
- Check your Knocket Inbox.
- Check Telegram or email notifications if enabled.
- Reply from the inbox or configured notification flow.
- Return to the visitor window and confirm the reply appears.
- Test a second page, such as pricing, docs, or blog.
- Check the browser console for obvious script errors.
If the widget does not appear:
- Confirm you copied the full script from Knocket installation settings.
- Confirm the identifier is not still
YOUR_ID. - Confirm your site builder allows custom scripts.
- Confirm you published the live site, not only saved a draft.
- Check whether a strict Content Security Policy blocks third-party scripts.
- Check whether an ad blocker or privacy extension is hiding chat widgets during your local test.
For Content Security Policy issues, review MDN’s Content Security Policy guide. Static sites using strict CSP headers may need to allow the script source used by your Knocket embed.
Final Checklist for HTML Website Chat Setup
Before you call the setup done, verify these items:
| Item | Done? |
|---|---|
| Widget created in Knocket | |
| Theme color and welcome message configured | |
| Full script copied from the console | |
Script pasted before </head> or </body> |
|
| Site-wide layout updated for all static pages | |
| Live site published | |
| Desktop test passed | |
| Mobile test passed | |
| Visitor message received | |
| Reply displayed to visitor | |
| Telegram or email notifications tested if enabled | |
| Contact Page created if you need a shareable link |
That is the complete HTML live chat setup for a static website: one async script, one real inbox, and a direct way for early users to reach you. If you are building toward your first 100 users, try Knocket at https://knocket.trtc.io/.
