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

# Customize Behavior

For type definitions, see [`VeltCommentComposerProps`](/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.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer context={{ "key": "value" }} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer context='{"key": "value"}'></velt-comment-composer>
    ```
  </Tab>
</Tabs>

## documentId

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer documentId='YOUR_DOCUMENT_ID' />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer document-id='YOUR_DOCUMENT_ID'></velt-comment-composer>
    ```
  </Tab>
</Tabs>

## folderId

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer folderId='YOUR_FOLDER_ID' />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer folder-id='YOUR_FOLDER_ID'></velt-comment-composer>
    ```
  </Tab>
</Tabs>

## locationId

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer locationId='YOUR_LOCATION_ID' />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer location-id='YOUR_LOCATION_ID'></velt-comment-composer>
    ```
  </Tab>
</Tabs>

## placeholder

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer placeholder="Share your thoughts..." />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer placeholder="Share your thoughts..."></velt-comment-composer>
    ```
  </Tab>
</Tabs>

## targetComposerElementId

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer targetComposerElementId="composer-1" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer target-composer-element-id="composer-1"></velt-comment-composer>
    ```
  </Tab>
</Tabs>

## clearComposer

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

## submitComment

Programmatically submit a comment from a composer. Refer to [`submitComment()`](/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()`](/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.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentComposer readOnly={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-composer read-only="true"></velt-comment-composer>
    ```
  </Tab>
</Tabs>