> ## 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](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## 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).
</Note>

## 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`](/api-reference/sdk/models/data-models#user)`>`                | Viewers keyed by `userSnippylyId`.       | `<velt-data field="componentConfig.usersMap[userSnippylyId].name" />` |
| `componentConfig.userViews`       | `{ user: `[`User`](/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`](/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](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.