> ## 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

## 1. `onCommentClick` Callback

* When the user clicks on the comment thread, you can listen to it using this method.
* Example: Use this to fetch the context and make the necessary app state changes to navigate to the comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentThread
        annotationId="COMMENT_ANNOTATION_ID"
        onCommentClick={(data) => handleOnCommentClick(data)}
    />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-comment-thread annotation-id="COMMENT_ANNOTATION_ID"></velt-comment-thread>
    <script>
        const commentThreadTag = document.querySelector("velt-comment-thread");
        commentThreadTag.addEventListener('onCommentClick', (event) => {
            console.log('onCommentClick', event.detail);
        });
    </script>
    ```
  </Tab>
</Tabs>

## 2. Pass Comment Annotation Object

* You can pass a Comment Annotation object directly to render the comment thread
* When using annotations from other documents:
  * Comments will be read-only
  * Reactions and recordings will not be rendered
* This enables creating Kanban boards by fetching comment annotations from multiple documents using our REST APIs

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentThread annotation={COMMENT_ANNOTATION_OBJECT} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-thread annotation="STRINGIFIED_COMMENT_ANNOTATION_OBJECT"></velt-comment-thread>
    ```
  </Tab>
</Tabs>