Cord LogoDocs
Sign inStart now

Initialize Cord

Integration guide /

Get Cord up and running in the browser

Now that you've got the Cord SDK installed, the next step is to initialize Cord in your page. For React applications, this means adding the <CordProvider /> component.

Initialize Cord #

We recommend you wrap the root of your application with the <CordProvider />. This way you can use Cord components anywhere in your application.

React:
// In your create-react-app project, you can replace src/App.js with
// the following:
import { CordProvider } from "@cord-sdk/react";

function App() {

  // TODO: This is a sample token that will expire in 24h. To implement Cord
  // fully, you need to generate tokens in your backend and send them to the
  // client.
  //   See https://docs.cord.com/in-depth/authentication and
  //     https://docs.cord.com/reference/server-libraries for more information.
  return (
    <CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
      <div style={{ flex: 1 }}>
        <div style={{ margin: '0 auto', maxWidth: '500px' }}>
          <header style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <h1>Hello World!</h1>
          </header>
          <p>Let's get Cord-y!</p>
        </div>
      </div>
    </CordProvider>
  );
}

export default App;
Vanilla JavaScript:
<!-- Add this script tag to your application -->
<script>
  // TODO: This is a sample token that will expire in 24h. To implement Cord
  // fully, you need to generate tokens in your backend and send them to the
  // client.
  //   See https://docs.cord.com/in-depth/authentication and
  //     https://docs.cord.com/reference/server-libraries for more information.
  window.CordSDK.init({
    client_auth_token: "<CLIENT_AUTH_TOKEN>",
  });
</script>

// In your create-react-app project, you can replace src/App.js with
// the following:
import { CordProvider } from "@cord-sdk/react";

function App() {

  // TODO: This is a sample token that will expire in 24h. To implement Cord
  // fully, you need to generate tokens in your backend and send them to the
  // client.
  //   See https://docs.cord.com/in-depth/authentication and
  //     https://docs.cord.com/reference/server-libraries for more information.
  return (
    <CordProvider clientAuthToken="<CLIENT_AUTH_TOKEN>">
      <div style={{ flex: 1 }}>
        <div style={{ margin: '0 auto', maxWidth: '500px' }}>
          <header style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <h1>Hello World!</h1>
          </header>
          <p>Let's get Cord-y!</p>
        </div>
      </div>
    </CordProvider>
  );
}

export default App;
Copy

Check that the SDK is initialized #

In the developer console of your browser, run the following code:

JavaScript:
console.log(window.CordSDK.accessToken);
console.log(window.CordSDK.accessToken);
Copy

If everything is working as expected, you should see output that looks something like this:

Chrome developer console output of an access token

Ask Cordy