Review badge

The review badge is a website feedback widget that ships with Skyelight Build. It runs on your preview or staging builds and lets clients and reviewers pin comments on the page in any browser, without installing the Chrome extension. Reviewers sign in with a Skyelight account, usually with the free reviewer role. On Pro and above, a project can also let people without an account pin as guests. 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. Reviewers see each thread’s conversation; the Details and Problems panels are for owners, admins and collaborators.
• Hover the page to see a blue frame with the name of the element they’d pin.
• Press H to hide or show pins, and move the badge to another corner.

Keys typed in the badge, such as in the composer or a reply, don’t reach the page. A page’s own shortcuts, such as a slide deck that turns on Space, don’t fire while a reviewer writes.

The drawer docks to the right of the page. On a page sized to the window, such as a slide deck, content can run under the drawer. On a hosted prototype, the drawer narrows the prototype’s window instead.

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 3 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.
• With page context, the badge also records the browser and the page’s recent errors, console errors and warnings, and failed requests, scrubbed in the browser. It starts recording only once it has started for a signed-in reviewer or guest. See Page problems.

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.

Badge or extension?

Both pin the same threads into the same project. Pick by who is reviewing and where:

If someone has the extension installed, the badge steps aside and the extension handles pinning, so nobody sees two of them.

Who can sign in

• Members of the workspace sign in with their account. Where the project allows guest feedback, anyone on the site can choose Pin as guest instead; a guest sees only their own threads.
• 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.