Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
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. |
React / Next.js
Other Frameworks
<VeltViewAnalyticsWireframe>
<button
className="my-trigger"
velt-class="'is-open': {componentConfig.treadsVisible}">
<span>Viewed today</span>
<span className="my-trigger__count">
<velt-data field="componentConfig.todayViewsCount" />
</span>
</button>
</VeltViewAnalyticsWireframe>
<velt-view-analytics-wireframe>
<button class="my-trigger"
velt-class="'is-open': {componentConfig.treadsVisible}">
<span>Viewed today</span>
<span class="my-trigger__count">
<velt-data field="componentConfig.todayViewsCount"></velt-data>
</span>
</button>
</velt-view-analytics-wireframe>
view-analytics-dialog
The desktop popover listing recent viewers.
- Public element:
<velt-view-analytics-dialog>
- Wireframe tag:
<velt-view-analytics-dialog-wireframe>
React / Next.js
Other Frameworks
<VeltViewAnalyticsDialogWireframe
velt-if="{componentConfig.treadsVisible}">
<header>
<velt-data field="componentConfig.userViews.length" /> viewers
</header>
<ul className="my-viewer-list">
<li>
<velt-data field="componentConfig.userViews.0.user.name" />
<time><velt-data field="componentConfig.userViews.0.timestamp" /></time>
</li>
</ul>
</VeltViewAnalyticsDialogWireframe>
<velt-view-analytics-dialog-wireframe
velt-if="{componentConfig.treadsVisible}">
<header>
<velt-data field="componentConfig.userViews.length"></velt-data> viewers
</header>
<ul class="my-viewer-list">
<li>
<velt-data field="componentConfig.userViews.0.user.name"></velt-data>
<time><velt-data field="componentConfig.userViews.0.timestamp"></velt-data></time>
</li>
</ul>
</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. |
Putting it together
A typical View Analytics trigger that swaps the dialog / bottom-sheet variant based on platform, with a count badge and a custom viewer list:
React / Next.js
Other Frameworks
<VeltViewAnalyticsWireframe>
<button
className="my-trigger"
velt-class="'is-open': {componentConfig.treadsVisible}, 'is-phone': {componentConfig.isPhone}">
<span>Viewed today</span>
<span velt-if="{componentConfig.todayViewsCount} > 0">
<velt-data field="componentConfig.todayViewsCount" />
</span>
</button>
</VeltViewAnalyticsWireframe>
<VeltViewAnalyticsDialogWireframe
velt-if="{componentConfig.treadsVisible} && !{componentConfig.bottomSheetMode}">
<header>
<strong><velt-data field="componentConfig.userViews.length" /></strong> recent viewers
</header>
</VeltViewAnalyticsDialogWireframe>
<VeltViewAnalyticsBottomSheetWireframe
velt-if="{componentConfig.treadsVisible} && {componentConfig.bottomSheetMode}">
<header>Viewers today</header>
</VeltViewAnalyticsBottomSheetWireframe>
<velt-view-analytics-wireframe>
<button class="my-trigger"
velt-class="'is-open': {componentConfig.treadsVisible}, 'is-phone': {componentConfig.isPhone}">
<span>Viewed today</span>
<span velt-if="{componentConfig.todayViewsCount} > 0">
<velt-data field="componentConfig.todayViewsCount"></velt-data>
</span>
</button>
</velt-view-analytics-wireframe>
<velt-view-analytics-dialog-wireframe
velt-if="{componentConfig.treadsVisible} && !{componentConfig.bottomSheetMode}">
<header>
<strong><velt-data field="componentConfig.userViews.length"></velt-data></strong> recent viewers
</header>
</velt-view-analytics-dialog-wireframe>
<velt-view-analytics-bottom-sheet-wireframe
velt-if="{componentConfig.treadsVisible} && {componentConfig.bottomSheetMode}">
<header>Viewers today</header>
</velt-view-analytics-bottom-sheet-wireframe>
