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

# Transcription

> Transcription component.

> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## Overview

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-overview.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=cf5b823503c7032f5f39fb8cefe2a1f7)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe>
>         <VeltTranscriptionWireframe.FloatingMode />
>         <VeltTranscriptionWireframe.EmbedMode />
>     </VeltTranscriptionWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-wireframe>
>         <velt-transcription-floating-mode-wireframe></velt-transcription-floating-mode-wireframe>
>         <velt-transcription-embed-mode-wireframe></velt-transcription-embed-mode-wireframe>
>     </velt-transcription-wireframe>
> </velt-wireframe>
> ```

## FloatingMode

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode>
>         <VeltTranscriptionWireframe.FloatingMode.Button />
>         <VeltTranscriptionWireframe.FloatingMode.Tooltip />
>         <VeltTranscriptionWireframe.FloatingMode.PanelContainer />
>     </VeltTranscriptionWireframe.FloatingMode>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-floating-mode-wireframe>
>         <velt-transcription-button-wireframe></velt-transcription-button-wireframe>
>         <velt-transcription-tooltip-wireframe></velt-transcription-tooltip-wireframe>
>         <velt-transcription-panel-container-wireframe></velt-transcription-panel-container-wireframe>
>     </velt-transcription-floating-mode-wireframe>
> </velt-wireframe>
> ```

#### Button

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-button.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=7884082d74b98f30e1eb11c181133857)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Button />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-button-wireframe></velt-transcription-button-wireframe>
> </velt-wireframe>
> ```

#### Tooltip

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-button-tooltip.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=03fbfdd9e958925b1fd016ab9432923d)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Tooltip />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-tooltip-wireframe></velt-transcription-tooltip-wireframe>
> </velt-wireframe>
> ```

#### PanelContainer

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=16e5ab39bff0f82208d7e83dffca6ab7)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.PanelContainer>
>         <VeltTranscriptionWireframe.FloatingMode.Panel />
>     </VeltTranscriptionWireframe.FloatingMode.PanelContainer>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-panel-container-wireframe>
>         <velt-transcription-panel-wireframe></velt-transcription-panel-wireframe>
>     </velt-transcription-panel-container-wireframe>
> </velt-wireframe>
> ```

#### Panel

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-breakdown.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=2d2279e39d6f4866fcb8bd90f97c1d83)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel>
>         <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Summary />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Content />
>     </VeltTranscriptionWireframe.FloatingMode.Panel>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-panel-wireframe>
>         <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
>         <velt-transcription-copy-link-wireframe></velt-transcription-copy-link-wireframe>
>         <velt-transcription-summary-wireframe></velt-transcription-summary-wireframe>
>         <velt-transcription-content-wireframe></velt-transcription-content-wireframe>
>     </velt-transcription-panel-wireframe>
> </velt-wireframe>
> ```

#### CloseButton

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-close.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=2857470fa859919103ad2d8bcc813c8e)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
> </velt-wireframe>
> ```

#### CopyLink

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-copy.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=dc87f3e6b9960237ac42a723400afdb6)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink>
>         <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
>     </VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-copy-link-wireframe>
>         <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
>         <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
>     </velt-transcription-copy-link-wireframe>
> </velt-wireframe>
> ```

#### Button

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
> </velt-wireframe>
> ```

#### Tooltip

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
> </velt-wireframe>
> ```

#### Summary

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-summary.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=f0e435fbb75b95b6c58366c35cc17359)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Summary>
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle />
>     </VeltTranscriptionWireframe.FloatingMode.Panel.Summary>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-wireframe>
>         <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
>         <velt-transcription-summary-expand-toggle-wireframe></velt-transcription-summary-expand-toggle-wireframe>
>     </velt-transcription-summary-wireframe>
> </velt-wireframe>
> ```

#### Text

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-summary-text.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=e88b95b7c261a7b4a8f0ebb9e1fe611f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
> </velt-wireframe>
> ```

#### ExpandToggle

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-summary-expand.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=9cef65e1d4750d55a7edaa4f706e4c77)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle>
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
>     </VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-expand-toggle-wireframe>
>         <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
>         <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
>     </velt-transcription-summary-expand-toggle-wireframe>
> </velt-wireframe>
> ```

#### On

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
> </velt-wireframe>
> ```

#### Off

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
> </velt-wireframe>
> ```

#### Content

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=82b62b3514c13fc587b82635ce465c83)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Content>
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item />
>     </VeltTranscriptionWireframe.FloatingMode.Panel.Content>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-wireframe>
>         <velt-transcription-content-item-wireframe></velt-transcription-content-item-wireframe>
>     </velt-transcription-content-wireframe>
> </velt-wireframe>
> ```

#### Item

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content-item.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=1a6b6b9f40f92a7d7e5ecd03ba4933f8)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item>
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
>         <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
>     </VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-item-wireframe>
>         <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
>         <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
>     </velt-transcription-content-item-wireframe>
> </velt-wireframe>
> ```

#### Text

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content-item-text.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=464b8b2c9be384fe6ebf148ddcbc917f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
> </velt-wireframe>
> ```

#### Time

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content-item-time.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=405667fdfab3d950074730c8b74941ca)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
> </velt-wireframe>
> ```

## EmbedMode

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode>
>         <VeltTranscriptionWireframe.EmbedMode.Panel />
>     </VeltTranscriptionWireframe.EmbedMode>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-embed-mode-wireframe>
>         <velt-transcription-panel-wireframe></velt-transcription-panel-wireframe>
>     </velt-transcription-embed-mode-wireframe>
> </velt-wireframe>
> ```

#### Panel

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-breakdown.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=2d2279e39d6f4866fcb8bd90f97c1d83)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel>
>         <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Summary />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Content />
>     </VeltTranscriptionWireframe.EmbedMode.Panel>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-panel-wireframe>
>         <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
>         <velt-transcription-copy-link-wireframe></velt-transcription-copy-link-wireframe>
>         <velt-transcription-summary-wireframe></velt-transcription-summary-wireframe>
>         <velt-transcription-content-wireframe></velt-transcription-content-wireframe>
>     </velt-transcription-panel-wireframe>
> </velt-wireframe>
> ```

#### CloseButton

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-close.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=2857470fa859919103ad2d8bcc813c8e)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
> </velt-wireframe>
> ```

#### CopyLink

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-copy.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=dc87f3e6b9960237ac42a723400afdb6)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink>
>         <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
>     </VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-copy-link-wireframe>
>         <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
>         <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
>     </velt-transcription-copy-link-wireframe>
> </velt-wireframe>
> ```

#### Button

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
> </velt-wireframe>
> ```

#### Tooltip

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
> </velt-wireframe>
> ```

#### Summary

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-summary.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=f0e435fbb75b95b6c58366c35cc17359)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Summary>
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle />
>     </VeltTranscriptionWireframe.EmbedMode.Panel.Summary>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-wireframe>
>         <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
>         <velt-transcription-summary-expand-toggle-wireframe></velt-transcription-summary-expand-toggle-wireframe>
>     </velt-transcription-summary-wireframe>
> </velt-wireframe>
> ```

#### Text

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-summary-text.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=e88b95b7c261a7b4a8f0ebb9e1fe611f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
> </velt-wireframe>
> ```

#### ExpandToggle

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-summary-expand.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=9cef65e1d4750d55a7edaa4f706e4c77)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle>
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
>     </VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-expand-toggle-wireframe>
>         <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
>         <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
>     </velt-transcription-summary-expand-toggle-wireframe>
> </velt-wireframe>
> ```

#### On

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
> </velt-wireframe>
> ```

#### Off

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
> </velt-wireframe>
> ```

#### Content

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=82b62b3514c13fc587b82635ce465c83)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Content>
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item />
>     </VeltTranscriptionWireframe.EmbedMode.Panel.Content>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-wireframe>
>         <velt-transcription-content-item-wireframe></velt-transcription-content-item-wireframe>
>     </velt-transcription-content-wireframe>
> </velt-wireframe>
> ```

#### Item

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content-item.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=1a6b6b9f40f92a7d7e5ecd03ba4933f8)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item>
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
>         <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
>     </VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-item-wireframe>
>         <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
>         <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
>     </velt-transcription-content-item-wireframe>
> </velt-wireframe>
> ```

#### Text

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content-item-text.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=464b8b2c9be384fe6ebf148ddcbc917f)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
> </velt-wireframe>
> ```

#### Time

![](https://mintcdn.com/velt/jHPNbNrFekxbJeef/images/customization/recorder/transcription-panel-content-item-time.png?fit=max\&auto=format\&n=jHPNbNrFekxbJeef\&q=85\&s=405667fdfab3d950074730c8b74941ca)

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
> </velt-wireframe>
> ```


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