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>
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. |
