Install Nitpick. It is one line.

1The tag

Every site you add in the dashboard gets its own tag. Paste it into the <head> of every page you want reviewed, or just before </body> if that is the only place your platform offers.

<script src="https://getnitpick.com/nitpick.js" data-site="np_your_site_key" defer></script>

Swap np_your_site_keyfor your site’s key: open the site in the dashboard and the Install panel at the top shows the whole tag, ready to copy.

• Ordinary visitors barely notice. They get a loader under half a kilobyte, which fetches the overlay once (the browser keeps it after that). The overlay looks at the address, finds no reason to wake up, and goes back to sleep. Nothing is drawn and nothing is sent.
• It wakes up for reviewers. Open any page with ?nitpick=true on the end, or follow an invite link, and the sign-in card appears. After that it stays on for that browser until the session ends.
• Want visitors to get nothing at all? Print the tag only for reviewers. The WordPress must-use plugin below does exactly that, and the same idea works on any server you control.

2Platforms

Where the paste goes on the usual suspects. The tag is the same everywhere.

<!-- wp-content/themes/your-child-theme/header.php -->
<!-- Paste it just above wp_head(), inside <head>. -->
<script src="https://getnitpick.com/nitpick.js" data-site="np_your_site_key" defer></script>
<?php wp_head(); ?>

<!-- In the plugin's "Header" box, on every page. -->
<script src="https://getnitpick.com/nitpick.js" data-site="np_your_site_key" defer></script>

<?php
/**
 * Plugin Name: Nitpick
 * Description: Prints the Nitpick tag for reviewers only. Visitors get nothing at all.
 */

// A reviewer arrives with ?nitpick in the address. Remember them for eight hours,
// so the tag is still there once they click through to other pages.
add_action('init', function () {
    if (isset($_GET['nitpick']) && !headers_sent()) {
        setcookie('nitpick_review', '1', time() + 8 * HOUR_IN_SECONDS, '/', COOKIE_DOMAIN, is_ssl(), true);
        $_COOKIE['nitpick_review'] = '1';
    }
});

add_action('wp_head', function () {
    $reviewer = isset($_GET['nitpick']) || isset($_GET['nppin']) || isset($_COOKIE['nitpick_review']);
    if (!$reviewer) {
        return;
    }
    echo '<script src="https://getnitpick.com/nitpick.js" data-site="np_your_site_key" defer></script>' . "\n";
}, 1);

3Origins

An origin is the front part of an address: the scheme, the host and, if there is one, the port. Each site in the dashboard has a list of them, and the tag answers only on these. Anywhere else, including a copy of your page on someone else’s server, it stays politely silent.

https://larkspur-dental.example

The live site. Add the www. version too if both are in use.

https://staging.larkspur-dental.example

Staging, so the client can review before anything goes live. Staging counts as the same site.

https://*.larkspur-dental.example

Every subdomain at once. Handy when each branch gets its own preview address.

http://localhost:3000

Your own machine. Local review works; give the port your dev server uses.

Paste a full address if that is easier. The dashboard keeps only the origin and drops the rest.

4Reviewers

Nobody makes an account to leave a note. There are two ways in.

• A sign-in lasts eight hours in that browser, across every page of the site. After that the reviewer signs in again; their unsent drafts are kept.
• To stop, press Turn Nitpick off on the bar. That signs the browser out and keeps any drafts. To simply browse without it for a moment, pick the browse tool.

5Where notes go

Every note lands in the dashboard regardless. Add a destination on the site’s page to send it on as well, and use its test button before trusting it with a client.

Webhook

Each note is a POST of JSON to your address. Screenshots and recordings arrive as signed links that last seven days, so copy them somewhere if you need them longer. A failed delivery is tried again over the next half day, and every attempt shows in the delivery log.

{
  "event": "note.created",
  "sentAt": 1759852800000,
  "note": {
    "id": "nt_8f2k1q",
    "number": 3,
    "reviewer": "Priya, Larkspur Dental",
    "pageUrl": "https://larkspur-dental.example/pricing",
    "message": "The middle column says $49, the checkout says $59.",
    "viewport": "1440x900",
    "url": "https://getnitpick.com/app/notes/nt_8f2k1q"
  },
  "review": { "id": "rv_3n7x", "noteCount": 5 },
  "site": { "id": "st_2w9m", "name": "Larkspur Dental", "key": "np_your_site_key" },
  "media": [
    { "kind": "screenshot", "type": "image/jpeg", "url": "https://..." }
  ]
}

X-Nitpick-Event

note.created for a note, test for the test button.

X-Nitpick-Delivery

A unique id per delivery. Retries keep it, so you can ignore one you have already handled.

X-Nitpick-Signature

sha256=<hmac of body>: the HMAC-SHA256 of the raw body, keyed with the signing secret, in hex.

import { createHmac, timingSafeEqual } from "node:crypto";

// rawBody is the request body exactly as it arrived, before any JSON parsing.
export function fromNitpick(rawBody, header, secret) {
  const want = Buffer.from("sha256=" + createHmac("sha256", secret).update(rawBody).digest("hex"));
  const got = Buffer.from(header ?? "");
  return want.length === got.length && timingSafeEqual(want, got);
}

ClickUp

Paste a ClickUp personal token (in ClickUp: your avatar, Settings, Apps), then pick the list from the ones that token can see. Each note becomes a task: the note as its title and description, with the page, the device, the reviewer and the transcript of any recording, and the screenshot, markup and recordings attached. Comments travel both ways, so a reviewer’s reply appears on the task and your team’s comment reaches the reviewer. Status follows along every few minutes: close the task and the reviewer sees it fixed.

Slack

Create an incoming webhook for the channel (in Slack: Apps, Incoming Webhooks) and paste its address. Each note posts as one message with the words, the page, the reviewer and the screenshot.

Email

Add the addresses that should hear about each note. Every address gets its own email, so nobody’s reply-all ends up in somebody else’s inbox.

6Staying out of the way

Things the overlay should leave alone

Put data-nitpick-ignore on anything the overlay should never photograph or intercept: a chat widget, a cookie banner, your own admin bar. It is left out of screenshots, and it keeps working while a reviewer has a tool in hand.

<!-- The overlay never photographs this, and it keeps working while a tool is in hand. -->
<div class="chat-widget" data-nitpick-ignore>...</div>

A review button of your own

A plain link to ?nitpick=true is all it takes. Hide it from visitors however you like: behind a login, in a footer only staff read, or on staging only.

<!-- A way in for reviewers. Opens the sign-in card on the page they are already on. -->
<a href="?nitpick=true" data-nitpick-ignore>Review this page</a>

Content Security Policy

No policy, or a relaxed one? Skip this. A site with a strict default-src needs to let the service in. Merge these into the policy you already have rather than replacing it.

Content-Security-Policy:
  script-src  'self' https://getnitpick.com;
  connect-src 'self' https://getnitpick.com;
  img-src     'self' https://getnitpick.com data: blob:;
  media-src   'self' blob:;
  style-src   'self' 'unsafe-inline';

• script-src loads the loader and the overlay.
• connect-src lets reviewers sign in and send notes.
• img-src covers screenshots while they are drawn on, and sent notes shown back to the reviewer.
• media-src blob: plays recordings back before they are sent.
• style-src lets the overlay style itself. It keeps its styles to itself, in its own shadow root.

7Troubleshooting