Free Live Chat Widget for HTML — Knocket

Add a live chat widget to a plain HTML website with one script tag. Knocket gives visitors a low-friction way to start a conversation while messages are collected in one inbox and can be routed to Telegram.

View the live demo · Get your installation code

What this example shows

• A complete static HTML page with the Knocket SDK installed.
• The correct global placement immediately before the closing </body> tag.
• An official demo installation that works without a build tool or framework.
• A minimal test that prevents the demo and installation links from disappearing.

The example intentionally contains no package dependency for the widget. Knocket is loaded from the hosted SDK, so the same installation pattern works with hand-written HTML, static hosting, server-rendered templates, and most website builders that accept custom code.

Good fit for

• Small business and product landing pages.
• Personal portfolios and creator websites.
• Documentation and open-source project sites.
• Static pages hosted on GitHub Pages, Cloudflare Pages, Netlify, or a traditional web server.
• Teams that want website conversations without building a chat backend.

Installation

1. Open the Knocket installation console.
2. Sign in and copy the complete one-line installation code generated for your workspace.
3. Open the HTML file or shared page template used by your website.
4. Replace the demo script in index.html with your copied line.
5. Keep the script immediately before </body> so the page content can render first.
6. Publish the site and open the public URL in a new browser tab.

The final structure should look like this:

  <main>
    <!-- Your page content -->
  </main>

  <script src="YOUR_KNOCKET_SCRIPT_URL" async></script>
</body>

Do not copy the demo identifier into a production site. Always use the complete line from your own Knocket console.

How it works

The browser downloads the Knocket SDK asynchronously after parsing the page. The SDK reads the installation information in the script URL, initializes the chat launcher, and connects new visitor conversations to the associated Knocket workspace. Your site does not need to store a Telegram token, private API key, or chat server configuration.

Installing the script in a shared footer or base template makes the widget available on every page. Add it only once; placing the same line in both a base template and an individual page may initialize the widget twice.

Run locally

Serve the directory with any static server:

npx serve .

Open the printed local URL and look for the chat launcher. The repository contract can be checked with:

npm test

Troubleshooting

The chat launcher does not appear

• Confirm that you replaced the demo line with the complete code from the installation console.
• Inspect the published HTML and verify the Knocket <script> is present.
• Check the browser developer console for network or Content Security Policy errors.
• Confirm that the site allows scripts from https://trtc.io.

The widget appears twice

Search the generated HTML for knocket-sdk/sdk.js. The script should occur once per document. Remove page-level copies when it is already installed in a shared template.

It works locally but not after publishing

Make sure you edited the source template that your host actually deploys, then rebuild or republish the site. Some platforms do not publish local file changes automatically.

Security notes

• Use only installation code generated by the official Knocket console.
• Never place private API keys, passwords, or Telegram bot tokens in frontend HTML.
• Treat the installation identifier as public because it is visible in the browser source.
• Review your site's privacy notice and current Knocket documentation before using chat on regulated or sensitive pages.

Other Knocket integrations

• Next.js
• React + Vite
• Vue + Vite
• Svelte + Vite
• Remix
• Astro
• Hugo
• Webflow
• Framer
• Browser package (knocket-browser) — shared SDK loader for bundled JavaScript projects.

License

MIT