Session replay and heatmaps

Numbers tell you what happened; replays and heatmaps show you why. Both come with the web SDKs (the script tag, npm package and Next.js) and are off until you turn them on.

#Session replay

A replay is a recording of a visit that you can watch back like a video: every page, scroll, click and change on screen. It isn't a screen capture; the SDK records the page's structure (with rrweb) and sends it in small compressed chunks, so it's light on bandwidth and sharp at any size.

#Turn it on

<!-- script tag -->
<script defer src="https://ingest.heyglancy.com/glancy.js" data-key="YOUR_WRITE_KEY" data-replay></script>

// npm
new BrowserClient({ writeKey: "YOUR_WRITE_KEY", host: "https://ingest.heyglancy.com", sessionReplay: true });

// Next.js
<GlancyProvider sessionReplay>{children}</GlancyProvider>

The recorder is loaded only when replay is on, so it adds nothing to your bundle otherwise.

#Watch replays

Open Replays in Hey Glancy to see every recorded session, with its length, pages and the person. Each replay plays alongside a timeline of the events that happened during it, so you can jump straight to the moment someone added to cart or hit an error. A person's profile under Users lists their replays too.

Narrow the list with the filters above it:

Filter	Shows sessions
Visited page	that went through a page at some point: /checkout/, or /product/* for any page under /product/
Entry page	that started on that page
Event	where an event was tracked, like Order Completed
Mood	that AI read as frustrated, confused, neutral, engaged or satisfied (once sessions have been analysed)
Device	on desktop, tablet or mobile
Length and period	at least that long, and started in the last day, week, month or quarter

Filters stay in the address, so you can share a filtered list. From Heatmaps, Replays of this page opens the sessions that visited the page you're looking at.

A replay covers one browser tab, and ends after 30 minutes of inactivity or when you call reset().

#How did the visit go?

Hey Glancy can watch sessions for you with AI. Above the list, Analyse reads the recent sessions not read yet, and each one gets a mood:

Mood	What it means
Frustrated	Something got in the way: rage clicks, clicks that did nothing, errors, or giving up on a form or checkout
Confused	Looking for something without finding it: back and forth between pages, hesitating
Neutral	A short or quiet visit, with nothing that reads as a problem or a success
Engaged	Exploring with intent: reading, comparing, moving through pages steadily
Satisfied	Got what they came for: an order, a sign-up, a sent form, done smoothly

Hover a session's icon to see why, or open the replay for the summary and the moments worth watching (click one to jump there). The bar above the list shows how sessions split by mood (click a mood to see only those), and Summarise with AI asks Ask AI for the problems that keep coming up.

The reading uses the model you picked in Ask AI, Claude or GPT, on your API key (Account settings → Ask AI) and sees a timeline of pages, clicks and tracked events, never what people typed. Sessions under 5 seconds are marked neutral without asking the AI.

#Record a share of sessions

On a busy site you rarely need every session. sampleRate records a share of them, decided once per session:

<script defer src="https://ingest.heyglancy.com/glancy.js" data-key="YOUR_WRITE_KEY" data-replay data-replay-sample="0.25"></script>

sessionReplay: { sampleRate: 0.25 }

#Privacy controls

By default, everything people type into inputs is masked (passwords always are), and the recording never includes what they typed. You can go further:

To	Do
Hide an element's text	Add data-glancy-mask (or the class glancy-mask)
Leave an element out entirely	Add data-glancy-block (or the class glancy-block); it shows as an empty box
Mask all text on the page	sessionReplay: { maskAllText: true }
Mask or block by selector	sessionReplay: { maskTextSelector: ".account-balance", blockSelector: ".chat-widget" }
Show what's typed (not recommended)	sessionReplay: { maskAllInputs: false }

<div data-glancy-mask>Ana Silva · ana@example.com</div>
<iframe data-glancy-block src="https://payments.example.com/…"></iframe>

To stop recording when someone withdraws consent, call stopRecording(). Events keep working.

#Heatmaps

Heatmaps show where people click and how far they scroll, drawn over your real page.

#Turn them on

<script defer src="https://ingest.heyglancy.com/glancy.js" data-key="YOUR_WRITE_KEY" data-heatmaps></script>

new BrowserClient({ writeKey: "YOUR_WRITE_KEY", host: "https://ingest.heyglancy.com", heatmaps: true });

<GlancyProvider heatmaps>{children}</GlancyProvider>

#Read them

Open Heatmaps in Hey Glancy and pick a page. You'll see:

• Clicks: where on the page people click, drawn as a heat layer over the live page.
• Scroll depth: how far down people get, so you know how many ever see what's below the fold.
• Top elements: the most clicked buttons and links, with rage clicks (3 or more clicks on the same element within 1.5 seconds), a sign something looks clickable but isn't, or is slow.

Ask AI about this page writes a short report on the heatmap: what people go for, what they miss, where they get stuck, and what to try.

Heatmaps are split by device class (desktop, tablet and mobile), since the same page looks very different on each.

#Tips

• Give important elements a data-testid or data-glancy-name attribute, so they keep the same name in the top elements list when your markup changes.
• Hey Glancy shows your page inside a frame. If your site sends X-Frame-Options: DENY or a strict frame-ancestors policy, allow your Hey Glancy's address (https://ingest.heyglancy.com) in frame-ancestors, or the page won't show (the click data is still collected). The SDK doesn't track anything inside that frame.
• Each click is drawn on the element that was clicked, at the same spot within it, so visitors with different screen sizes (where your layout puts the same button somewhere else) all land on the button. Clicks recorded before SDK 0.1.3, or on elements that are no longer on the page, are drawn where they happened.
• The page is shown one screen at a time and scrolls along with the heatmap, so sections sized to the screen (100vh heroes, sticky panels) look as they do for visitors. This needs the SDK on the page to be recent; with an older one, the page is drawn at its full height and those sections stretch.