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

function TaskInputBox() {
    return (
      <div className="toolbar"> {/* some component that holds your recording components */}
        <VeltRecorderTool type='all' /> {/* Put this where you want the Recorder button to appear */}
        <VeltRecorderControlPanel mode="floating" /> {/* Put this where you want the Recorder control panel to appear */}
      </div>
      <div className="video-player"> {/* some component that holds your video player */}
        <VeltRecorderPlayer recorderId={RECORDER_ID} /> {/* Put this where you want to show the recorded data */}
      </div>
    )
}

  • React / Next.js

  • HTML

1

Import Velt Recorder components from @veltdev/react

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

Add the VeltRecorderNotes component

Add the VeltRecorderNotes component at the root of your app.

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

Add the VeltRecorderTool component

Add the VeltRecorderTool component wherever you want the recorder button to appear.

<div className="toolbar">
  <VeltRecorderTool type='all' />
</div>

Choose the recording type

Set the type attribute of the VeltRecorderTool component to one of the following:

  • all
  • audio
  • video
  • screen
4

Add the VeltRecorderControlPanel component

Add the VeltRecorderControlPanel component wherever you want the control panel to appear.

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

When a user clicks on the VeltRecorderTool button, the VeltControlPanel component will show the recording preview with options to save, pause, or delete the recording.

Choose the Control Panel mode

Set the mode attribute on the VeltRecorderControlPanel component to either floating (default) or thread.

To learn more about floating or thread mode read here.

5

Add the VeltRecorderPlayer component

Add the VeltRecorderPlayer component wherever you want to show recordings.

<div className="video-player">
  <VeltRecorderPlayer recorderId={RECORDER_ID} />
</div>

The VeltRecorderPlayer component displays the recorded data with controls such as pause, play and delete.

Set the recorderId

Set the recorderId of the VeltRecorderPlayer component as the Id of the recording you are trying to show.

Was this page helpful?

OverviewVelt Recorder Tool