How It Works

The full lifecycle of a comment, from click to resolution.

1

Enter comment mode

Press C on your keyboard, or click the toggle button. The cursor changes to a crosshair and elements start highlighting as you hover.

2

Click an element

Click any highlighted element. A comment input anchors near the element you selected. The SDK generates a CSS selector and a fingerprint to track this element across page loads.

3

Write your comment

Type what you see or pick a starter chip. The comment is pinned to that specific element — not a screenshot coordinate, not a vague description.

4

AI enrichment runs

If AI is enabled, the SDK captures element metadata (tag, text, styles, position) and sends it for enrichment. The AI adds context: what kind of element it is, what might be wrong, and what action to take.

5

Comment appears in the dashboard

The comment shows up in your Lay dashboard, grouped by page and element. Your team sees the exact element, the comment, the AI context card, and a viewport screenshot.

6

Your team understands what you mean

No more "the thing on the right." No more screenshots in Slack with red circles. The comment is attached to the element itself. Navigate, resolve, and archive from the dashboard.

Under the hood

When a comment is created, the SDK captures three pieces of data to anchor it:

  1. CSS selector — A stable path like #submit-btn or [data-feedback-id="checkout-form"]. Used for fast, exact matching.
  2. Element fingerprint — A hash of the element's tag, text content, attributes, and position. Used as a fallback when the selector stops matching.
  3. Viewport screenshot — A capture of the visible page at the moment of commenting. Gives visual context in the dashboard.

If the selector stops matching after a deploy, the fingerprint scorer finds the closest match in the current DOM and reattaches the comment automatically.