> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-5.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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-overview.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=a3c016aaa08a4a5cbeb742d3a193ce1f" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-button.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=5b9558235fac1d58fd412862bbc209d3" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-button-tooltip.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=d6317295ef9197ed1aad00c035a5daef" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=c65160085d4a921a3a3950a0118b1f2f" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=3f6f9988480d8b012d1c48c517145eb5" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=152c224ac2698bd26561831038e1be37" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=9ef707aba265d189b06f3e60483b8550" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=c0cadcadcf8adf9d28d98ddfca112c0d" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=119235b52f03f6f5a0f2bdc2d8543599" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=1fcc4ac33e9bb4ee7670885fa165ea75" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=d8048ba5ab852cf8d993fd6ffc2cc59f" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=7ab7add3c85f20e05647858324185e62" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=931030174a56843c4cf00615d62b4da0" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=fd7e259b82037a5448dd3b5211cc3dbc" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=3f6f9988480d8b012d1c48c517145eb5" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=152c224ac2698bd26561831038e1be37" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=9ef707aba265d189b06f3e60483b8550" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=c0cadcadcf8adf9d28d98ddfca112c0d" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=119235b52f03f6f5a0f2bdc2d8543599" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=1fcc4ac33e9bb4ee7670885fa165ea75" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=d8048ba5ab852cf8d993fd6ffc2cc59f" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=7ab7add3c85f20e05647858324185e62" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=931030174a56843c4cf00615d62b4da0" 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-v6-0-0-beta-5/uM51H9QSzlBMKX7a/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=uM51H9QSzlBMKX7a&q=85&s=fd7e259b82037a5448dd3b5211cc3dbc" 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>
