Customize Behavior

​

1. buttonLabel

Sets a custom label for the Velt Recorder Tool.

• React / Next.js
• Other Frameworks

<VeltRecorderTool buttonLabel="Your Label Text" />

​

2. enableRecordingCountdown

Controls whether to display a countdown timer before a recording starts.

Default: enabled

• React / Next.js
• Other Frameworks

const recorderElement = client.getRecorderElement();
recorderElement.enableRecordingCountdown();
recorderElement.disableRecordingCountdown();

​

3. enableRecordingTranscription

Controls whether to enable AI transcription for recordings.

Default: enabled

• React / Next.js
• Other Frameworks

const recorderElement = client.getRecorderElement();
recorderElement.enableRecordingTranscription();
recorderElement.disableRecordingTranscription();

​

4. getRecordingDataByRecorderId

Fetches recording data (transcript, summary, and URLs) for a recording ID and returns a RecorderData object.

• React / Next.js
• Other Frameworks

const recorderData = useRecordingDataByRecorderId('-O9yTMWmEe5u6YGX8EFV');

useEffect(() => {
    console.log('Recorder Data: ', recorderData);
}, [recorderData]);

const recorderElement = client.getRecorderElement();

recorderElement.getRecordingDataByRecorderId("-O9yGiYS8lehOXMpQf4j").subscribe((recorderData) => {
    console.log('Recorder Data: ', recorderData);
});

​

5. mode

The Velt Recorder Control Panel has two display modes:

• floating: Shows a preview in the bottom left corner of the page, regardless of component placement
• thread: Displays the component at its placed location in the DOM

Default: "floating"

• React / Next.js
• Other Frameworks

<VeltRecorderControlPanel mode="floating" />
<VeltRecorderControlPanel mode="thread" />

​

6. onDelete

When a recording is deleted by its creator, the Velt Recorder Player component emits an onDelete event containing the recorder ID. You can listen for this event to perform any necessary cleanup.

The event returns an object with the following field:

• React / Next.js
• Other Frameworks

<VeltRecorderPlayer recorderId={RECORDER_ID} onDelete={(data) => yourDeleteMethod(data)} />

​

7. onRecordedData

The onRecordedData callback is triggered when a recording is completed. It provides the following data:

• React / Next.js
• Other Frameworks

  const recorderAddEvent = useRecorderAddHandler();

  useEffect(() => {
    console.log('recorderAddEvent', recorderAddEvent);
  }, [recorderAddEvent]);

  const recorderElement = client.getRecorderElement();
  recorderElement.onRecordedData().subscribe((recorderAddEvent) => {
    console.log(recorderAddEvent);
  });

  const onRecordedData = (recorderAddEvent) => {
    console.log(recorderAddEvent);
  }
  return (
    <VeltRecorderControlPanel mode="thread" onRecordedData={onRecordedData} />
  )

​

8. summary

Controls whether to display a summary transcript of the recording. When enabled, an AI-generated summary of the recording’s content will be shown.

Default: true

• React / Next.js
• Other Frameworks

<VeltRecorderPlayer summary={true}/>

​

9. type

Sets the recording mode for the Velt Recorder Tool.

Available modes:

• all - Records audio, video and screen
• audio - Records audio only
• video - Records video only
• screen - Records screen only

Default: audio

• React / Next.js
• Other Frameworks

<VeltRecorderTool type='all' />
<VeltRecorderTool type='audio' />
<VeltRecorderTool type='video' />
<VeltRecorderTool type='screen' />