> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Behavior

For type definitions, see [`VeltCommentComposerProps`](https://velt.dev/docs/api-reference/sdk/models/data-models#veltcommentcomposerprops).

## context

Pass custom context data to comments created via the Comment Composer. The provided context object will be added to the comment annotation, allowing you to associate additional metadata with comments.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer context={{ "key": "value" }} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer context='{"key": "value"}'></velt-comment-composer>
> ```

## documentId

Set a specific document ID for comments created via the Comment Composer. This allows you to associate comments with a particular document.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer documentId='YOUR_DOCUMENT_ID' />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer document-id='YOUR_DOCUMENT_ID'></velt-comment-composer>
> ```

## folderId

Set a specific folder ID for comments created via the Comment Composer. This allows you to associate comments with a particular folder.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer folderId='YOUR_FOLDER_ID' />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer folder-id='YOUR_FOLDER_ID'></velt-comment-composer>
> ```

## locationId

Set a specific location ID for comments created via the Comment Composer. This allows you to associate comments with a particular location.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer locationId='YOUR_LOCATION_ID' />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer location-id='YOUR_LOCATION_ID'></velt-comment-composer>
> ```

## placeholder

Customize the input placeholder text in the comment composer. Overrides default placeholders.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer placeholder="Share your thoughts..." />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer placeholder="Share your thoughts..."></velt-comment-composer>
> ```

## targetComposerElementId

Set a unique identifier for the composer to enable programmatic submission via the submitComment() method.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer targetComposerElementId="composer-1" />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer target-composer-element-id="composer-1"></velt-comment-composer>
> ```

## clearComposer

Reset composer state including text, attachments, recordings, tagged users, assignments, and custom lists. Refer to [`clearComposer()`](https://velt.dev/docs/async-collaboration/comments/customize-behavior#clearcomposer) for more details.

## submitComment

Programmatically submit a comment from a composer. Refer to [`submitComment()`](https://velt.dev/docs/async-collaboration/comments/customize-behavior#submitcomment) for more details.

## getComposerData

Get the current state of the composer including text, attachments, recordings, tagged users, assignments, and custom lists. Refer to [`getComposerData()`](https://velt.dev/docs/async-collaboration/comments/customize-behavior#getcomposerdata) for more details.

## readOnly

Disable comment input at the component level. When set to `true`, the composer will be in read-only mode.

The component-level `readOnly` prop takes precedence over the global read-only setting when explicitly set.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentComposer readOnly={true} />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-composer read-only="true"></velt-comment-composer>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.