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>
    <VeltRecorderControlPanelWireframe>
        <VeltRecorderControlPanelWireframe.FloatingMode />
        <VeltRecorderControlPanelWireframe.ThreadMode />
    </VeltRecorderControlPanelWireframe>
</VeltWireframe>

​
Floating Mode

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode>
        <VeltRecorderControlPanelWireframe.FloatingMode.Container />
        <VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer />
        <VeltRecorderControlPanelWireframe.FloatingMode.Loading />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar />
    </VeltRecorderControlPanelWireframe.FloatingMode>
</VeltWireframe>

​
Container (Floating Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Container>
        <VeltRecorderControlPanelWireframe.FloatingMode.Video />
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton />
        <VeltRecorderControlPanelWireframe.FloatingMode.Paused />
        <VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
    </VeltRecorderControlPanelWireframe.FloatingMode.Container>
</VeltWireframe>

​
Video (Floating Mode Container)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>

​
Waveform (Floating Mode Container)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Waveform />
</VeltWireframe>

​
CollapsedButton (Floating Mode Container)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
        <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
    </VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton>
</VeltWireframe>
On (CollapsedButton)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.On />
</VeltWireframe>
Off (CollapsedButton)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.CollapsedButton.Off />
</VeltWireframe>

​
Paused (Floating Mode Container)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Paused />
</VeltWireframe>

​
ScreenMiniContainer (Floating Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
        <VeltRecorderControlPanelWireframe.FloatingMode.Video />
        <VeltRecorderControlPanelWireframe.FloatingMode.Screen />
    </VeltRecorderControlPanelWireframe.FloatingMode.ScreenMiniContainer>
</VeltWireframe>

​
Video (Floating Mode ScreenMiniContainer)

This is the same Video component as used in the Floating Mode Container.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Video />
</VeltWireframe>

​
Screen (Floating Mode ScreenMiniContainer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Screen />
</VeltWireframe>

​
Loading (Floating Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.Loading />
</VeltWireframe>

​
ActionBar (Floating Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
    </VeltRecorderControlPanelWireframe.FloatingMode.ActionBar>
</VeltWireframe>

​
TypeIcon (ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.TypeIcon />
</VeltWireframe>

​
Time (ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Time />
</VeltWireframe>

​
Waveform (ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Waveform />
</VeltWireframe>

​
Toggle (ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
        <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
    </VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle>
</VeltWireframe>
Pause (Toggle)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Pause />
</VeltWireframe>
Play (Toggle)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Toggle.Play />
</VeltWireframe>

​
Pip (ActionBar)

Picture-in-Picture button for screen recordings with camera. This allows users to view the recording in a floating window during screen capture.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Pip />
</VeltWireframe>

​
Stop (ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Stop />
</VeltWireframe>

​
Clear (ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.FloatingMode.ActionBar.Clear />
</VeltWireframe>

​
Thread Mode

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode>
        <VeltRecorderControlPanelWireframe.ThreadMode.Video />
        <VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer />
        <VeltRecorderControlPanelWireframe.ThreadMode.Loading />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar />
    </VeltRecorderControlPanelWireframe.ThreadMode>
</VeltWireframe>

​
Video (Thread Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>

​
Loading (Thread Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Loading />
</VeltWireframe>

​
ActionBar (Thread Mode)

This ActionBar is similar in structure to the Floating Mode ActionBar but specific to ThreadMode.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
    </VeltRecorderControlPanelWireframe.ThreadMode.ActionBar>
</VeltWireframe>

​
TypeIcon (Thread Mode ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.TypeIcon />
</VeltWireframe>

​
Time (Thread Mode ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Time />
</VeltWireframe>

​
Waveform (Thread Mode ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Waveform />
</VeltWireframe>

​
Toggle (Thread Mode ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
        <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
    </VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle>
</VeltWireframe>
Pause (Thread Mode Toggle)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Pause />
</VeltWireframe>
Play (Thread Mode Toggle)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Toggle.Play />
</VeltWireframe>

​
Pip (Thread Mode ActionBar)

Picture-in-Picture button for screen recordings with camera in Thread Mode. This allows users to view the recording in a floating window during screen capture.
Picture-in-Picture is only supported in Chrome browsers and only works for screen recordings when the camera is active. This feature is disabled by default.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Pip />
</VeltWireframe>

​
Stop (Thread Mode ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Stop />
</VeltWireframe>

​
Clear (Thread Mode ActionBar)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ActionBar.Clear />
</VeltWireframe>

​
ScreenMiniContainer (Thread Mode)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
        <VeltRecorderControlPanelWireframe.ThreadMode.Video />
        <VeltRecorderControlPanelWireframe.ThreadMode.Screen />
    </VeltRecorderControlPanelWireframe.ThreadMode.ScreenMiniContainer>
</VeltWireframe>

​
Video (Thread Mode ScreenMiniContainer)

This is the same Video component as used in the main Thread Mode section.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Video />
</VeltWireframe>

​
Screen (Thread Mode ScreenMiniContainer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderControlPanelWireframe.ThreadMode.Screen />
</VeltWireframe>
⌘I