Quickstart

1. Create a project

Create an account, choose a plan and create a project in the dashboard. Open Project → Setup and add every website address where people will leave feedback: your live site, staging and preview links (for example https://*.preview.example.com; wildcards on shared hosting such as *.vercel.app are refused, so add each preview address or use your own preview domain). Localhost always works for your team.

Copy your project key. It starts with pk_live_ (or pk_test_ for a test key). The key only identifies your project. It does not unlock any feedback; people still need to sign in.

2. Add CommentKit

On any website, paste this before the closing </body> tag. This works on WordPress, Webflow, Shopify and plain HTML.

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

Or, if your site uses npm:

npm install @commentkit/comment-kit

import { init } from "@commentkit/comment-kit";

init({ project: "pk_live_your_key" });

Using React, Vue or Svelte? See the framework examples. Prefer the terminal? Run npx @commentkit/cli login and then npx @commentkit/cli init in your app’s folder.

3. Open CommentKit

On localhost the widget is always visible to your team. On your live, staging and preview sites it is hidden from regular visitors. It appears when someone opens a client link, follows a link from a CommentKit email, presses Ctrl/Cmd + Shift + K, or is already signed in on that device.

Signing in opens a small CommentKit window. Enter your email and the 6-digit code we send you. Your password never touches your website.

4. Make the first review

1. Click the part of the page you mean, drag over an area, or select some text.
2. Write what should change and post it. A screenshot is attached automatically.
3. Open the feedback in the dashboard, or on the same page on localhost.
4. Reply, change the status, or choose Copy for AI agent and paste it into your coding agent.

Ready to try it? Get started.