Customize Behavior
Multimedia Features
import { VeltComments, useVeltClient } from '@veltdev/react';
import { useEffect } from 'react'
export default function YourDocument() {
const { client } = useVeltClient();
useEffect(()=>{
if(client){
const commentElement = client.getCommentElement();
commentElement.enableAttachments(); // 1
commentElement.disableAttachments(); // 1
commentElement.setAllowedRecordings("video"); // 2 - set video mode only
commentElement.setAllowedRecordings("audio,screen"); // 2 - set audio and screen mode only
commentElement.setAllowedRecordings("all"); // 2 - set all modes
commentElement.setAllowedRecordings("none"); // 2 - disable all modes
commentElement.enableReactions(); // 3
commentElement.disableReactions(); // 3
}
})
return (
<div>
<VeltComments
attachments={true} {/* 1 */}
recordings="video,screen" {/* 2 */}
reactions={true} {/* 3 */}
/>
</div>
React / Next.js
HTML
1
File attachments
Whether file attachments are enabled.
Default: true
When this is on, users can attach image files to their comments. Users can download or delete an attachment. Users can attach multiple files at once.
Currently we support .png
, .jpg
, .gif
(static & animated), .svg
file types up to 2MB per file.
<VeltComments attachments={true} />
API Method:
const commentElement = client.getCommentElement();
commentElement.enableAttachments();
commentElement.disableAttachments();
2
Set Recorder Media Options
Set the Recorder media options within Comments: (audio, screen, video, all, or none).
Default: "audio"
To set the Recorder media options, pass in a comma separated string of the features you want to enable.
To enable only the screen option:
<VeltComments recordings="screen" />
To enable the video and screen options:
<VeltComments recordings="video,screen" />
To enable all options:
<VeltComments recordings="all" />
To disable all options:
<VeltComments recordings="none" />
API Methods:
const commentElement = client.getCommentElement();
commentElement.setAllowedRecordings("video"); // set video mode only
commentElement.setAllowedRecordings("audio,screen"); // set audio and screen mode only
commentElement.setAllowedRecordings("all"); // set all modes
commentElement.setAllowedRecordings("none"); // disable all modes
3
Enable Reactions
Whether emoji reactions are enabled.
Default: true
<VeltComments reactions={true} />
API Methods:
const commentElement = client.getCommentElement();
commentElement.enableReactions();
commentElement.disableReactions();
Was this page helpful?
import { VeltComments, useVeltClient } from '@veltdev/react';
import { useEffect } from 'react'
export default function YourDocument() {
const { client } = useVeltClient();
useEffect(()=>{
if(client){
const commentElement = client.getCommentElement();
commentElement.enableAttachments(); // 1
commentElement.disableAttachments(); // 1
commentElement.setAllowedRecordings("video"); // 2 - set video mode only
commentElement.setAllowedRecordings("audio,screen"); // 2 - set audio and screen mode only
commentElement.setAllowedRecordings("all"); // 2 - set all modes
commentElement.setAllowedRecordings("none"); // 2 - disable all modes
commentElement.enableReactions(); // 3
commentElement.disableReactions(); // 3
}
})
return (
<div>
<VeltComments
attachments={true} {/* 1 */}
recordings="video,screen" {/* 2 */}
reactions={true} {/* 3 */}
/>
</div>