View Analytics Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The View Analytics feature surfaces the “who’s viewed this document today” indicator. Variables below are available inside any <velt-view-analytics-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	`<velt-data field="var" />`	`<velt-data field="componentConfig.todayViewsCount" />`
Hide / show conditionally	`velt-if="{var}"`	`velt-if="{componentConfig.treadsVisible}"`
Toggle a CSS class	`velt-class="'cls': {var}"`	`velt-class="'dialog-open': {componentConfig.treadsVisible}"`

This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form. The trigger and the dialog / bottom-sheet variants expose different variable sets (documented separately below).

Component Config — View Analytics

State on the <velt-view-analytics> trigger.

Variable	Type	Description	Example
`componentConfig.today`	`string`	Today’s date string (e.g. `'2026-05-11'`).	`<velt-data field="componentConfig.today" />`
`componentConfig.todayViews`	`any`	Today’s view records.	`<velt-data field="componentConfig.todayViewsCount" />`
`componentConfig.todayViewsCount`	`number`	Number of users who viewed today.	`<velt-data field="componentConfig.todayViewsCount" />`
`componentConfig.totalUniqueViews`	`Record<string, any>`	All unique viewers keyed by `userSnippylyId`.	`<velt-data field="componentConfig.totalUniqueViewsCount" />`
`componentConfig.totalUniqueViewsCount`	`number`	Total unique viewer count.	`<velt-data field="componentConfig.totalUniqueViewsCount" />`
`componentConfig.treadsVisible`	`boolean`	Dialog is currently open.	`velt-class="'dialog-open': {componentConfig.treadsVisible}"`
`componentConfig.customButtonAdded`	`boolean`	A custom trigger has replaced the default.	`velt-if="!{componentConfig.customButtonAdded}"`
`componentConfig.isPhone`	`boolean`	Mobile layout flag.	`velt-class="'is-phone': {componentConfig.isPhone}"`

Component Config — View Analytics Dialog / Bottom Sheet

State shared between <velt-view-analytics-dialog> and <velt-view-analytics-bottom-sheet> (same data, different presentation).

Variable	Type	Description	Example
`componentConfig.views`	`Views`	All views by date.	`<velt-data field="componentConfig.views.today.count" />`
`componentConfig.usersMap`	`Record<string,` `User>`	Viewers keyed by `userSnippylyId`.	`<velt-data field="componentConfig.usersMap[userSnippylyId].name" />`
`componentConfig.userViews`	`{ user:` `User; timestamp: number }[]`	Sorted user-view list.	`<velt-data field="componentConfig.userViews.length" />`
`componentConfig.bottomSheetMode`	`boolean`	Bottom-sheet variant is active (mobile).	`velt-class="'bottom-sheet': {componentConfig.bottomSheetMode}"`

Type Reference

Types referenced by the variables above:

Type	Description
`User`	Identified end-user object (used by `usersMap` and `userViews.<i>.user`).
`Views`	All-views-by-date shape used by `componentConfig.views`.

Subcomponents

Each subcomponent below has its own wireframe tag.

`view-analytics`

The trigger button that shows the “N people viewed today” badge.

Public element: <velt-view-analytics>
Wireframe tag: <velt-view-analytics-wireframe>

Property	Value
Extra variables	See Component Config — View Analytics.

`view-analytics-dialog`

The desktop popover listing recent viewers.

Public element: <velt-view-analytics-dialog>
Wireframe tag: <velt-view-analytics-dialog-wireframe>

Property	Value
Extra variables	See Component Config — View Analytics Dialog / Bottom Sheet.

`view-analytics-bottom-sheet`

The mobile bottom-sheet variant of the dialog — same data, mobile UX.

Public element: <velt-view-analytics-bottom-sheet>
Wireframe tag: <velt-view-analytics-bottom-sheet-wireframe>

Property	Value
Extra variables	Same as `view-analytics-dialog`.
`shouldShow`	Renders when `componentConfig.bottomSheetMode === true`.

Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

View Analytics Wireframe Variables

Overview

Component Config — View Analytics

Component Config — View Analytics Dialog / Bottom Sheet

Type Reference

Subcomponents

`view-analytics`

`view-analytics-dialog`

`view-analytics-bottom-sheet`

​Overview

​Component Config — View Analytics

​Component Config — View Analytics Dialog / Bottom Sheet

​Type Reference

​Subcomponents

​view-analytics

​view-analytics-dialog

​view-analytics-bottom-sheet

​Related

Overview

Component Config — View Analytics

Component Config — View Analytics Dialog / Bottom Sheet

Type Reference

Subcomponents

`view-analytics`

`view-analytics-dialog`

`view-analytics-bottom-sheet`

Related