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

# Feb 13 2024

## Versions

* Latest SDK: 1.0.83
* Latest Types: 1.0.100

## Location Support in System Comments

Users can now specify location when adding a new comment using [System Comments](/api-reference/rest-apis/v2/comments-feature/comment-annotations/add-comment-annotations).

```jsx theme={null}
{
  "data": {
    "apiKey": "YOUR_API_KEY",
    "authToken": "YOUR_AUTH_TOKEN",
    "documentId": "snippyly-tinymce-13-oct",

		// You can pass location object to set comment to any specific location
		"location": {
			"locationName": "YOUR_LOCATION",
			// You can optionally pass version in location object
			// to show comment on specific version only
			// Note: if you set version then id and name fields are mandatory
			"version": {
				"id": "v1",
				"name": "Version 1"
			}
		},

    "targetElement": {
      "elementId": "systemCommentTest",
      "targetText": "we want our custom elements",
      "occurrence": 1
    },
    "commentData": [
      {
        "commentText": "Replace: dolor sit amet consectetur adipisicing elit with this is test comment",
        "replaceContentHtml": "this is <strong style='color: blue'>bold text</strong> test comment",
        "from": {
          "email": "test@velt.dev",
          "name": "Test User"
        }
      }
    ]
  }
}
```

## Comment Read Receipts

Newly added comments that have not been seen by Users will now display with a small red dot.

<Frame>
  <iframe width="700px" height="400px" src="https://www.youtube.com/embed/u2VcZe5QKA8?si=qyzP4CVuAt9wVz_l" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" />
</Frame>

## Specifying where comments are allowed using Class Names and Query Selectors

Expanded options for specifying where comments are allowed using class names and query selectors in addition to ids.

Added the `allowedElementClassNames` and `allowedElementQuerySelectors` properties on the `<VeltComments/>` component to provide more flexibility in determining where comments can be placed.

[See Docs](/async-collaboration/comments/customize-behavior/general-controls)

HTML:

```html theme={null}
<velt-comments
  allowed-element-class-names='["class-name-1", "class-name-2"]'
  allowed-element-query-selectors='["#id1.class-name-1"]'
></velt-comments>
```

React:

```jsx theme={null}
<VeltComments
  allowedElementClassNames={["class-name-1", "class-name-2"]}
  allowedElementQuerySelectors={["#id1.class-name-1"]}
/>;
```

API Methods:

```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.allowedElementClassNames(["class-name-1", "class-name-2"]);
commentElement.allowedElementQuerySelectors(["#id1.class-name-1"]);
```

<Frame>
  <iframe width="700px" height="400px" src="https://www.youtube.com/embed/ERs2BYP84RA?si=O2qnAlNDhdFvIJQA" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" />
</Frame>