Qaid
ARTICLE

Element Targeting: Pinpoint Feedback on Any Element

Let users click on specific page elements to attach feedback directly to buttons, forms, or any UI component.

Qaid Team

Generic feedback like “the button doesn’t work” leaves you guessing which button, on which page, in which state. Element targeting solves this by letting users click directly on the problematic element. The feedback submission includes a precise CSS selector and the element’s text content, so you know exactly what they’re referring to.

How Element Targeting Works

When a user clicks a thumbs up or thumbs down button, the embed enters targeting mode. The page dims slightly and crosshairs appear to guide the user to click on any element. As they move their mouse, elements highlight to show what will be selected.

Once they click, the embed captures:

  1. CSS Selector - A unique identifier to locate the element
  2. Element Text - The visible text content (truncated to 100 characters)
  3. Data Attributes - Any data-comp, data-qa, data-testid, or data-id attributes

This information travels with the feedback, giving you complete context about what the user was interacting with.

The Targeting Experience

When targeting mode activates, several visual cues guide the user:

Crosshairs and Scope - Horizontal and vertical lines follow the cursor, with a circular scope indicator at the intersection. This precision tool makes it clear that element selection is active.

Element Highlighting - As the cursor moves over elements, each one highlights with a distinct outline. The highlight color matches the feedback type: green for positive feedback, red for negative.

Vignette Effect - A subtle darkening around the edges focuses attention on the targeting task.

After clicking an element, a marker briefly outlines the selected element while the feedback modal appears, confirming what was targeted.

CSS Selector Generation

The embed generates stable, reliable selectors using a priority system:

1. Data Attributes (Highest Priority)

If the element or any ancestor has a semantic data attribute, the selector uses it:

<button data-testid="submit-payment">Pay Now</button>
<!-- Generates: [data-testid="submit-payment"] -->

Supported attributes in priority order:

  • data-comp - Component identifiers
  • data-qa - QA automation selectors
  • data-testid - Testing library conventions
  • data-id - Generic data identifiers

2. Element ID

If no data attribute exists but the element has an ID:

<form id="checkout-form">...</form>
<!-- Generates: #checkout-form -->

IDs with special characters are properly escaped.

3. Nth-Child Path (Fallback)

When neither data attributes nor IDs are available, the embed generates an nth-child path from the body to the element:

<body>
  <main>
    <div>
      <button>Click Me</button>  <!-- Third button in this div -->
    </div>
  </main>
</body>
<!-- Generates: body > main:nth-child(1) > div:nth-child(1) > button:nth-child(3) -->

This path uniquely identifies the element, though it may break if the DOM structure changes. For stable targeting, add data attributes to important elements.

Best Practices for Element Identification

To get the most value from element targeting, add semantic data attributes to interactive elements:

<!-- Before: Hard to identify -->
<button class="btn btn-primary">Submit</button>

<!-- After: Clear identification -->
<button class="btn btn-primary" data-testid="contact-form-submit">Submit</button>

This approach has multiple benefits:

  1. Stable selectors - Data attributes don’t change when you refactor CSS classes
  2. Clear context - The attribute value describes the element’s purpose
  3. Testing compatibility - The same attributes work with testing tools like Playwright or Cypress
  4. Searchable feedback - Filter your feedback inbox by data attribute values

Viewing Targeted Feedback in the Dashboard

When feedback includes element targeting, the dashboard shows the captured information prominently:

Selector Display - The CSS selector appears in the feedback details, making it easy to locate the element in your codebase.

Element Text - The visible text helps you understand what the user saw without needing to visit the page.

Data Attribute Badge - If a data attribute was captured, it displays as a highlighted badge for quick scanning.

You can filter your feedback inbox by element selector patterns to find all feedback related to specific components. For example, searching for checkout might surface all feedback targeting checkout-related elements.

Skipping Targeting Mode

For simpler feedback flows, you can disable element targeting entirely:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-skip-targeting="true"
></script>

Or via JavaScript:

import { QaidFeedback } from '@qaiddev/thumbs-embed';

new QaidFeedback({
  endpoint: '/api/feedback',
  skipTargeting: true
});

With skipTargeting enabled, clicking thumbs up or down immediately opens the feedback modal. The feedback still captures the page URL and console errors, but no element information is included.

Use this option when:

  • Feedback is about the page as a whole, not specific elements
  • Your users find targeting confusing
  • You want the fastest possible feedback submission

Customizing the Target Button Appearance

The targeting mode is triggered by clicking the thumbs buttons, which you can customize extensively.

Colors

Set the marker color that appears around selected elements:

new QaidFeedback({
  endpoint: '/api/feedback',
  colors: {
    positive: '#22c55e',   // Green for thumbs up
    negative: '#ef4444',   // Red for thumbs down
    marker: '#6366f1'      // Purple outline on selected elements
  }
});

Button Size

Choose from predefined sizes:

new QaidFeedback({
  endpoint: '/api/feedback',
  buttonSize: 'small'   // 'small' | 'medium' | 'large'
});

Custom Icons

Replace the default thumbs icons entirely:

new QaidFeedback({
  endpoint: '/api/feedback',
  positiveIcon: '<svg>...</svg>',
  negativeIcon: '<svg>...</svg>'
});

Custom CSS Classes

Apply your own button styles:

new QaidFeedback({
  endpoint: '/api/feedback',
  buttonClass: 'my-custom-button'
});

When using buttonClass, the embed applies only structural styles (display, cursor) and leaves visual styling to your CSS.

Positioning

Control where the feedback buttons appear:

new QaidFeedback({
  endpoint: '/api/feedback',
  position: 'bottom-left',  // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  offset: { x: 24, y: 24 }  // Distance from screen edge
});

Keyboard Navigation

Targeting mode supports keyboard interaction:

  • Escape - Cancel targeting and return to idle state

The escape key works at any point during targeting, letting users bail out if they activated it accidentally.

Mobile Considerations

On mobile devices, element targeting uses touch interactions:

  • Tap to select instead of click
  • Elements highlight on touch
  • The same crosshair UI appears

The modal that appears after selection automatically switches to a bottom sheet format on narrow viewports, providing a native-feeling experience.

Summary

Element targeting transforms vague feedback into precise, actionable reports. By capturing CSS selectors, element text, and data attributes, you always know exactly which component a user is referring to. Add semantic data attributes to your important elements, and you’ll have a searchable, filterable feedback stream that maps directly to your codebase.

When precision matters less or simplicity is paramount, disable targeting with skipTargeting: true. Either way, Qaid adapts to your feedback workflow.

Back to all articles