> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-10684810.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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-overview.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=7a83e15343b9058f3a8a1e6f76d7cf18" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-button.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=5084e3cc987081e20f704095af2b7449" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-button-tooltip.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=a191d413140f94abd0bb6ea3f3b31de9" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=9a411fca2a90ad72d1fac4d0442d182a" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=47d23099374ab610e87d848071be6dd4" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=dddbd77434908711dee9243b97cb0c88" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=bc23d3c80c9d7c4a42d85f86d1d34f22" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=581cfdbd5d69bc125f0d450f1beb64fb" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=cd19a708d5528346137a6728f04ec08a" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=f50ccb133f4d491815506261b893ee1d" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=1e8ef8b9970259ae29ee53a5e9239fed" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=6bb96a3a8ff4c29d22e9a52409f5b0bf" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=4e1b8fadf117c1c38152d036a741a7fa" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=3e04ae655cc2e0c52be5fb32a442e8a2" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=47d23099374ab610e87d848071be6dd4" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=dddbd77434908711dee9243b97cb0c88" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=bc23d3c80c9d7c4a42d85f86d1d34f22" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=581cfdbd5d69bc125f0d450f1beb64fb" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=cd19a708d5528346137a6728f04ec08a" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=f50ccb133f4d491815506261b893ee1d" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=1e8ef8b9970259ae29ee53a5e9239fed" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=6bb96a3a8ff4c29d22e9a52409f5b0bf" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=4e1b8fadf117c1c38152d036a741a7fa" 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-10684810/dAWYn3bT1UaZxzhG/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=dAWYn3bT1UaZxzhG&q=85&s=3e04ae655cc2e0c52be5fb32a442e8a2" 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>
