Placing Pins on Your Pages

Pins are the core of NotedWP. Each pin marks a specific spot on your page and holds your feedback, so everyone knows exactly what you are referring to.

You have two ways to place a pin:

The Pin Tool

Press C on your keyboard or select the pin tool from the toolbar. Your cursor changes to a crosshair. Click anywhere on the page to drop a pin at that location.

A popover appears immediately. Type your feedback in the text field and click Submit to save it.

The Element Selector Tool

Press E or select the element selector from the toolbar. As you move your cursor, NotedWP highlights the HTML element underneath. Click to attach a pin directly to that element.

This is useful when you want feedback tied to a specific button, image, heading, or container rather than a general area of the page.

The Pin Popover

After you place a pin, the popover lets you fill in details:

  • Body text. Your feedback message.
  • Author. Automatically set to your user account, or your guest name if you are using a share link.
  • Breakpoint. Recorded automatically based on the current viewport.
  • Priority. Normal, high, or critical (Pro).
  • Label. Categorize as design, copy, bug, ux, or other (Pro).
  • Internal flag. Mark the pin as internal so only logged-in users with review permissions can see it (Pro).

How Pins Stay Anchored

NotedWP uses a dual-anchor system to keep pins in the right place. When you place a pin, NotedWP records two pieces of positioning data:

  1. CSS selector (primary). A unique selector that identifies the nearest HTML element.
  2. Percentage coordinates (fallback). The pin’s position as a percentage of the page dimensions.

If the page structure changes and the CSS selector no longer matches, NotedWP falls back to the percentage coordinates. This means your pins persist across page reloads and remain accurate even as content shifts.

Pin Numbers

Each pin displays a numbered marker on the page. Numbers are assigned in the order pins are created. This makes it easy to reference specific feedback, for example “see pin 4” in a conversation.

Pins and Breakpoints

Pins are breakpoint-specific. A pin you place while viewing the tablet breakpoint (768px) only appears when you are viewing that same breakpoint. This keeps feedback organized and prevents clutter when switching between screen sizes.

If you need to leave feedback about the same element at multiple breakpoints, place a separate pin at each one.

Next Steps