Cord LogoDocs
Sign inStart now

Selection Comments

Components /
Ask the Community

Select some text and leave a comment

Try selecting some of this text!

Live Demo

When to use #

Wrapping parts of your HTML with <experimental.SelectionComments /> enables leaving comments after selecting text, just like in Notion. This component also renders all the existing comments on a page.

When users select text in an HTML element nested inside <experimental.SelectionComments />, a customizable "Comment" button will appear. Clicking on it will render a floating composer, allowing users to leave a comment. You can retrieve and reply to an existing comment by clicking on the pins on the page.

This component pairs well with:

How to use #

React:
import { betaV2 } from "@cord-sdk/react";

export const Example = () => {
  return (
    <experimental.SelectionComments location={{ "page": "index" }} >
      <p>Try selecting this text!</p>
    </experimental.SelectionComments>
  );
};
Vanilla JavaScript:
<body>
  <div id="header">
    <cord-selection-comments location='{ "page": "index" }'>
      <p>Try selecting this text</p>
    </cord-selection-comments>
  </div>
</body>
import { betaV2 } from "@cord-sdk/react";

export const Example = () => {
  return (
    <experimental.SelectionComments location={{ "page": "index" }} >
      <p>Try selecting this text!</p>
    </experimental.SelectionComments>
  );
};
Copy

Properties #

location #

optional
string
The location determines which comments will be rendered on a page, and the location of new comments added to the page.
This value default to the current page URL (window.location).

buttonLabel #

optional
string
The text label on the button. If set to an empty string, the button will not have a label.
This value defaults to the string Add comment.

iconUrl #

optional
url
If provided, changes the URL of the icon. If set to an empty string, the button will get the default comment icon.
If unset, this value will default to a URL for Cord's standard comment icon.

Want to customize the components further?

Head to our CSS customization guide

Not finding the answer you need? Ask our Developer Community

Ask Cordy