Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/docs/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. |
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. |
