CommentKit / Get started

Environments & branches

Connect production, staging and localhost.

Connect the hosts

Use the same project key on your live site, staging, preview links and localhost. Add each website address in Project → Setup. The widget only works on the addresses you list, plus localhost for your team.

Page matching uses the path and query string rather than the hostname. For example, /pricing?plan=annual on your live site matches the same path on localhost.

Set the deployment branch

React configuration

<CommentKit
  project="pk_live_your_key"
  branch="feature/pricing"
/>

Script tag

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

The branch is saved on new feedback so you can filter by it later. On Vercel, use NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF to set it automatically for each preview.

Choose the review to work on

In the widget, the inbox shows feedback on this page, all pages and your notifications.
In the dashboard, filter feedback by page, branch, environment and status.

When a pin cannot find its element

Pages change between versions. CommentKit tries several ways to find the original spot. If the element moved or no longer exists, the feedback is marked as moved or detached instead of disappearing. The screenshot still shows what the reviewer saw.