Link copied to clipboard!


Display conversations anywhere in your product

The Thread component renders a single conversation thread. For new threads, a message composer is rendered. Threads contain everything your users need to have a conversation.



  • import { Thread } from "@cord-sdk/react";
    export const Example = () => {
      return (
          threadId={"<id of thread>"}
          location={{ "page": "index" }}
          onThreadInfoChange={({ messageCount }) =>
            console.log("thread has", messageCount, "messages")
          onThreadClose={() =>
            console.log("User clicked close button")
          onThreadResolved={() =>
            console.log("User resolved the thread")
  • <cord-thread
      thread-id="<id of thread>"
      location='{{ "page": "index" }}'


Name Default Description
location current URL The location for the thread. This only affects the location that a new thread will be associated with. This has no effect on existing threads.
thread-id   required The id of the thread to render. To start a new thread provide a thread-id you have not used before.
collapsed false When true, thread is rendered in collapsed mode.
show-header false When true, a thread header with action buttons is shown at the top of the thread.


Name Description
cord-thread:threadinfochange This event is fired when the thread is first loaded and when the thread information changes. At the moment thread information contains only the number of non-deleted messages in thread. The event.detail[0] is the thread info object which has type { messageCount: number }.
cord-thread:close This event is fired when a user clicks on the close button in the thread header.
cord-thread:resolved This event is fired when a user resolves the thread.

CSS Custom Properties

Name Default
--cord-composer-height-max 40vh
--cord-composer-height-min 40px
--cord-avatar-border-radius 4px
--cord-avatar-text-color --cord-color-base
--cord-avatar-background-color --cord-color-brand-primary
--cord-facepile-background-color --cord-color-base
--cord-facepile-avatar-border-width 2px
--cord-facepile-avatar-overlap 4px
--cord-tooltip-background-color --cord-color-brand-primary
--cord-tooltip-content-color --cord-color-base
--cord-annotation-pin-color --cord-color-brand-primary
--cord-annotation-pin-outline-color --cord-color-base
--cord-annotation-pin-z-index 2147483643
--cord-annotation-pin-rotate 0deg
--cord-annotation-arrow-color --cord-color-brand-primary
--cord-annotation-arrow-outline-color --cord-color-base
--cord-thread-background-color --cord-color-base
--cord-thread-border 1px solid var(--cord-color-base-x-strong)
--cord-thread-border-radius --cord-border-radius-medium
--cord-thread-send-button-font-size 14px
--cord-thread-send-button-text-color --cord-primary-button-content-color
--cord-thread-send-button-text-color--hover --cord-primary-button-content-color--hover
--cord-thread-send-button-text-color--active --cord-primary-button-content-color--active
--cord-thread-send-button-text-color--disabled --cord-primary-button-content-color--disabled
--cord-thread-send-button-background-color --cord-primary-button-background-color
--cord-thread-send-button-background-color--hover --cord-primary-button-background-color--hover
--cord-thread-send-button-background-color--active --cord-primary-button-background-color--active
--cord-thread-send-button-background-color--disabled --cord-primary-button-background-color--disabled
--cord-thread-send-button-padding 8px

In this section