heytappr.

HeyTappr for

Live spotlight on the real interface

HeyTappr scrolls to and highlights the actual DOM element for each step — the real button, field, or menu in your running app. It is never a screenshot or a mockup, so the guidance can’t drift out of date the way recorded videos do.

“Where do I change my billing details?”

Real controls, not pictures of them

The spotlight targets a live DOM element chosen by a CSS selector your team sets for each step. Users see their own data and their own screen state, not a stale screenshot from someone else’s account.

Scrolls the user to the right place

HeyTappr brings the target control into view automatically before highlighting it. Users are never told to click something that is off screen or hidden below the fold.

Selectors your team controls

Every target is defined in the console as a CSS selector on a specific step, alongside the approved copy. If a selector breaks after a UI change, it shows up in your needs-attention list so you can fix it.

See it in your product

A demo takes fifteen minutes: HeyTappr guiding real users through a real interface.

Questions teams ask

What happens if our UI changes and a selector no longer matches?
Broken selectors are surfaced in the analytics needs-attention list. Your team can edit the guide in the console, update the selector, and republish — or pause the guide until it is fixed.
Does the spotlight work on any web app?
It works in web applications where the embed script is installed and the origin is allowlisted for your workspace. Each step highlights whatever element its CSS selector resolves to in the live page.

More use cases

Or just email us and see it in your own product.