Visual Feedback

The Trackelio widget includes three visual feedback tools that give your team rich context beyond text descriptions. These features are available inside the Feedback module and can be enabled or disabled per site.

Screenshots

Users can capture a screenshot of the current page and attach it to their feedback submission.

• Rendering method — Screenshots are generated client-side using html-to-image. No server-side rendering is involved.
• Multiple captures — Up to 3 screenshots can be attached per submission.
• Size limit — Each screenshot must be under 5MB.
• Sensitive content filtering — Password input fields are automatically excluded from the capture. Any element with the data-sensitive attribute is also excluded.
• Widget exclusion — The widget itself is excluded from screenshots so it does not appear in the captured image.

Excluding elements from screenshots

Add the data-sensitive attribute to any element you want hidden in screenshots:

<div data-sensitive>
  This content will be blocked from screenshot captures.
</div>

Screen recording

Users can record a short video of their browser tab or window to demonstrate an issue.

• Recording API — Uses the browser’s getDisplayMedia API to capture the tab or window.
• Timer display — A visible timer shows the recording duration while active.
• Maximum duration — Recordings are capped at 60 seconds. The recording auto-stops when the limit is reached.
• Size limit — Recordings must be under 50MB.
• Widget hidden — The widget is hidden during recording so it does not appear in the video.
• Auto-stop — If the user navigates away or closes the tab, the recording stops automatically.

Screen recording requires the user to grant screen-sharing permission through their browser’s native prompt.

Element selection (Mark Mode)

Mark Mode lets users point to a specific element on the page to highlight exactly what their feedback is about.

How it works

1. The user clicks the “Point to element” button in the Feedback module.
2. A full-viewport crosshair overlay appears.
3. As the user moves their cursor, the element under the pointer is highlighted with a tooltip showing the element’s tag name, ID, and CSS classes.
4. Clicking an element selects it and returns to the feedback form.
5. Pressing Escape cancels the selection.

Captured data

When an element is selected, the following data is attached to the submission:

Data	Description
CSS selector	A unique CSS selector path to the element.
XPath	The XPath expression for the element.
Bounding rect	The element’s position and dimensions on the page.
Click position	The exact coordinates where the user clicked.

This data helps your team locate the exact element the user is referring to, even if the page layout changes between sessions.