Install Cord

Get the Cord SDK into your app


Let's get you up and running with your first Cord components. To begin, you'll need to install the Cord SDK.

Select Your Client-Side Language: React or Vanilla Javascript #

Cord offers components for the React framework as well as vanilla WebComponents that can be used with any framework. There are live integrations of Cord built in React, Vue, and even in static HTML.

Use the toggle buttons here to select which language you would like this guide to see code examples in:

Anywhere in Cord's documentation that you see code snippets, they will be displayed (when possible) in the framework you've selected.

Install the Cord SDK #

React:
# Run this command in your terminal:

# npm:
npm install @cord-sdk/react
# yarn:
yarn add @cord-sdk/react
Vanilla JavaScript:
<!-- This goes in your <head> tag -->
<script src="https://app.cord.com/sdk/v1/sdk.latest.js"></script>
# Run this command in your terminal:

# npm:
npm install @cord-sdk/react
# yarn:
yarn add @cord-sdk/react
Copy

Note: if you have a Content Security Policy, you might have to whitelist Cord. The two main files, latest.js and latest.css are both served from app.cord.com. For more information, see our full CSP list.
Don't have an app at the moment?

If you want to test drive Cord's components without working on top of an existing codebase, we've got you. We recommend you use the popular Vite library to get a testing environment up and running in no time.

Use the following command to spin up an empty React application. In the following steps, we'll add Cord components.

Command Line:
#npm:
npm create vite@latest cord-test-app

#yarn
yarn create vite cord-test-app
#npm:
npm create vite@latest cord-test-app

#yarn
yarn create vite cord-test-app
Copy

Select whichever framework you'd like and then choose your preference of language. Cord is written in TypeScript and features full typing native to the SDK, which makes the TypeScript experience particularly nice.

Once you get the empty application running, you're ready to add your first Cord components.

Initialize Cord #

In the next step, you'll initialize Cord →


Ask Cordy