Feb 13 2024

{
  "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"
        }
      }
    ]
  }
}

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

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

const commentElement = client.getCommentElement();
commentElement.allowedElementClassNames(["class-name-1", "class-name-2"]);
commentElement.allowedElementQuerySelectors(["#id1.class-name-1"]);