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();

4. Disable Recording summaries

Whether Recording summaries in Comments are enabled.

Default: true

<VeltComments recordingSummary={false} />

API Methods:

const commentElement = client.getCommentElement();
// to show recording summary
commentElement.enableRecordingSummary();
// to hide recording summary
commentElement.disableRecordingSummary();

5. Disable Recording countdown

Whether the Recorder countdown is enabled.

Default: true

<VeltComments recordingCountdown={false} />

API Methods:

// API method - comment element
const commentElement = client.getCommentElement();
// To enable recording countdown
commentElement.enableRecordingCountdown();
// To disable recording countdown
commentElement.disableRecordingCountdown();

// API method - recorder element
const recorderElement = client.getRecorderElement();
// To enable recording countdown
recorderElement.enableRecordingCountdown();
// To disable recording countdown
recorderElement.disableRecordingCountdown();

6. Custom Reactions

You can set custom reactions by passing a map that contains information about the reactions you want to add.

The map keys should be the reaction ID, and the map value should contain an object with either an url, svg, or emoji field to represent the reaction icon you want to use.

const customReactions = {
    "URL_EMOJI_ID": {
        "url": "EMOJI_URL"
    },
    "SVG_EMOJI_ID": {
        "svg": "EMOJI_SVG"
    },
    "TEXT_EMOJI_ID": {
        "emoji": "🤣" // emoji as a text
    }
};

<VeltComments customReactions={customReactions} />

API Methods:

const commentElement = client.getCommentElement();

const customReactions = {
    "URL_EMOJI_ID": {
        "url": "EMOJI_URL"
    },
    "SVG_EMOJI_ID": {
        "svg": "EMOJI_SVG"
    },
    "TEXT_EMOJI_ID": {
        "emoji": "🤣" // emoji as a text
    }
}
commentElement.setCustomReactions(customReactions);