The widget is a small bar at the bottom right of the page. It is the same on your dev server, on a preview and through a review link. Each comment is attached to the element it is about, so whoever reads it knows exactly what you meant.
Say who you are
The first time, the widget asks for a name, so comments say who wrote them. Write it and press Start commenting. You can change it later from your avatar on the bar. On a review link, comments carry the name the link was made for.
Pick an element
Press the comment button on the bar (Add a comment). The pointer becomes a pin, and whatever it crosses is outlined. Click the element your comment is about. Esc leaves comment mode.
Write and send
Write what should change, then press Enter or the send button. Shift Enter starts a new line. A pin stays on the element, with your initials.
Read the comments
The panel button (All comments) opens the list: how many comments there are and how many are open, Open, Resolved and All, grouped by file or page. Click a comment to open it.
The bar
| Button | What it does |
|---|---|
| Add a comment | Turns comment mode on. Pressed again (Cancel), or with Esc, turns it off. |
| Show pins / Hide pins | Shows or hides the pins on the page. Its badge counts the comments on this page. |
| All comments | Opens the comments panel. A dot on it means there is something you have not read. |
| Your avatar | Changes your name. |
| Hide overlay | Folds the bar into one round button, Show feedback. |
⌥ ⇧ F on a Mac, Alt Shift F elsewhere, shows or hides the bar. The first time you hide it in a project, a reminder shows the shortcut.
The bar may cover something you want to comment on: drag it anywhere, by any part of it, buttons included. It stays where you drop it, across reloads.
Choosing what a comment is about
Sometimes the element you click is part of something larger, or one of several alike. The draft then offers arrows to Select a larger area or Select a smaller area, and, when the selection matches more than one thing on the page, This one or All of them. Most comments need neither.
Pins and threads
Each comment leaves a pin on its element. Click a pin to open its thread: read the replies, write one, or edit your own messages while the comment is open.