​
1. Add comment on selected text

By default, when you highlight over any text in textMode a Comment Tool button will appear. Clicking the button will add a comment on the highlighted text.

If you want to trigger the comment using an API method call instead of clicking the button, you can do the following:

const commentElement = client.getCommentElement();
// to add comment on selected text
commentElement.addCommentOnSelectedText();

​
2. Add Comments on specific elements

Adds a Comment on a specific element by ID.

To add a comment on a specific element through an API method, use the addCommentOnElement() method and pass in an object with the schema shows in the example:


const element = {
  "targetElement": {
    "elementId": "element_id", // optional (pass elementId if you want to add comment on a specific element)
    "targetText": "target_text", // optional (pass targetText if you want to add comment on a specific text)
    "occurrence": 1, // optional (default: 1) This is relevant for text comment. By default, we will attach comment to the first occurence of the target text in your document. You can change this to attach your comment on a more specific text.
  	"selectAllContent": true, // Set to `true` if you want to select all the text content of the target element.
  },
  "commentData": [
    {
      "commentText": "This is awesome! Well done.", // To set plain text content
      "commentHtml": "This <span style=\"color: green; background-color: aliceblue; display: inline-block; padding: 4px; border-radius: 4px;\">is test</span> comment.", // To set HTML formatted content
      "replaceContentText": "This is new comment", // provide this replaceContentText to replace current text with
      "replaceContentHtml": "<span>This is <b>new</b> comment.</span>", // If replacement text contains html formatted text, then provide it here
    }
  ],
  "status": "open", // optional (default: open)
}

const commentElement = client.getCommentElement();
commentElement.addCommentOnElement(element);

​
3. Add Manual Comment

  • This feature is particularly useful for complex UIs where you need precise control over the placement of Comment Pins.
  • Using this you can manually set the position of Comment Annotations.
  • Handle click events on your canvas/document and use the this method to create a comment with custom metadata.
const context = {
  postion: {x: 200, y: 100},
};
const commentElement = client.getCommentElement();
const config: ManualCommentAnnotationConfig = {
	context: context, // your context here
};
commentElement.addManualComment(config);

​
4. Turning on and off Comment Mode

Turns Comment mode on or off.

When you click on the comment tool, it turns on comment mode and user can attach comment to any element on the DOM. Using this method you can programatically turn on the commenting mode.

const commentElement = client.getCommentElement();
commentElement.enableCommentMode();
commentElement.disableCommentMode();

​
5. Select CommentAnnotation by Annotation ID

  • Use this to programatically select a comment annotation by its id.
  • Example: If the user opens a comment url from an email notification, you can use this open the comment dialog after your page has finished rendering.
const commentElement = client.getCommentElement();
commentElement.selectCommentByAnnotationId("COMMENT_ANNOTATION_ID");

​
6. Scroll the page directly to the comment element

This will scroll the page to the element directly. This will work if the element is present on the DOM.

const commentElement = client.getCommentElement();
commentElement.scrollToCommentByAnnotationId('annotationId')

​
7. Delete selected comment

To delete a comment using an API method, use the deleteSelectedComment() method.

if (client) {
  const commentElement = client.getCommentElement();
  commentElement.deleteSelectedComment();
}

​
8. Get the Xpath of the DOM element on which the comment was added

This will return the Xpath of the DOM element on which the comment was added.

const commentElement = client.getCommentElement();
let elementRef = commentElement.getElementRefByAnnotationId('annotationId')

​
9. Update Comment Dialog Position

  • Sometimes when you manually set the position of the Comment Pin, the Comment Dialog might not position itself near the pin in certain scenarios like scrolling, zooming the page when the comment dialog is open.
  • Use this to manually trigger an update. The dialog will reposition itself near the pin.
const commentElement = client.getCommentElement();
commentElement.updateCommentDialogPosition();

Was this page helpful?

Inbox Setup@Mentions