Link copied to clipboard!

Components

Add collaboration to your application

We use Web Components to render Cord HTML into your page. This means you can just include them in your HTML code as any other tag and the element will be populated with content and behavior by the SDK.

You can also use these components as React components. The React API documentation explains how to install and initialize our React library.

component-sidebar-label.png

Setup

The client-side JavaScript library is located at https://app.cord.com/sdk/v1/sdk.latest.js and should be loaded in a <script> tag in your page’s <head>.

To initialize the library, call window.CordSDK.init() with a client auth token.

<head>
  <script src="https://app.cord.com/sdk/v1/sdk.latest.js"></script>
  <script>
    window.CordSDK.init({
      client_auth_token: "<CLIENT_AUTH_TOKEN>",
    });
  </script>
</head>
type BlurDisplayLocation = "everywhere" | "outside_page";

type InitOptions = {
  client_auth_token: string;
  enable_tasks?: boolean;
  blur_screenshots?: boolean;
  show_blurred_screenshots?: BlurDisplayLocation;
};

function init(options: InitOptions);

Options

Options Type Description
client_auth_token string required A client auth token that is signed using your secret and contains the user’s details.
enable_tasks boolean optional Whether to enable task management functionality. Defaults to true.
blur_screenshots boolean optional beta Whether to blur screenshots taken on this page. Defaults to false.
show_blurred_screenshots blur location optional beta Where to show blurred screenshots to non-authors. Options are 'everywhere' (always show blurred screenshots) or 'outside_page' (show blurred screenshots except in the location the screenshot was taken). Defaults to 'outside_page'.

Customization

CSS variables (also known as “CSS custom properties”) allow you to customize the look and feel of the Cord components: colors, spacing, fonts, etc. so that they look native to your application’s theme.

Each component has a set of CSS variables specific to it, listed on the component’s documentation page. You define their values in your own CSS stylesheet.

Figma template

Decide how you want to use and customize the components by adding them to your designs. Get the Figma template →

Events

React components have callback props for each event that component emits, for example:

<Sidebar onOpen={() => console.log("sidebar is open")}>

When using the web components directly, you can listen for these events using the standard DOM event system. Note that the event names are prefixed with the name of the component that emits them, to avoid confusing them with non-Cord DOM events:

<cord-sidebar id="sidebar" />

<script>
  document
    .getElementById("sidebar")
    .addEventListener("cord-sidebar:open", () => {
      console.log("sidebar is open");
    });
</script>

In this section

Sidebar

Sidebar Launcher

Page Presence

Presence Facepile

Presence Observer

Thread

Thread List

Inbox

Inbox Launcher

Settings