Element Targeting: Pinpoint Feedback on Any Element

“The button doesn’t work” leaves you guessing which button. Targeting has the visitor point at it first.

Try it

This demo has targeting on. Click a thumb, then click anything on this page.

What the visitor sees

The edges of the window darken, and crosshairs with a ring follow the pointer. Whatever is under it gets an outline, green after a thumbs-up and red after a thumbs-down, or your own positive and negative colours. A click picks that element. A ring in the marker colour marks it, and the message box opens beside it. The colours are on Brand color matching.

While targeting, clicks go to the widget, not the page, so a link under the pointer is not followed. Clicking the widget’s own buttons picks nothing. Escape cancels and puts everything back.

Find the selector and text in a report

Field	What it holds
elementSelector	A CSS selector for the element, built as below
elementText	The element’s text, trimmed, cut to 100 characters with ... after
elementBounds	Its position and size in the window, with 8 pixels of margin
clickX, clickY, scrollX, scrollY	Where the click landed and how far the page was scrolled

In the dashboard, open an item and look under Details for Element Selector and Element Text. The inbox search matches the element text, the message and the page address, but not the selector.

Make selectors readable

The widget tries three ways in order and uses the first that works:

Found	Selector	Example
data-comp, data-qa, data-testid or data-id, on the element or any parent	That attribute	[data-testid="pay-button"]
An id on the element	The id	#checkout-form
Neither	A path of positions from <body>	body > main:nth-child(2) > div:nth-child(1) > button:nth-child(3)

A path breaks as soon as someone adds an element above it, and nth-child counts siblings of every kind. Attributes survive a redesign, and your test suite may already use them:

<!-- Reported as [data-testid="pay-button"] -->
<button class="btn btn-primary" data-testid="pay-button">Pay now</button>

The parent rule has a trap. The widget checks the element, then each parent in turn, and stops at the first attribute it finds. A wrapper like <main data-testid="page"> makes every click inside it report [data-testid="page"]. Put the attributes on the elements people point at, and keep them off layout wrappers.

Target with the keyboard

Press a thumb with Enter or Space and targeting runs from the keyboard:

Key	Does
Tab, ↓ or →	Next element
Shift+Tab, ↑ or ←	Previous element, wrapping round at either end
Enter or Space	Pick it
Escape	Cancel

The highlight starts on the first element on the page it can pick: links, buttons, fields, headings, paragraphs, list items, images, labels, and anything with a role, a tabindex or one of the four data attributes. Hidden elements are skipped. Focus moves with the highlight, the pointer stays visible, and a screen reader hears “Targeting” and the element’s text.

Target on a phone

Tap an element to pick it. A finger that moves more than 12 pixels is scrolling, not picking, so the page still scrolls while targeting. See What changes on a phone.

Turn targeting off

For feedback about a page rather than a thing on it, skip the step:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  defer
  data-api-key="YOUR_PROJECT_KEY"
  data-endpoint="https://qaid.dev/api/feedback"
  data-skip-targeting="true"
></script>

In JavaScript it is skipTargeting: true. A thumb click then opens the message box by the button, and the report has no selector.

feedbackMode: "annotate" skips targeting too, and has the visitor draw on a screenshot instead. See Screenshot annotation.