Inline player

Clarity offers an inline player for visualizing user behavior on your site. You can explore session recordings quickly without losing the context of user actions.

The inline player includes the following features:

1. Playback viewer
2. Playback controls
3. Details tab

Playback viewer

The playback viewer contains the inline player and several options for exploring further:

• More details: View the details tab for this recording.
• Click: View the click map for this recording.
• Scroll: View the scroll map for this recording.
• Area: View the area map for this recording.
• Favorite the session: You can favorite this session from the inline player.
• Summarize recordings: Using generative AI, this feature summarizes multiple session recordings at a time. You can generate these insights for custom select recordings or for top 10 recordings.
• Rate this recording: Provide your feedback by rating the recording.
• Open in new tab: Open the playback viewer in new tab with more details.
• Share: Share the recording.

Explore Heatmaps through Recordings

With heatmaps, you can dig deep into user behavior on any recording. Select the Click button to see a click map and view where the user clicked on your page. Select the Scroll button to see a scroll map to view how far the user scrolled on your page. Dynamically view the heat maps for different page states in the session using the forward button.

Note:

• While you view a click or scroll or area map, playback controls such as play, pause, skip inactivity, auto play, and speed are disabled.

  

• Currently, click map, scroll map, and area map options are unavailable while viewing the recording in a new tab or when you share it.

  

Watch recordings

As you select a card, you can view the session recording in the playback viewer. The viewer allows you to analyze and understand user interactions with your site. You can view:

• User clicks throughout the session.
• Insights such as excessive scrolling, rage clicks, dead clicks, and quick backs.
• User cursor movements.
• Pages hidden or visible to the user.
• How and where users enter text in your site?
• What contexts the users are selecting?
• Where users are changing the screen size?

Playback controls

Playback controls provide you with the following options:

Here are the playback controls:

• Play / Pause: Plays or pauses the recording.
• Rewind: Rewind the recording by 10 seconds.
• Fast forward: Fast forwards the recording by 30 seconds.
• Play previous: Select to play previous recording. This is disabled for the first recording.
• Play next: Select to play previous recording. This is disabled for the last recording.
• Playback speed: Available presets: 0.25X, 0.5X, Normal, 1.5X, 2X, 4X, 8X, and 12X.
• Time: The current time / total time of recording.
• Skip inactivity: When checked, periods of inactivity on the page are skipped.
• Mute: Mute or unmute the audio in a recording.
• Autoplay: Learn more about Autoplay.
• Timeline events: Timeline events that describe events shown in recordings timeline along with keyboard shortcuts.

Autoplay

Toggle the Autoplay to automatically play the next recording in 5 seconds.

When Autoplay is enabled

If Autoplay is enabled, at the end of each recording, you can view the following controls:

• Rate recording: Provide feedback for this recording.
• Favorite: Favorite this recording.
• Share: Share this recording.
• Add labels: Choose from the list of available labels so you find this recording later.
• Cancel: Cancel the timer that is running on Play next and Exit the pop-up window to return to the current recording.
• Play next: Play the next recording before the timer ends.

When Autoplay is disabled

If Autoplay is disabled, at the end of each recording, you can view the following controls:

• Rate recording: Provide feedback for this recording.
• Favorite: Favorite this recording
• Share: Share this recording.
• Add labels: Choose from the list of available labels so you find this recording later.
• Exit: Exit the pop-up window and return to the current recording.
• Play next: Play the next recording.

View details

The details tab includes:

• Session list
• More details

More details

Select the More details button to view the summary, Insights of your session, and the timeline of user events as shown:

The summary includes:

1. Session info
2. Events

Session info

The session info contains the following information:

1. Date and time stamp
2. User ID
3. The location in which the session is recorded
4. Device details that include screen resolution, Browser, and Operating system with version
5. Clicks and page views
6. Entry and exit URLs
7. Referrer
8. Custom user ID
9. Custom session ID
10. Custom page ID

Events

These events showcase the detailed time at which events occurred that includes page visits within a session. Each page has events associated with it.

Toggle the Expand all to view each visited URL event in detail.

The supported events are:

• Click: This event is seen when a user clicks on a page.
• Scroll: This event is seen when a user scrolls on a page.
• Area: This event is seen when there are total clicks for all the elements within an area.
• Resize: This event is seen when the user changes the size of their browser window or switches between landscape and portrait on mobile. You can filter this event with the "Resized page" filter.
• Input: This event is seen when a user inputs text into a form element. You can filter to this event with the "Entered text" filter.
• Rage clicks: Check Rage clicks to learn more.
• Dead clicks: Check Dead clicks to learn more.
• Excessive scrolling: Check Excessive scrolling to learn more.
• Quick back click: Check Quick back to learn more.
• Page visible: This event is seen when a user's attention is on your web page.
• Page hidden: This event is seen when your web page is hidden behind other tabs or windows.
• JavaScript error: This event is seen when a JavaScript error is detected. You can also see the error string in the timeline.
• Selection: This event is seen when a user selects text on the page. You can filter to this event with the "Selected text" filter.
• Custom page ID: This event is seen when a user sets custom page ID through Clarity Client API custom identifiers. You can filter to this event with the Custom IDs.
• Custom tags: This event is seen when a user sets custom tags. You can filter to this event with Custom tags filter.
• Smart events: This event is seen when a smart event is identified automatically or when a user manually sets an event. Learn more about smart events

Inline player limitations

• Some recordings might look broken or have missing images. This is because Clarity is having difficulty locating CSS, font, or images to display the site. To learn more, see Troubleshoot Recordings.

• Clarity can't capture third-party iFrames and HTML Canvas elements. They show up in your recording, as shown:

  

• Clarity inline player might have rendering issues if your website is on http. To mitigate layout issues and maximize the utilization of Clarity, you can migrate to https.

FAQ

For more answers, refer to Session Recordings FAQ.

Visit Clarity