> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-c54e9cd8.mintlify.site/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](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-overview.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=9ce1358079275d53b73f558b8f0617f7" alt="" width="1280" height="721" data-path="images/customization/recorder/transcription-panel-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe>
            <VeltTranscriptionWireframe.FloatingMode />
            <VeltTranscriptionWireframe.EmbedMode />
        </VeltTranscriptionWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## FloatingMode

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode>
            <VeltTranscriptionWireframe.FloatingMode.Button />
            <VeltTranscriptionWireframe.FloatingMode.Tooltip />
            <VeltTranscriptionWireframe.FloatingMode.PanelContainer />
        </VeltTranscriptionWireframe.FloatingMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Button

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-button.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=60793e0c59dc6c0abb972eb0f44a2553" alt="" width="1280" height="329" data-path="images/customization/recorder/transcription-panel-button.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Button />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-transcription-button-wireframe></velt-transcription-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Tooltip

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-button-tooltip.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=8b253bc1f7a3d88c78f543a238c5a741" alt="" width="1280" height="329" data-path="images/customization/recorder/transcription-panel-button-tooltip.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-transcription-tooltip-wireframe></velt-transcription-tooltip-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### PanelContainer

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=aa9fa5e1fe9a431f9b75f8e39482ab6c" alt="" width="1280" height="329" data-path="images/customization/recorder/transcription-panel.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.PanelContainer>
            <VeltTranscriptionWireframe.FloatingMode.Panel />
        </VeltTranscriptionWireframe.FloatingMode.PanelContainer>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Panel

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=95e93efe88232ad91ebf4a98e7d0f640" alt="" width="1280" height="720" data-path="images/customization/recorder/transcription-panel-breakdown.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### CloseButton

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=048ee9508e45648d88cff151ec8c26c6" alt="" width="1280" height="436" data-path="images/customization/recorder/transcription-panel-close.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
    </VeltWireframe>
    ```
  </Tab>

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

#### CopyLink

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=0fd30f442dfa4c7e4b001f932f4984e0" alt="" width="1280" height="436" data-path="images/customization/recorder/transcription-panel-copy.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Button

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
    </VeltWireframe>
    ```
  </Tab>

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

#### Tooltip

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

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

#### Summary

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=5bfa3d38eec2bc6d65fdfa20ab7535f4" alt="" width="1280" height="482" data-path="images/customization/recorder/transcription-summary.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Text

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=dc43c2bea5b7d131a40ef87675fb04a1" alt="" width="1280" height="482" data-path="images/customization/recorder/transcription-summary-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
    </VeltWireframe>
    ```
  </Tab>

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

#### ExpandToggle

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=0ec4de22cbfe67a397c8560dece11aca" alt="" width="1280" height="482" data-path="images/customization/recorder/transcription-summary-expand.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### On

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Off

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Content

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=09c037e090df06f41be0f24baa2be1b6" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content>
            <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item />
        </VeltTranscriptionWireframe.FloatingMode.Panel.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=eb92a176481b27b70bae94ed1ce960a5" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content-item.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Text

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c18559eafc46d2d008bd9c0d5b9ca83d" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content-item-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
    </VeltWireframe>
    ```
  </Tab>

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

#### Time

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=86ee60a684b84acf5e8370644f154850" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content-item-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
    </VeltWireframe>
    ```
  </Tab>

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

## EmbedMode

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode>
            <VeltTranscriptionWireframe.EmbedMode.Panel />
        </VeltTranscriptionWireframe.EmbedMode>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Panel

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=95e93efe88232ad91ebf4a98e7d0f640" alt="" width="1280" height="720" data-path="images/customization/recorder/transcription-panel-breakdown.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### CloseButton

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=048ee9508e45648d88cff151ec8c26c6" alt="" width="1280" height="436" data-path="images/customization/recorder/transcription-panel-close.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
    </VeltWireframe>
    ```
  </Tab>

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

#### CopyLink

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=0fd30f442dfa4c7e4b001f932f4984e0" alt="" width="1280" height="436" data-path="images/customization/recorder/transcription-panel-copy.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Button

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
    </VeltWireframe>
    ```
  </Tab>

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

#### Tooltip

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
    </VeltWireframe>
    ```
  </Tab>

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

#### Summary

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=5bfa3d38eec2bc6d65fdfa20ab7535f4" alt="" width="1280" height="482" data-path="images/customization/recorder/transcription-summary.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Text

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=dc43c2bea5b7d131a40ef87675fb04a1" alt="" width="1280" height="482" data-path="images/customization/recorder/transcription-summary-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
    </VeltWireframe>
    ```
  </Tab>

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

#### ExpandToggle

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=0ec4de22cbfe67a397c8560dece11aca" alt="" width="1280" height="482" data-path="images/customization/recorder/transcription-summary-expand.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### On

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Off

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Content

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=09c037e090df06f41be0f24baa2be1b6" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content>
            <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item />
        </VeltTranscriptionWireframe.EmbedMode.Panel.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=eb92a176481b27b70bae94ed1ce960a5" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content-item.png" />

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Text

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=c18559eafc46d2d008bd9c0d5b9ca83d" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content-item-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
    </VeltWireframe>
    ```
  </Tab>

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

#### Time

<img src="https://mintcdn.com/velt-mintlify-c54e9cd8/GeIJW8QI5wp9r-df/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=GeIJW8QI5wp9r-df&q=85&s=86ee60a684b84acf5e8370644f154850" alt="" width="1280" height="300" data-path="images/customization/recorder/transcription-panel-content-item-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
    </VeltWireframe>
    ```
  </Tab>

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