React

Setup with React (Vite, Create React App, or any React project).

Install the package

Add @cossistant/react to your React project:


pnpm add @cossistant/react

Configure your API key

You have two options for providing your API key:

The library automatically detects the COSSISTANT_API_KEY environment variable. This works in any environment where process.env is available at build time:

.env

COSSISTANT_API_KEY=pk_test_xxxx

Vite users

Vite doesn't expose process.env by default. Use the "Explicit prop" tab instead, or configure Vite to expose process.env.COSSISTANT_API_KEY.

Where to find your public API key?

You can find your public API key at the end of your onboarding or can access it anytime from the settings page.

Add the SupportProvider

Wrap your app with SupportProvider at the root level:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider } from "@cossistant/react";
import App from "./App";
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <SupportProvider publicKey={import.meta.env.VITE_COSSISTANT_API_KEY}>
      <App />
    </SupportProvider>
  </React.StrictMode>
);

Import the CSS

Import the support widget styles in your main CSS file:

src/index.css

@import "@cossistant/react/support.css";
 
/* Your existing styles */

Or import it directly in your entry file:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider } from "@cossistant/react";
import App from "./App";
import "@cossistant/react/support.css";
import "./index.css";

Add the <Support /> component anywhere in your app:

src/App.tsx

import { Support } from "@cossistant/react";
 
function App() {
  return (
    <div>
      <h1>Welcome to my app!</h1>
      <Support />
    </div>
  );
}
 
export default App;

Done!

You're ready to go! You now have a fully functional support widget in your React app.

Move on to the basic usage guide to learn how to customize your support widget.

Complete Example (Vite)

Here's a minimal Vite + React setup:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider, Support } from "@cossistant/react";
import "@cossistant/react/support.css";
 
function App() {
  return (
    <div style={{ padding: "2rem" }}>
      <h1>My App</h1>
      <p>Click the chat button to get support!</p>
      <Support />
    </div>
  );
}
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <SupportProvider publicKey={import.meta.env.VITE_COSSISTANT_API_KEY}>
      <App />
    </SupportProvider>
  </React.StrictMode>
);

NextJS Basic usage

On this page

Install the package Configure your API key Add the SupportProvider Import the CSS Add the Support widget Done!Complete Example (Vite)