> ## Documentation Index
> Fetch the complete documentation index at: https://velt-claude-self-hosting-docs-restructure-ld0nln.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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-overview.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=bbcdf92f7105ab9b4631f00291799a7a" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-button.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=b0fe7fb49ca32608ab14e6209b85887c" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-button-tooltip.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=5cef0aa533fdef98dbb5294daed04108" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=ce8cb8dedeb1156d4821e641bd215e3d" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=2ac8ced29b895ea8dce278f6386be5ab" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=6dbdd9053c8c239f7592acd27e7eaed5" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=3be8a13c968845702eabb42d09a017b2" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=30988da56c3bd712f9dfb48e46a93d94" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=2330c8e8abc993c295e9be53e0a93d26" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=19648e54f9229f03b2e5238cc6bf934b" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=5ce229b18ca709c490ed27c783ef26ac" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=3be0512ac13c5da1ec8c175db722f122" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=a47cf570cc653eb448f84094f7752143" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=a2d9606267276784639b059331f59a45" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-breakdown.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=2ac8ced29b895ea8dce278f6386be5ab" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-close.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=6dbdd9053c8c239f7592acd27e7eaed5" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-copy.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=3be8a13c968845702eabb42d09a017b2" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-summary.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=30988da56c3bd712f9dfb48e46a93d94" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-summary-text.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=2330c8e8abc993c295e9be53e0a93d26" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-summary-expand.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=19648e54f9229f03b2e5238cc6bf934b" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=5ce229b18ca709c490ed27c783ef26ac" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content-item.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=3be0512ac13c5da1ec8c175db722f122" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content-item-text.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=a47cf570cc653eb448f84094f7752143" 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-self-hosting-docs-restructure-ld0nln/9hb5jnN7odZTNPNl/images/customization/recorder/transcription-panel-content-item-time.png?fit=max&auto=format&n=9hb5jnN7odZTNPNl&q=85&s=a2d9606267276784639b059331f59a45" 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>
