Screenshots & Element Selection

Configure client-side screenshot generation, customize target element metadata logging, and hide sensitive page sections using custom attributes.

Last updated:2026-07-11

When a user submits feedback, TellBack captures a visual screenshot of their current viewport alongside detailed metadata of the specific HTML element they selected.

---

Screenshot Generation Mechanics

Unlike traditional screen-capturing extensions, TellBack does not request browser tab recording permissions. Instead:

1. HTML Canvas Rendering: TellBack uses the client-side html2canvas library to clone the page's active DOM tree.
2. Visual Reconstruction: It renders the cloned DOM structure onto an off-screen HTML5 <canvas> element and exports the result as a compressed image blob.
3. Secure Cloud Storage: Media is stored securely and accessed through controlled URLs inside the TellBack dashboard.

---

Target Element Selection Metadata

If a user utilizes the widget's element picker tool to highlight a specific section of the page, TellBack logs these properties during submission:

• tag: The lowercased HTML tag name (e.g., button, div).
• selector: A stable query selector path generated automatically (e.g., button#submit-btn or div.card.item).
• rect: The bounding client coordinates (top, left, width, height) of the element relative to the viewport.
• label: The human-readable label identifying the target. TellBack determines this label by evaluating the following attributes in order:
  1. data-tellback-label (User-defined custom label)
  2. aria-label (Accessibility string)
  3. role (HTML role attribute)
  4. Tag name (Fallback lowercased tag)
• text / textSnippet: The safe text contents of the element. Text snippets undergo automatic PII scrubbing (emails, credentials, JWTs, and long secret tokens are redacted to placeholder tags like [EMAIL] or [SECRET]).

---

Privacy Controls & Custom DOM Attributes

You can control what content is visible in screenshots and logged in element selection telemetry using simple HTML attributes.

1. data-tellback-ignore

• Behavior: Completely hides elements from feedback.
• Implementation: Matching elements (and their children) are removed entirely from the cloned DOM before generating the screenshot canvas, and are skipped during element selection mapping.
• Example:

  html

  <div data-tellback-ignore>
    <!-- This entire panel will be empty in screenshots -->
    <p>Internal Admin Keys: 9a8b7c...</p>
  </div>

2. data-tellback-mask

• Behavior: Redacts element text content while preserving the layout shape.
• Implementation: The element's background, borders, and text colors are forced to solid #ccc block styles, and the inner text is overwritten to '*****' in the canvas clone.
• Example:

  html

  <p data-tellback-mask>User Account Balance: $14,200.50</p>

3. data-tellback-label

• Behavior: Assigns a clean, human-readable label to an element to replace generic selectors in dashboard tasks.
• Example:

  html

  <button data-tellback-label="Submit Booking Form">Confirm</button>

---

Input and Form Field Redaction (Default Security)

To ensure form data privacy, the screenshot cloning process automatically masks inputs by default:

• All input, textarea, and select tag values are overwritten to '*****'.
• Inputs marked as type="password" or containing sensitive payment keywords (names, IDs, or placeholders matching card patterns) are replaced with solid #000 black box overlays.

---