> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# View Analytics Wireframe Variables

> Template variables exposed by the View Analytics wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

> [!NOTE]
>
> New to wireframes? Start with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) and the [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) 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}"` |

> [!NOTE]
>
> 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`](https://velt.dev/docs/api-reference/sdk/models/data-models#user)`>` | Viewers keyed by `userSnippylyId`. | `<velt-data field="componentConfig.usersMap[userSnippylyId].name" />` |
| `componentConfig.userViews` | `{ user: `[`User`](https://velt.dev/docs/api-reference/sdk/models/data-models#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`](https://velt.dev/docs/api-reference/sdk/models/data-models#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](#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](#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`. |

## Related

* [Template Variables](https://velt.dev/docs/ui-customization/template-variables.md) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.