Pinning feedback

Dropping a pin

In the widget, click anywhere on the page and a small dialog opens right next to where you clicked. Write the feedback, press send, and the pin stays on the page.

You can pin anything, not only buttons and images. The empty gap between two sections, the space around a heading, a stretch of margin that looks wrong: all of it can carry a pin. That matters because spacing problems are some of the most common things a designer needs to flag, and they are exactly the things that are not an element you can point at.

A screenshot of the page is captured automatically in the background while you type, with the pin drawn onto it. You do not have to ask for one.

Browsing versus commenting

The widget has two modes, and the toggle sits at the top of the panel.

• Feedback shows every pin on the page and lets you add more. Clicking the page drops a pin rather than following a link.
• Browse hides the pins and gives the site back. Links, buttons and forms behave normally, so this is the mode for clicking through to the page you actually want to review.

The widget opens in Feedback mode so pins are visible straight away, and it remembers whichever mode you picked last.

Reading what other people left

Pins are numbered in the order they were created, so pin 1 is the oldest. Click one to open its conversation in the panel and reply there. Replies appear live for everyone with the site open.

When several pins land close together they collapse into a single dark marker showing how many are stacked there. Click it and they fan out so you can pick the one you want.

Pins only appear on the page they were left on. The page is matched on its address without the query string, so arriving with a tracking parameter such as ?utm_source=… still shows the same pins.

How a pin stays in place

A pin is not stored as a pair of screen coordinates. Coordinates stop meaning anything the moment the page scrolls, the window is resized, or the site is deployed again.

Instead, each pin remembers the element it was placed on or beside, and its position relative to that element. A pin dropped in the gap to the right of a button remembers that it sits a fixed distance from that button's edge, so the gap it is describing survives a narrower window. A pin dropped inside a panel that stretches with the viewport remembers its position proportionally, so it stays on the same part of that panel.

The practical result is that a client can report a spacing problem on a wide monitor and you can open the same pin on a laptop and find it pointing at the same thing.

When a pin loses its place

If the element a pin was attached to no longer exists, usually because the section was rebuilt or removed, the pin falls back to roughly where it was and is drawn in grey with a dashed edge. That styling is a warning: treat its position as approximate and rely on the screenshot, which still shows the page exactly as it looked when the feedback was written.

This is also why the screenshot is captured automatically rather than being optional. The pin tells you where; the screenshot proves what.

Feedback without a pin

Every report made from the widget is pinned, because a report made while looking at the site almost always has a place it belongs. If you want to raise something general that is not tied to a spot on a page, add it from the dashboard instead.

What the pin stores alongside your message is listed in What the widget records.