Angular

Set up with the CLI

npx @commentkit/cli init

The CLI does not set up Angular projects yet: it treats them as a plain website and shows the script tag with your key. Use that, or add the package as below.

Add the widget

npm install @commentkit/comment-kit

import { bootstrapApplication } from "@angular/platform-browser";
import { init } from "@commentkit/comment-kit";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, appConfig);

init({ project: "pk_live_your_key" });

The key is public by design, so it can live in your code or in your environment.ts files. Prefer markup? Import @commentkit/comment-kit/element once and place <comment-kit project="…"> in a template; Angular needs CUSTOM_ELEMENTS_SCHEMA on that component. See the custom element guide for its attributes.

Or the script tag

Paste it before </body> in src/index.html. No package, no build step.

<script src="https://commentkit.dev/cdn/v1/loader.js" data-project="pk_live_your_key" defer></script>

Branches

The build plugins cover Vite, Next.js, webpack and Astro, not the Angular CLI. Pass branch (and commit) to init(), or data-branch on the script tag, to file feedback per branch.

Server rendering

With Angular SSR, call init() in main.ts (the browser entry), not in main.server.ts.

init() does nothing on the server, so importing it never breaks server rendering. Call it once in the browser and keep the instance; destroy() removes every trace of the widget from the page.