Review badge

The review badge is a script that runs on your preview or staging builds. It lets clients and reviewers pin threads on the page without installing the Chrome extension. Everyone signs in with a Skyelight account, usually with the reviewer role, and their threads appear in your project alongside threads from the extension.

Set it up

1. 1

   Put the script on your preview builds

   Skyelight Build adds the script to preview builds and keeps it out of production builds. Run its setup from your project’s root:

   npx @skyelight/build

   To add the script by hand instead, put this tag on the pages you want reviewed:

   <script type="module" src="https://app.skyelight.ai/a.js"></script>

2. 2

   Allow the preview address

   The badge signs people in only on addresses listed for the project. The list also tells Skyelight which project a site belongs to, so the script needs no project key. A project owner or admin adds addresses under Project settings Review Links. See Preview URLs.

   If the preview uses Vercel Deployment Protection, also add your bypass secret. Without it, reviewers see Vercel’s login page before the badge loads. See Deployment bypass.

3. 3

   Invite reviewers and send the link

   Invite reviewers to the workspace. The reviewer role is free and doesn’t take a seat. Then send them the preview address. Links from Skyelight, such as notification emails, include ?skyelight=1, which starts the badge.

What reviewers see

On the first visit, the badge sends the reviewer to Skyelight to sign in, then returns them to the same page. That browser stays signed in to the badge on that site for 30 days.

A signed-in reviewer can:

• Click the corner mark or press C, then click an element to pin it.
• Select text and release the mouse to pin the selection.
• Open the drawer to see every thread in the project, filter the list and reply.
• Press H to hide or show pins, and move the badge to another corner.

To sign out of the badge on a site, choose Sign out in the badge menu, or add ?skyelight=0 to the address.

When the badge shows up

The badge script is about 1.5 kB. For a visitor who isn’t reviewing, it makes no request, adds nothing to the page and stores nothing. It loads the rest of the badge only when one of these is true:

• The address includes ?skyelight=1. Links from Skyelight include it.
• The browser has signed in to the badge on this site before.
• The build tells the badge to show its mark on arrival. Skyelight Build does this on Next.js previews and local builds. The mark appears, and the badge doesn’t redirect anyone to sign in until they click it.

Vite, Remix, Astro and WXT previews don’t show the mark on arrival. Use a link with ?skyelight=1 for the first visit.

If the visitor has the Chrome extension installed, the badge removes itself and the extension handles pinning.

What it captures

The badge follows the same workspace settings as the extension:

• Page context is on by default. The badge captures the markup and text around the pinned element. It never includes form field values, and it drops regions marked data-skyelight-redact in the browser before sending anything.
• Screenshots are off by default. The badge takes one only if a workspace admin has turned screenshots on.

See Anchoring and context.

A web page can’t capture an image of its own browser tab, so the badge builds its screenshot by redrawing the page. It never asks the reviewer to share their screen. Cross-origin images without CORS headers, iframes, <canvas> contents and video appear blank in the screenshot.

Who can sign in

• Only members of the workspace can sign in. The badge has no anonymous mode.
• A badge session gives access only to the project its site belongs to.
• When you remove someone from the workspace, their badge stops working within about five minutes. When you remove an address from the project’s list, every session on that address ends.