Astro

Set up with the CLI

npx @commentkit/cli init

It finds Astro, writes PUBLIC_COMMENTKIT_KEY to .env and adds commentkit() to the integrations in astro.config.

It asks before each change. --yes applies them all and --install also installs the packages. To do it by hand, follow the steps below. See the CLI guide for the other commands.

Add the widget

npm install @commentkit/comment-kit

<script>
  import { init } from "@commentkit/comment-kit";
  init({ project: import.meta.env.PUBLIC_COMMENTKIT_KEY });
</script>

Astro bundles this script and runs it in the browser. Put it in the base layout every page uses.

Build plugin

npm install -D @commentkit/build

import { defineConfig } from "astro/config";
import commentkit from "@commentkit/build/astro";

export default defineConfig({
  integrations: [commentkit()],
});

It tags the markup in .astro components and pages, and islands written in React, Preact, Solid, Vue or Svelte, during astro dev (never in astro build). The inject option can load the widget while the dev server runs instead.

The plugin also records the branch and commit of every build, so feedback is filed per branch without passing anything to init(). Values you pass yourself always win.

Environment variables

• PUBLIC_COMMENTKIT_KEY: your project key. Public by design.
• Branch and commit: recorded by the integration and picked up by init() on its own.

The branch and commit come from the first of these that is set: COMMENTKIT_BRANCH / COMMENTKIT_COMMIT (your override), then Vercel, Netlify, Cloudflare Pages, GitHub Actions, GitLab CI and Render’s own variables, then git. Set COMMENTKIT_SOURCE=1 to tag a preview build with source locations too, or COMMENTKIT_SOURCE=0 to turn tagging off. See build plugins.

Server rendering

Astro renders pages on the server or at build time; the script above only runs in the browser.

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.