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

React / Next.js

<VeltWireframe>
    <VeltRecorderAllToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderAllToolWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-recorder-all-tool-wireframe>
        <!-- ... Add your content here -->
    </velt-recorder-all-tool-wireframe>
</velt-wireframe>

VeltRecorderAllToolMenuWireframe

React / Next.js

<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>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe.Audio>
        {/* ... Add your content here */}
    </VeltRecorderAllToolMenuWireframe.Audio>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe.Video>
        {/* ... Add your content here */}
    </VeltRecorderAllToolMenuWireframe.Video>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltRecorderAllToolMenuWireframe.Screen>
        {/* ... Add your content here */}
    </VeltRecorderAllToolMenuWireframe.Screen>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltWireframe>
    <VeltRecorderAudioToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderAudioToolWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-recorder-audio-tool-wireframe>
        <!-- ... Add your content here -->
    </velt-recorder-audio-tool-wireframe>
</velt-wireframe>

VeltRecorderVideoToolWireframe

React / Next.js

<VeltWireframe>
    <VeltRecorderVideoToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderVideoToolWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-recorder-video-tool-wireframe>
        <!-- ... Add your content here -->
    </velt-recorder-video-tool-wireframe>
</velt-wireframe>

VeltRecorderScreenToolWireframe

React / Next.js

<VeltWireframe>
    <VeltRecorderScreenToolWireframe>
        {/* ... Add your content here */}
    </VeltRecorderScreenToolWireframe>
</VeltWireframe>

Other Frameworks

<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

React / Next.js

<VeltRecorderTool shadowDom={false} />

Other Frameworks

<velt-recorder-tool shadow-dom="false"></velt-recorder-tool>

Dark Mode

Default: false

React / Next.js

<VeltRecorderTool darkMode={true} />

Other Frameworks

<velt-recorder-tool dark-mode="true"></velt-recorder-tool>