DEV Community

ivory
ivory

Posted on

Adding live chat to any framework in one line with Knocket

#webdev #javascript #opensource #tutorial

Adding live chat to any framework in one line with Knocket

Most "add a chat widget" tutorials end with you running a websocket server,
persisting messages, and babysitting a deployment. If you just want visitors to
reach you from your site, that's overkill.

Knocket is a hosted live chat widget aimed at indie
devs and small sites. This post walks through the drop-in SDK we shipped and the
framework examples around it — using Vue as the example, because it shows the
whole pattern in about ten lines.

The problem with a raw <script> tag

Pasting a <script src="...knocket-sdk..."> before </body> works, and we still
document it as the "no build step" path. But in a bundled app it means:

  • the install code lives in your HTML instead of your environment config,
  • nothing stops a double load on hot reload,
  • and there's no type safety or test surface.

The loader package

knocket-browser is a zero-dependency loader:

npm install knocket-browser
Enter fullscreen mode Exit fullscreen mode 
import { installKnocket } from 'knocket-browser';

installKnocket(import.meta.env.VITE_KNOCKET_INSTALL_CODE).catch(console.error);
Enter fullscreen mode Exit fullscreen mode

What it actually does:

  1. Parses the complete install line you copied from the Knocket console with the browser DOM (no regex, no innerHTML injection).
  2. Validates that the src points at the official trtc.io/knocket-sdk/sdk.js. Anything else is rejected.
  3. Appends one <script>, and dedupes — call it again (or remount in dev) and it reuses the already-loaded element instead of loading twice.
  4. Rejects safely in a non-DOM environment instead of throwing.

You never touch the workspace identifier directly; it travels inside the
console line you paste into .env.

Vue example, end to end

src/KnocketChat.vue:

import { onMounted } from 'vue';
import { installKnocket } from 'knocket-browser';

const installCode = import.meta.env.VITE_KNOCKET_INSTALL_CODE;

onMounted(() => {
  if (!installCode) return;
  installKnocket(installCode).catch(console.error);
});
Enter fullscreen mode Exit fullscreen mode

.env:

VITE_KNOCKET_INSTALL_CODE='<script src="https://trtc.io/knocket-sdk/sdk.js?..." async></script>'
Enter fullscreen mode Exit fullscreen mode

Render <KnocketChat /> once at the root and the launcher appears. The full
repo is here:
https://github.com/rrivory/knocket-vue-live-chat

The example matrix

We maintain runnable examples for ten setups, each with the same structure
(install once, dedupe, only official SDK) and a "no build step" alternative:

  • Plain HTML · React · Vue · Svelte · Next.js · Remix · Astro · Hugo · Webflow · Framer

All under https://github.com/rrivory — search knocket-*-live-chat. The shared
loader lives at https://github.com/rrivory/knocket-browser.

Try it

Grab your install code from the
Knocket console, drop it into
.env, and call installKnocket once. That's the integration. Feedback on the
DX — especially the Remix entry.client path — is very welcome.

Top comments (0)