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

# Recorder Wireframe Variables

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

## Overview

The **Recorder** feature powers audio / video / screen recording inside comments and standalone playback. Variables below are available inside any `<velt-recorder-...-wireframe>` tag via three forms:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="componentConfigSignal.currentTimeValue" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfigSignal.recordingInProgress}"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-{componentConfigSignal.recordingType}': true"` |

<Note>
  This feature uses the **flat-config** access pattern — every property lives directly on the root of `componentConfigSignal()` (no nested `appState` / `featureState` / `data` / `uiState`). Reach values via `{componentConfigSignal.<name>}`. The shorter `{<name>}` form also works for any field at the root of the recorder's componentConfig **except** for the names listed in the warning below.
</Note>

<Note>
  **Naming conflicts — use full path.** A few names collide with mappings used elsewhere. Inside a Recorder wireframe, prefer the explicit path on the right when reading these values:

  | Conflicting name | Map points to | Use this for Recorder |
  | - | - | - |
  | `disabled` | `parentLocalUIState.disabled` | `componentConfigSignal.disabled` |
  | `darkMode` | `parentLocalUIState.darkMode` | `componentConfigSignal.darkMode` |
  | `variant` | `parentLocalUIState.variant` | `componentConfigSignal.variant` |
  | `screenSharingSupported` | `componentConfigSignal.featureState.screenSharingSupported` | `componentConfigSignal.screenSharingSupported` |
  | `user` | `componentConfigSignal.appState.user` | `componentConfigSignal.user` |
  | `annotation` | `componentConfigSignal.data.annotation` | `componentConfigSignal.annotation` |
</Note>

## Component Config — Recorder Button

State on the `<velt-recorder-button>` trigger.

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfigSignal.buttonLabel` | `string` | Custom label text (e.g. `"Record"`). | `<velt-data field="componentConfigSignal.buttonLabel" />` |
| `componentConfigSignal.recordingInProgress` | `boolean` | Recording is currently active. | `velt-class="'is-recording': {componentConfigSignal.recordingInProgress}"` |
| `componentConfigSignal.types` | `RecorderMode[]` | Recorder modes permitted on this button (subset of `'audio' \| 'video' \| 'screen' \| 'all'`). | `<velt-data field="componentConfigSignal.types.length" />` |
| `componentConfigSignal.recorderModes` | `{ AUDIO: 'audio'; VIDEO: 'video'; SCREEN: 'screen'; ALL: 'all' }` | Constant id map. Useful when comparing to `componentConfigSignal.types`. | `<velt-data field="componentConfigSignal.recorderModes.AUDIO" />` |
| `componentConfigSignal.disabled` | `boolean` | Button is disabled. | `velt-class="'is-disabled': {componentConfigSignal.disabled}"` |
| `componentConfigSignal.darkMode` | `boolean` | Dark mode is active. | `velt-class="'theme-dark': {componentConfigSignal.darkMode}"` |
| `componentConfigSignal.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | *Host config — set via element attribute.* |
| `componentConfigSignal.screenSharingSupported` | `boolean` | Browser supports `getDisplayMedia`. | `velt-if="{componentConfigSignal.screenSharingSupported}"` |
| `componentConfigSignal.recordingCountdown` | `boolean` | 3-2-1 countdown overlay is enabled. | `velt-if="{componentConfigSignal.recordingCountdown}"` |
| `componentConfigSignal.variant` | `string` | Wireframe variant id. | `<velt-data field="componentConfigSignal.variant" />` |
| `componentConfigSignal.initRecording` | `Function` | Click handler — call `componentConfigSignal.initRecording(type)` from a custom button. | *Call this from your custom button click.* |

## Component Config — Recorder Pin

State on the `<velt-recorder-pin>` icon shown over a recorder annotation.

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfigSignal.recorderPinAnnotation` | [`RecorderAnnotation`](/docs/api-reference/sdk/models/data-models#recorderannotation) | The annotation this pin represents. Includes `from`, `recorderId`, `recorders`, etc. | `<velt-data field="componentConfigSignal.recorderPinAnnotation.from.name" />` |
| `componentConfigSignal.recorderPinSelected` | `boolean` | Pin is currently selected. | `velt-class="'pin-selected': {componentConfigSignal.recorderPinSelected}"` |
| `componentConfigSignal.multipleRecorderPinsSelected` | `boolean` | Multi-select mode is active. | `velt-class="'multi-selected': {componentConfigSignal.multipleRecorderPinsSelected}"` |
| `componentConfigSignal.dragging` | `boolean` | Pin is being dragged. | `velt-class="'dragging': {componentConfigSignal.dragging}"` |

## Component Config — Recorder Player (shared)

State shared by `<velt-recorder-player>` and every `recorder-player-*` inner primitive. Each tag receives the same `componentConfigSignal` carrying the active recording's metadata + behaviour callbacks.

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfigSignal.recordingTranscriptionEnabled` | `boolean` | Transcription overlay is enabled for this recording. | `velt-class="'transcript-on': {componentConfigSignal.recordingTranscriptionEnabled}"` |
| `componentConfigSignal.recordingType` | `'audio'` \| `'video'` \| `'screen'` | Recorder type for this recording. | `velt-class="'is-{componentConfigSignal.recordingType}': true"` |
| `componentConfigSignal.recorderInitData` | [`RecorderInitData`](/docs/api-reference/sdk/models/data-models#recorderinitdata) | Active recording handle. | *Internal — used by playback.* |
| `componentConfigSignal.attachment` | [`Attachment`](/docs/api-reference/sdk/models/data-models#attachment) | Saved-attachment record (`url`, etc.). | `<velt-data field="componentConfigSignal.attachment.url" />` |
| `componentConfigSignal.videoPosterDefaultImage` | `string` | Default poster image used when the video has no first frame yet. | `<velt-data field="componentConfigSignal.videoPosterDefaultImage" />` |
| `componentConfigSignal.annotation` | [`RecorderAnnotation`](/docs/api-reference/sdk/models/data-models#recorderannotation) | Recorder annotation backing this playback. | `<velt-data field="componentConfigSignal.annotation.id" />` |
| `componentConfigSignal.totalTimeValue` | `number` | Total playback duration in milliseconds. | `<velt-data field="componentConfigSignal.totalTimeValue" />` |
| `componentConfigSignal.currentTimeValue` | `number` | Current playback position in milliseconds. | `<velt-data field="componentConfigSignal.currentTimeValue" />` |
| `componentConfigSignal.user` | [`User`](/docs/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="componentConfigSignal.user.name" />` |
| `componentConfigSignal.dragging` | `boolean` | Pin / panel is being dragged. | `velt-class="'dragging': {componentConfigSignal.dragging}"` |
| `componentConfigSignal.recorderPinSelected` | `boolean` | Pin is currently selected. | `velt-class="'pin-selected': {componentConfigSignal.recorderPinSelected}"` |
| `componentConfigSignal.sourceFeature` | `'comment'` \| `'standalone'` \| ... | Where this player is mounted. | `velt-class="'source-{componentConfigSignal.sourceFeature}': true"` |
| `componentConfigSignal.videoContainerHovered` | `boolean` | Video container is hovered. | `velt-class="'hovered': {componentConfigSignal.videoContainerHovered}"` |
| `componentConfigSignal.mode` | `'floating'` \| `'thread'` | Layout mode. | `velt-class="'mode-{componentConfigSignal.mode}': true"` |
| `componentConfigSignal.variant` | `RecorderVariant` | Wireframe variant id (`'default'` \| ...). | `<velt-data field="componentConfigSignal.variant" />` |

### Player behaviour callbacks

The shared player config also exposes \~15 behaviour callbacks you can attach to your own buttons:

| Callback | Description |
| - | - |
| `componentConfigSignal.timeUpdate(...)` | Time-update handler. |
| `componentConfigSignal.toggleVideo(...)` | Play / pause toggle. |
| `componentConfigSignal.onSliderGrab(...)` / `onSliderDrag(...)` / `onSliderRelease(...)` | Timeline scrubber handlers. |
| `componentConfigSignal.onSeekToVideo(seconds)` / `componentConfigSignal.onSeekToAudio(seconds)` | Seek to a timestamp. |
| `componentConfigSignal.onSubtitlesButtonClick(...)` / `onSubtitlesPanelDragged(...)` | Subtitles overlay handlers. |
| `componentConfigSignal.onTranscriptionButtonClick(...)` / `onTranscriptionPanelDragged(...)` / `onTranscriptionTimestampClick(...)` / `onTranscriptionSummaryCopy(...)` | Transcription overlay handlers. |
| `componentConfigSignal.toggleAnnotation(...)` | Show / hide the annotation badge. |
| `componentConfigSignal.copyLink(...)` | Copy the playback URL. |
| `componentConfigSignal.deleteRecorderAnnotation(...)` | Delete the recording. |
| `componentConfigSignal.setVideoContainerHovered(boolean)` | Manual hover toggle. |

## Type Reference

Types referenced by the variables above:

| Type | Description |
| - | - |
| [`User`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`RecorderAnnotation`](/docs/api-reference/sdk/models/data-models#recorderannotation) | Recorder annotation — `from`, `recorderId`, `recorders`, etc. |
| [`Attachment`](/docs/api-reference/sdk/models/data-models#attachment) | Saved attachment record. |
| [`RecorderInitData`](/docs/api-reference/sdk/models/data-models#recorderinitdata) | Active-recording handle exposed during playback. |
| `RecorderMode` | Recorder type discriminator (`'audio'` \| `'video'` \| `'screen'` \| `'all'`). |
| `RecorderVariant` | Wireframe variant id. |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `recorder-button` (root)

The record-trigger button.

* **Public element:** `<velt-recorder-button>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.
* **Children:** `recorder-audio-tool`, `recorder-video-tool`, `recorder-screen-tool`, `recorder-all-tool` — one per recorder type.

| Property | Value |
| - | - |
| Extra variables | See [Component Config — Recorder Button](#component-config--recorder-button). |
| Host class | `velt-recorder-tool` (always). |

#### Children

| Primitive | Public element | Renders when |
| - | - | - |
| `recorder-audio-tool` | `<velt-recorder-audio-tool>` | `'audio'` is in `componentConfigSignal.types`. |
| `recorder-video-tool` | `<velt-recorder-video-tool>` | `'video'` is in `componentConfigSignal.types`. |
| `recorder-screen-tool` | `<velt-recorder-screen-tool>` | `'screen'` is in `componentConfigSignal.types` **and** `componentConfigSignal.screenSharingSupported` is true. |
| `recorder-all-tool` | `<velt-recorder-all-tool>` | The unified "record any" button is active. |

***

### `recorder-control-panel`

The control panel that appears during an active recording (record / pause / stop / discard).

* **Public element:** `<velt-recorder-control-panel>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.

| Property | Value |
| - | - |
| Extra variables | None beyond the shared player config. |

| React Prop | HTML Attribute | Type | Default | Description |
| - | - | - | - | - |
| `mode` | `mode` | `'floating'` \| `'thread'` | `'floating'` | Layout mode. |
| `panelId` | `panel-id` | `string` | — | Identifier when multiple panels are mounted. |

***

### `recorder-pin`

The pin icon shown over a recorder annotation.

* **Public element:** `<velt-recorder-pin>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.

| Property | Value |
| - | - |
| Extra variables | See [Component Config — Recorder Pin](#component-config--recorder-pin). |
| Host class | `recorder-pin-container` (always). `recorder-pin-player-container` on the inner player wrapper. |

| Angular Binding | Type | Default | Description |
| - | - | - | - |
| `[recorderPinAnnotation]` | [`RecorderAnnotation`](/docs/api-reference/sdk/models/data-models#recorderannotation) | — | Required. The annotation this pin represents. |
| `[recorderPinSelected]` | `boolean` | `false` | Whether the pin is currently selected. |
| `[multipleRecorderPinsSelected]` | `boolean` | `false` | Whether multi-select mode is active. |
| `[avatarErrorImage]` | `string` | `''` | Fallback avatar URL. |
| `[user]` | [`User`](/docs/api-reference/sdk/models/data-models#user) | — | Required. The current end-user. |
| `[dragging]` | `boolean` | `false` | Whether the pin is being dragged. |
| `[targetElement]` | `HTMLElement` | — | Anchor element for positioning. |

***

### `recorder-player`

The playback widget (audio + video). Composes \~20 sub-primitives — each with its own wireframe tag (see [Recorder Player Internals](#recorder-player-internals) below).

* **Public element:** `<velt-recorder-player>`
* **Wireframe tag:** No direct wireframe slot — see child slots below.

| Property | Value |
| - | - |
| Extra variables | See [Component Config — Recorder Player (shared)](#component-config--recorder-player-shared). |

## Recorder Player Internals

Each player primitive below has its own `<velt-recorder-player-<name>-wireframe>` tag. All receive the same shared `componentConfigSignal`.

### `recorder-player-overlay`

The overlay UI on top of the playing video (controls + scrubber + buttons). Most controls live inside the overlay.

* **Wireframe tag:** `<velt-recorder-player-overlay-wireframe>`

***

### `recorder-player-video-container` / `recorder-player-video`

Container for the `<video>` element + the inline `<video>` itself.

* **Wireframe tags:** `<velt-recorder-player-video-container-wireframe>`, `<velt-recorder-player-video-wireframe>`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <velt-recorder-player-video-wireframe>
      <video className="my-video" src="{componentConfigSignal.attachment.url}"></video>
    </velt-recorder-player-video-wireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-player-video-wireframe>
      <video class="my-video" [src]="componentConfigSignal.attachment.url"></video>
    </velt-recorder-player-video-wireframe>
    ```
  </Tab>
</Tabs>

***

### `recorder-player-audio-container` / `recorder-player-audio`

Container + inline `<audio>` for audio recordings.

* **Wireframe tags:** `<velt-recorder-player-audio-container-wireframe>`, `<velt-recorder-player-audio-wireframe>`

***

### `recorder-player-audio-waveform`

Animated waveform visualization for audio recordings.

* **Wireframe tag:** `<velt-recorder-player-audio-waveform-wireframe>`

***

### `recorder-player-audio-toggle`

Play / pause button group with separate `play` and `pause` icon tags.

* **Wireframe tags:** `<velt-recorder-player-audio-toggle-wireframe>`, `<velt-recorder-player-audio-toggle-play-wireframe>`, `<velt-recorder-player-audio-toggle-pause-wireframe>`

***

### `recorder-player-timeline`

The scrubber timeline.

* **Wireframe tag:** `<velt-recorder-player-timeline-wireframe>`
* **Children:** `<velt-recorder-player-timeline-seek-bar-wireframe>` (the draggable seek bar).

***

### `recorder-player-time`

The current / total time labels.

* **Wireframe tag:** `<velt-recorder-player-time-wireframe>`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <velt-recorder-player-time-wireframe>
      <span><VeltData field="componentConfigSignal.currentTimeValue" /></span>
      /
      <span><VeltData field="componentConfigSignal.totalTimeValue" /></span>
    </velt-recorder-player-time-wireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-recorder-player-time-wireframe>
      <span><velt-data field="componentConfigSignal.currentTimeValue"></velt-data></span>
      /
      <span><velt-data field="componentConfigSignal.totalTimeValue"></velt-data></span>
    </velt-recorder-player-time-wireframe>
    ```
  </Tab>
</Tabs>

***

### `recorder-player-name`

The recording's name / title.

* **Wireframe tag:** `<velt-recorder-player-name-wireframe>`

***

### Action buttons

Action buttons on the player overlay. Each has its own wireframe tag.

| Wireframe tag | Notes |
| - | - |
| `<velt-recorder-player-edit-button-wireframe>` | Edit the recording's name. |
| `<velt-recorder-player-delete-wireframe>` | Delete the recording. |
| `<velt-recorder-player-copy-link-wireframe>` | Copy the playback URL. |
| `<velt-recorder-player-full-screen-button-wireframe>` | Open the full-screen / expanded player. |

***

### `recorder-player-subtitles` / `recorder-player-subtitles-button`

Subtitles overlay + toggle button.

* **Wireframe tags:** `<velt-recorder-player-subtitles-wireframe>`, `<velt-recorder-player-subtitles-button-wireframe>`

***

### `recorder-player-transcription`

The transcript panel.

* **Wireframe tag:** `<velt-recorder-player-transcription-wireframe>`

<Note>
  The full set of transcription-specific variables (`vttFileTextArray`, `highlightedTextIndex`, etc.) lives on the Transcription feature config when the transcription panel is in standalone mode. Inside the recorder player, a subset of those values is exposed via the shared player config.
</Note>

## Deeply-Nested Wireframe Tags

The recorder feature has a large set of overridable surfaces, particularly in the control panel (during recording) and the expanded full-screen player.

### Recorder tool tags

| Tag | Notes | Example |
| - | - | - |
| `<velt-recorder-audio-tool-wireframe>` | Audio-only recorder button variant. | `velt-if="{componentConfigSignal.types.includes('audio')}"` |
| `<velt-recorder-video-tool-wireframe>` | Video-only recorder button variant. | (per-type variant) |
| `<velt-recorder-screen-tool-wireframe>` | Screen-only recorder button variant. | `velt-if="{componentConfigSignal.screenSharingSupported}"` |
| `<velt-recorder-all-tool-wireframe>` | Multi-mode recorder button (opens a menu with audio / video / screen options). | (composes the menu below) |
| `<velt-recorder-all-tool-menu-wireframe>` | The opened menu of the all-tool. | (composes menu rows) |
| `<velt-recorder-all-tool-menu-audio-wireframe>` | Audio option inside the menu. | `velt-if="{componentConfigSignal.types.includes('audio')}"` |
| `<velt-recorder-all-tool-menu-video-wireframe>` | Video option inside the menu. | `velt-if="{componentConfigSignal.types.includes('video')}"` |
| `<velt-recorder-all-tool-menu-screen-wireframe>` | Screen option inside the menu. | `velt-if="{componentConfigSignal.screenSharingSupported}"` |

### Control panel tags (during recording)

The control-panel renders during an active recording. It has floating, thread, and collapsed modes plus an action bar with stop / pause / clear / time / waveform indicators.

| Tag | Notes | Example |
| - | - | - |
| `<velt-recorder-control-panel-floating-mode-wireframe>` | Floating-mode root. | (composes the floating layout) |
| `<velt-recorder-control-panel-floating-mode-container-wireframe>` | Inner container. | (composes the inner controls) |
| `<velt-recorder-control-panel-floating-mode-waveform-wireframe>` | Waveform inside floating mode. | *Visual only.* |
| `<velt-recorder-control-panel-thread-mode-wireframe>` | Thread-mode root (composer-embedded variant). | (composes the thread layout) |
| `<velt-recorder-control-panel-collapsed-button-wireframe>` | Collapsed-state minimised button. | (click handler) |
| `<velt-recorder-control-panel-collapsed-button-on-wireframe>` | Variant when recording is active. | `velt-if="{componentConfigSignal.isRecording}"` |
| `<velt-recorder-control-panel-collapsed-button-off-wireframe>` | Variant when recording is paused. | `velt-if="!{componentConfigSignal.isRecording}"` |
| `<velt-recorder-control-panel-paused-wireframe>` | Paused-state overlay. | (composes the paused UI) |
| `<velt-recorder-control-panel-loading-wireframe>` | Loading state (initialising recorder). | *Visual only.* |
| `<velt-recorder-control-panel-screen-wireframe>` | Screen-recording overlay variant. | (composes the screen-record UI) |
| `<velt-recorder-control-panel-screen-mini-container-wireframe>` | Mini-overlay shown during screen recording. | (composes the mini overlay) |
| `<velt-recorder-control-panel-video-wireframe>` | Video-recording overlay. | (composes the video-record UI) |
| `<velt-recorder-control-panel-action-bar-wireframe>` | Action-bar wrapper (stop / pause / clear / time / waveform). | (composes action-bar children) |
| `<velt-recorder-control-panel-action-bar-stop-wireframe>` | Stop button. | (click handler) |
| `<velt-recorder-control-panel-action-bar-clear-wireframe>` | Discard button. | (click handler) |
| `<velt-recorder-control-panel-action-bar-toggle-wireframe>` | Pause / resume toggle wrapper. | (composes the two icon variants) |
| `<velt-recorder-control-panel-action-bar-toggle-pause-wireframe>` | Pause-icon variant. | `velt-if="{componentConfigSignal.isRecording}"` |
| `<velt-recorder-control-panel-action-bar-toggle-play-wireframe>` | Resume-icon variant. | `velt-if="!{componentConfigSignal.isRecording}"` |
| `<velt-recorder-control-panel-action-bar-pip-wireframe>` | Picture-in-picture toggle. | (click handler) |
| `<velt-recorder-control-panel-action-bar-time-wireframe>` | Elapsed time label. | `<velt-data field="componentConfigSignal.elapsedTime" />` |
| `<velt-recorder-control-panel-action-bar-type-icon-wireframe>` | Recorder-type icon (audio / video / screen). | `velt-class="'type-{componentConfigSignal.recordingType}': true"` |
| `<velt-recorder-control-panel-action-bar-waveform-wireframe>` | Live audio waveform. | *Visual only.* |

### Expanded player tags (full-screen playback)

The expanded (full-screen) player has its own control bar with separate tags for each control.

| Tag | Notes | Example |
| - | - | - |
| `<velt-recorder-player-expanded-wireframe>` | Expanded-player root. | (composes the panel + controls) |
| `<velt-recorder-player-expanded-panel-wireframe>` | Inner panel container. | (composes the panel content) |
| `<velt-recorder-player-expanded-controls-wireframe>` | Control-bar wrapper. | (composes the control children) |
| `<velt-recorder-player-expanded-controls-toggle-button-wireframe>` | Play / pause toggle wrapper. | (composes the two icon variants) |
| `<velt-recorder-player-expanded-controls-toggle-play-wireframe>` | Play icon. | `velt-if="!{componentConfigSignal.isPlaying}"` |
| `<velt-recorder-player-expanded-controls-toggle-pause-wireframe>` | Pause icon. | `velt-if="{componentConfigSignal.isPlaying}"` |
| `<velt-recorder-player-expanded-controls-progress-bar-wireframe>` | Scrubber progress bar. | (drag handlers) |
| `<velt-recorder-player-expanded-controls-current-time-wireframe>` | Current-time label. | `<velt-data field="componentConfigSignal.currentTimeValue" />` |
| `<velt-recorder-player-expanded-controls-total-time-wireframe>` | Total-time label. | `<velt-data field="componentConfigSignal.totalTimeValue" />` |
| `<velt-recorder-player-expanded-controls-time-wireframe>` | Combined "current / total" label. | (composes both labels) |
| `<velt-recorder-player-expanded-controls-volume-button-wireframe>` | Volume button. | (click handler) |
| `<velt-recorder-player-expanded-controls-settings-button-wireframe>` | Settings button (playback speed, etc.). | (click handler) |
| `<velt-recorder-player-expanded-controls-delete-button-wireframe>` | Delete button. | (click handler) |
| `<velt-recorder-player-expanded-controls-subtitle-button-wireframe>` | Subtitle toggle. | (click handler) |
| `<velt-recorder-player-expanded-controls-subtitle-button-icon-wireframe>` | Subtitle icon. | *Visual only.* |
| `<velt-recorder-player-expanded-controls-subtitle-button-tooltip-wireframe>` | Subtitle tooltip. | *Visual only.* |
| `<velt-recorder-player-expanded-controls-transcription-button-wireframe>` | Transcription toggle. | (click handler) |
| `<velt-recorder-player-expanded-controls-transcription-icon-wireframe>` | Transcription icon. | *Visual only.* |
| `<velt-recorder-player-expanded-controls-transcription-tooltip-wireframe>` | Transcription tooltip. | *Visual only.* |
| `<velt-recorder-player-expanded-copy-link-wireframe>` | Copy-link action. | (click handler) |
| `<velt-recorder-player-expanded-minimize-button-wireframe>` | Minimise (exit fullscreen) button. | (click handler) |
| `<velt-recorder-player-avatar-wireframe>` | Recorder author's avatar (shown on the player overlay). | `<velt-data field="componentConfigSignal.user.photoUrl" />` |
| `<velt-recorder-player-play-button-wireframe>` | Play-only button variant (used for compact embed). | (click handler) |

## Related

* [Recorder Tool](./recorder-tool) — wireframe overview for the trigger button.
* [Control Panel](./control-panel) — wireframe overview for the recording-in-progress panel.
* [Recorder Player](./recorder-player) — wireframe overview for the playback widget.
* [Recorder Player Expanded](./recorder-player-expanded) — wireframe overview for the full-screen player.
* [Subtitles](./subtitles), [Transcription](./transcription) — wireframe overviews for the subtitles / transcription overlays.
* [Template Variables](/docs/ui-customization/template-variables) — 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.