> ## Documentation Index
> Fetch the complete documentation index at: https://velt-claude-ui-customization-docs-review-m7hwcn.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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-overview.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=77ff228432eb023e33fc17a478dd4583" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-button.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=53c8256233c1302a279e2a76445c24aa" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-button-tooltip.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=0a7561ded772f1f4c564195d9a6a5fd9" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=945e555e4c60130317e049adbf33fb43" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=844a3612f2f22b54be2b0d869dc17d7b" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=4463873c399d06ea8b9e613343c58ae8" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=8a3a44671023746ff6d4e9dc542f26b3" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=92072653621d3db3b31e9e8c15336dc0" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=ad421b8d930bb0caf15c606851c31ab5" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=0292a320543ce9018fef5b7efd0cd75e" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=2db1566384cacb6bc781c796e35442b6" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=246b9a3b931beceb59831a1fe6e2dce9" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=8487bc549838dd94dbbb3901e0322ea6" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=8b4c9c05bdbaf54f051c9658c018e695" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=844a3612f2f22b54be2b0d869dc17d7b" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=4463873c399d06ea8b9e613343c58ae8" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=8a3a44671023746ff6d4e9dc542f26b3" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=92072653621d3db3b31e9e8c15336dc0" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=ad421b8d930bb0caf15c606851c31ab5" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=0292a320543ce9018fef5b7efd0cd75e" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=2db1566384cacb6bc781c796e35442b6" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=246b9a3b931beceb59831a1fe6e2dce9" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=8487bc549838dd94dbbb3901e0322ea6" 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-claude-ui-customization-docs-review-m7hwcn/btzsyBpkzqeQYa7N/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=btzsyBpkzqeQYa7N&q=85&s=8b4c9c05bdbaf54f051c9658c018e695" 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>
