Add the Knocket live chat widget to a JavaScript application without manually creating or deduplicating script elements. Copy the complete installation code from your Knocket console and pass it to one function.
View the official demo · Get your installation code
npm install knocket-browser- Open the Knocket installation console.
- Copy the complete installation code for your workspace.
- Paste that complete line between the backticks below.
import { installKnocket } from "knocket-browser";
installKnocket(`PASTE THE COMPLETE INSTALLATION CODE HERE`).catch(
console.error,
);Call installKnocket once in your browser entry point, such as src/main.ts or src/index.ts. Knocket appears after its hosted SDK loads.
If you can edit a plain HTML file, you may paste the original installation code directly before </body> instead. This package is most useful in bundled applications where third-party scripts are managed through JavaScript.
Store the complete line as one configuration value:
VITE_KNOCKET_INSTALL_CODE='<script src="COPY_THE_ADDRESS_FROM_YOUR_KNOCKET_CONSOLE" async></script>'import { installKnocket } from "knocket-browser";
installKnocket(import.meta.env.VITE_KNOCKET_INSTALL_CODE).catch(console.error);This improves environment-specific configuration, but it does not make the installation code secret. Browser installation code is visible to website visitors.
Install Knocket once near the application root:
import { useEffect } from "react";
import { installKnocket } from "knocket-browser";
export function KnocketChat() {
useEffect(() => {
installKnocket(import.meta.env.VITE_KNOCKET_INSTALL_CODE).catch(
console.error,
);
}, []);
return null;
}export default function App() {
return (
<>
<YourApplication />
<KnocketChat />
</>
);
}The package protects against duplicate calls, including React development remounts. A future framework package can wrap this browser API with a dedicated component.
- Accepts the untouched, complete installation code generated by Knocket.
- Validates the official hosted SDK before adding it to the page.
- Loads one script for repeated and concurrent calls.
- Reuses an equivalent script already present in the document.
- Resolves with the loaded
HTMLScriptElement. - Removes a failed package-created script so a later call can retry.
- Rejects with a typed
KnocketInstallErrorwhen validation or loading fails.
function installKnocket(
installCode: string,
): Promise<HTMLScriptElement>;type KnocketInstallErrorCode =
| "INVALID_INSTALL_CODE"
| "INVALID_SCRIPT_SOURCE"
| "UNSUPPORTED_ENVIRONMENT"
| "SCRIPT_LOAD_FAILED";Return to the installation console, copy the complete line again, and pass it unchanged. Do not pass surrounding instructions or additional HTML.
Call installKnocket from client-side code. In applications with server rendering, run it after the browser has mounted rather than during server execution.
Check the browser network panel and Content Security Policy. Your site must allow the hosted address present in the installation code generated by the Knocket console.
The supplied HTML is parsed in an inert template. The package accepts one official external script, copies an allowlist of supported attributes, and never executes inline script content or arbitrary HTML.
Do not place private API keys, passwords, or messaging bot tokens in frontend code. The Knocket browser installation line is intended for browser delivery.
The package targets currently maintained evergreen browsers and requires a DOM. Importing it is side-effect free; calling it during server rendering returns an UNSUPPORTED_ENVIRONMENT error.
This package is for projects where pasting a raw <script> tag is inconvenient. If your site is plain HTML or a hosted site builder, paste the console line directly instead — the runnable examples below show the recommended approach per platform.
MIT