Link copied to clipboard!

Quick Start

Get your app ID and secret

Create an application in the Console and locate your app ID and secret.

Your app ID identifies your application, and your secret is what enables us to authenticate your requests as genuine.

Never share your secret with anyone or include it in client code.

Generate a signed client auth token in your backend

Add a request handler to your backend that returns a client auth token to securely transfer the user’s identity to Cord.

  • Install our server-side library.

    npm install @cord-sdk/server

    Implement the request handler.

    import { getClientAuthToken } from "@cord-sdk/server";

function generateCordClientAuthToken(user, org) {
  return getClientAuthToken(APP_ID, APP_SECRET, {
    user_id: user.id,
    organization_id: org.id,
    user_details: {
      email: user.email,
      name: user.name,
      profile_picture_url: user.profilePictureURL,
    },
    organization_details: {
      name: org.name,
    },
  });
}

  • Using an appropriate library, sign a JWT containing the following data in the payload. The token should be signed using the HS512 algorithm and your secret, with a short expiration (typically one minute).

    {
  app_id: APP_ID,
  user_id: user.id,
  organization_id: org.id,
  user_details: {
    name: user.name,
    email: user.email,
    profile_picture_url: user.profilePictureURL,
  },
  organization_details: {
    name: org.name,
  }
}

Add Cord to your application

Load and initialize the Cord client code and add a sidebar component to start collaborating.

  • import { CordProvider, Sidebar } from "@cord-sdk/react";

export const App = () => (
  <CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
    <YourApp />
    <Sidebar />
  </CordProvider>
);

  • <!DOCTYPE html>
<html>
  <head>
    <script src="https://app.cord.com/sdk/v1/sdk.latest.js"></script>
    <script>
      window.CordSDK.init({
        client_auth_token: "<CLIENT_AUTH_TOKEN>",
      });
    </script>
    <title>My application</title>
  </head>
  <body>
    <div>Your application goes here.</div>
    <cord-sidebar />
  </body>
</html>

Get a sample token

Click the button to generate and copy a sample token that allows you to get started. It will expire and be invalidated in 24 hours, so make sure you refresh it.

Customize the Cord experience

You’re up and running! From here, look through the component library to see how to add features like page presence to your application, or check out the customization options to understand how you can make Cord match the rest of your product.

Check out our playground to get a better idea of the different ways you could use Cord.

On this page