Skip to main content
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe>
        <VeltTranscriptionWireframe.FloatingMode />
        <VeltTranscriptionWireframe.EmbedMode />
    </VeltTranscriptionWireframe>
</VeltWireframe>

​
FloatingMode

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode>
        <VeltTranscriptionWireframe.FloatingMode.Button />
        <VeltTranscriptionWireframe.FloatingMode.Tooltip />
        <VeltTranscriptionWireframe.FloatingMode.PanelContainer />
    </VeltTranscriptionWireframe.FloatingMode>
</VeltWireframe>

​
Button

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Button />
</VeltWireframe>

​
Tooltip

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Tooltip />
</VeltWireframe>

​
PanelContainer

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.PanelContainer>
        <VeltTranscriptionWireframe.FloatingMode.Panel />
    </VeltTranscriptionWireframe.FloatingMode.PanelContainer>
</VeltWireframe>

​
Panel

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content />
    </VeltTranscriptionWireframe.FloatingMode.Panel>
</VeltWireframe>

​
CloseButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
    </VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink>
</VeltWireframe>

​
Button

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
</VeltWireframe>

​
Tooltip

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
</VeltWireframe>

​
Summary

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Summary>
</VeltWireframe>

​
Text

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
</VeltWireframe>

​
ExpandToggle

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle>
</VeltWireframe>

​
On

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
</VeltWireframe>

​
Off

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
</VeltWireframe>

​
Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Content>
</VeltWireframe>

​
Item

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item>
</VeltWireframe>

​
Text

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
</VeltWireframe>

​
Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
</VeltWireframe>

​
EmbedMode

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode>
        <VeltTranscriptionWireframe.EmbedMode.Panel />
    </VeltTranscriptionWireframe.EmbedMode>
</VeltWireframe>

​
Panel

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content />
    </VeltTranscriptionWireframe.EmbedMode.Panel>
</VeltWireframe>

​
CloseButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
    </VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink>
</VeltWireframe>

​
Button

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
</VeltWireframe>

​
Tooltip

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
</VeltWireframe>

​
Summary

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Summary>
</VeltWireframe>

​
Text

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
</VeltWireframe>

​
ExpandToggle

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle>
</VeltWireframe>

​
On

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
</VeltWireframe>

​
Off

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
</VeltWireframe>

​
Content

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Content>
</VeltWireframe>

​
Item

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item>
</VeltWireframe>

​
Text

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
</VeltWireframe>

​
Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
</VeltWireframe>
⌘I