Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
- Single Editor Mode
Recorder
Recorder Tool
The button to add new recordings.
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
VeltRecorderAllToolWireframe
<VeltWireframe>
<VeltRecorderAllToolWireframe>
{/* ... Add your content here */}
</VeltRecorderAllToolWireframe>
</VeltWireframe><VeltWireframe>
<VeltRecorderAllToolWireframe>
{/* ... Add your content here */}
</VeltRecorderAllToolWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-all-tool-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-wireframe>
</velt-wireframe>VeltRecorderAllToolMenuWireframe
<VeltWireframe>
<VeltRecorderAllToolMenuWireframe>
<VeltRecorderAllToolMenuWireframe.Audio>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Audio>
<VeltRecorderAllToolMenuWireframe.Video>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Video>
<VeltRecorderAllToolMenuWireframe.Screen>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Screen>
</VeltRecorderAllToolMenuWireframe>
</VeltWireframe><VeltWireframe>
<VeltRecorderAllToolMenuWireframe>
<VeltRecorderAllToolMenuWireframe.Audio>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Audio>
<VeltRecorderAllToolMenuWireframe.Video>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Video>
<VeltRecorderAllToolMenuWireframe.Screen>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Screen>
</VeltRecorderAllToolMenuWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-all-tool-menu-wireframe>
<velt-recorder-all-tool-menu-audio-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-menu-audio-wireframe>
<velt-recorder-all-tool-menu-video-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-menu-video-wireframe>
<velt-recorder-all-tool-menu-screen-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-menu-screen-wireframe>
</velt-recorder-all-tool-menu-wireframe>
</velt-wireframe>Audio
<VeltWireframe>
<VeltRecorderAllToolMenuWireframe.Audio>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Audio>
</VeltWireframe><VeltWireframe>
<VeltRecorderAllToolMenuWireframe.Audio>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Audio>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-all-tool-menu-audio-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-menu-audio-wireframe>
</velt-wireframe>Video
<VeltWireframe>
<VeltRecorderAllToolMenuWireframe.Video>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Video>
</VeltWireframe><VeltWireframe>
<VeltRecorderAllToolMenuWireframe.Video>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Video>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-all-tool-menu-video-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-menu-video-wireframe>
</velt-wireframe>Screen
<VeltWireframe>
<VeltRecorderAllToolMenuWireframe.Screen>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Screen>
</VeltWireframe><VeltWireframe>
<VeltRecorderAllToolMenuWireframe.Screen>
{/* ... Add your content here */}
</VeltRecorderAllToolMenuWireframe.Screen>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-all-tool-menu-screen-wireframe>
<!-- ... Add your content here -->
</velt-recorder-all-tool-menu-screen-wireframe>
</velt-wireframe>VeltRecorderAudioToolWireframe
<VeltWireframe>
<VeltRecorderAudioToolWireframe>
{/* ... Add your content here */}
</VeltRecorderAudioToolWireframe>
</VeltWireframe><VeltWireframe>
<VeltRecorderAudioToolWireframe>
{/* ... Add your content here */}
</VeltRecorderAudioToolWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-audio-tool-wireframe>
<!-- ... Add your content here -->
</velt-recorder-audio-tool-wireframe>
</velt-wireframe>VeltRecorderVideoToolWireframe
<VeltWireframe>
<VeltRecorderVideoToolWireframe>
{/* ... Add your content here */}
</VeltRecorderVideoToolWireframe>
</VeltWireframe><VeltWireframe>
<VeltRecorderVideoToolWireframe>
{/* ... Add your content here */}
</VeltRecorderVideoToolWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-video-tool-wireframe>
<!-- ... Add your content here -->
</velt-recorder-video-tool-wireframe>
</velt-wireframe>VeltRecorderScreenToolWireframe
<VeltWireframe>
<VeltRecorderScreenToolWireframe>
{/* ... Add your content here */}
</VeltRecorderScreenToolWireframe>
</VeltWireframe><VeltWireframe>
<VeltRecorderScreenToolWireframe>
{/* ... Add your content here */}
</VeltRecorderScreenToolWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-recorder-screen-tool-wireframe>
<!-- ... Add your content here -->
</velt-recorder-screen-tool-wireframe>
</velt-wireframe>Styling
Disable ShadowDOM
- By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
- Disable the shadow dom to apply your custom CSS to the component.
Default: true
<VeltRecorderTool shadowDom={false} /><VeltRecorderTool shadowDom={false} /><velt-recorder-tool shadow-dom="false"></velt-recorder-tool>Dark Mode
Default: false
<VeltRecorderTool darkMode={true} /><VeltRecorderTool darkMode={true} /><velt-recorder-tool dark-mode="true"></velt-recorder-tool>Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.