Link copied to pasteboard!

Components

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.

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 InitOptions = {
  client_auth_token: string;
  enable_tasks?: boolean;
};

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.

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.

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