First, install @cobaltio/react-cobalt-js and @cobaltio/cobalt-js and via the terminal.

npm install --save @cobaltio/cobalt-js @cobaltio/cobalt-js


Import Provider & Config

import { Provider, Config } from "@cobaltio/react-cobalt-js";

Render Cobalt Connect

Perform the on click action to render the react component of cobalt connect

  • Config component needs to be wrapped inside the Provider component.
  • Pass the Cobalt session token (that you generated using the Cobalt backend SDK) to the provider.
<Provider sessionToken={ cobaltToken }>
        // ideally you'd render the Config component inside a modal.
        // the component only gets rendered when `slug` is passed.
            id="SOME_UNIQUE_CONFIG_ID" // Optional
            slug="APP_SLUG" // application type / slug
            // dynamic labels payload (optional)
            labels={{ /* PAYLOAD */ }}
            // you can override the component's container style if you want
                borderRadius: 8,
                maxWidth: 450,


For an example implementation, you can check out the App.js file in the example directory.