1

Import Velt Recorder components

import { 
  VeltRecorderNotes, 
  VeltRecorderTool, 
  VeltRecorderControlPanel, 
  VeltRecorderPlayer 
} from '@veltdev/react'
2

Add the Velt Recorder Notes component

Add the Velt Recorder Notes component to the root of your app.

<VeltProvider>
  <VeltRecorderNotes/>
</VeltProvider>
3

Add the Velt Recorder Tool component

  • Add the Velt Recorder Tool component wherever you want the recorder button to appear.
  • Set the type attribute of the Velt Recorder Tool component to one of the following:
    • all
    • audio
    • video
    • screen
<div className="toolbar">
  <VeltRecorderTool type='all' />
</div>
4

Add the Velt Recorder Control Panel component

  • Add the Velt Recorder Control Panel component wherever you want the control panel to appear.
  • When a user clicks on the Velt Recorder Tool button, the Velt Recorder Control Panel component will show the recording preview with options to save, pause, or delete the recording.
  • Set the mode attribute on the VeltRecorderControlPanel component to either floating (default) or thread.

To learn more about floating or thread mode read here.

<div className="toolbar">
  <VeltRecorderTool type='all' />
  <VeltRecorderControlPanel mode="thread" />
</div>
5

Add the Velt Recorder Player component

  • Add the Velt Recorder Player component wherever you want to show recordings.
  • The Velt Recorder Player component displays the recorded data with controls such as pause, play and delete.
  • Set the recorderId of the Velt Recorder Player component as the Id of the recording you are trying to show.
<div className="video-player">
  <VeltRecorderPlayer recorderId={RECORDER_ID} />
</div>

Was this page helpful?

OverviewCustomize Behavior