Link copied to clipboard!
Mobile navigation button - closed state

Floating Threads

Leave a comment and start a conversation anywhere on a page


This component is currently in BETA mode, and its default design and customizability options are subject to change.

When to use

The Floating Threads component allows you to leave a comment anywhere on the page. Think of it like the comment mode in Figma, for example. It not only provides you with a button to start commenting, but also renders all of your existing threads on that page.

This component renders a single button. Clicking on it will enter the comment mode, which allows users to click anywhere on the page to add a comment which will stick to that particular element on the page. After clicking, a composer will appear right next to where the user clicked, allowing them type a message. 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

  • import { beta } from "@cord-sdk/react";
    
    export const Example = () => {
      return (
        <beta.FloatingThreads location={{ "page": "index" }} />
      );
    };
    
    
  • <body>
      <div id="header">
        <cord-floating-threads location='{{ "page": "index" }}'></cord-floating-threads>
      </div>
    </body>
    

Properties

Attributes & Events

Properties
location optional default: current URL

The location concept for the floating threads component. It indicates which floating threads will be rendered on a page, as well as what the location value of the new floating threads created from that button will be.

showButton optional default: true

Whether to show the “add comment” button or not.

buttonLabel optional default: Add comment

The text label on the button. If set to an empty string, the button will not have a label.

iconUrl optional default: Comment icon

If provided, changes the URL of the icon. If set to an empty string, the button will get the default comment icon.

threadName optional default: current page's title

If a new thread is created, the title of that thread is set to this. Ignored if the thread already exists and auto generated if you do not set it.

Attributes
location optional default: current URL

The location concept for the floating threads component. It indicates which floating threads will be rendered on a page, as well as what the location value of the new floating threads created from that button will be.

show-button optional default: true

Whether to show the “add comment” button or not.

button-label optional default: Add comment

The text label on the button. If set to an empty string, the button will not have a label.

icon-url optional default: Comment icon

If provided, changes the URL of the icon. If set to an empty string, the button will get the default comment icon.

thread-name optional default: current page's title

If a new thread is created, the title of that thread is set to this. Ignored if the thread already exists and auto generated if you do not set it.

Events
cord-floating-threads:click optional

Callback invoked when the comment button is clicked.


CSS Variables

These can be used to customize the component. You can learn more about customization here.

Name Default Value
--cord-floating-threads-font-size 14px
--cord-floating-threads-line-height 20px
--cord-floating-letter-spacing normal
--cord-floating-threads-text-color --cord-secondary-button-content-color
##121314
--cord-floating-threads-background-color --cord-secondary-button-background-color
#F6F6F6

Next up