CommentKit / Frameworks

Custom element

The <comment-kit> tag for markup-first setups, with every attribute.

Add the element

Terminal

npm install @commentkit/comment-kit

main.ts (once, in your bundle)

import "@commentkit/comment-kit/element";

Anywhere in your markup

<comment-kit project="pk_live_your_key" branch="main"></comment-kit>

Use it when you would rather write markup than call init(). Place the tag once per page. Removing it removes the widget; changing project restarts it.

Attributes

project: your project key (required).
branch and commit: file feedback per branch.
theme (auto, light, dark) and position (for example bottom-left).
auth: auto, popup or redirect for sign-in.
endpoint: another CommentKit server. Leave it out for commentkit.dev.
deployment-url: the preview address the feedback belongs to.
hide-on-production="false": show the launcher to every visitor.
locale and shortcuts="false": the widget language and turning off single-key shortcuts.

In frameworks

Angular needs CUSTOM_ELEMENTS_SCHEMA on the component that uses the tag. Vue may need compilerOptions.isCustomElement for comment-kit. React 19 and Svelte use it as is. With server rendering, import the element only in the browser; the tag itself can be rendered on the server.