This article explains how to add the Crisp chatbox to a React application.

For React and other single-page applications, use the official crisp-sdk-web package. It loads the Crisp chatbox from your app and gives you access to Web SDK methods for user data, session continuity, events, and more.

Copy your Website ID

You need your Crisp Website ID before configuring the SDK.

To find your Website ID:

1. Open Crisp.
2. Navigate to Settings → Workspace Settings → Setup & Integrations.
3. Open Chatbox setup instructions.
4. Copy your Website ID.

Install the Crisp Web SDK

Install the official Web SDK package in your React project.

npm install crisp-sdk-web

Add Crisp to your React app

Create a small component that configures Crisp when the app loads in the browser.

import { useEffect } from "react";
import { Crisp } from "crisp-sdk-web";

export function CrispChat() {
  useEffect(() => {
    Crisp.configure("MY_CRISP_WEBSITE_ID");
  }, []);

  return null;
}

Then load it from your main app component:

import { CrispChat } from "./CrispChat";

export default function App() {
  return (
    <>
      <CrispChat />
      <div>My awesome app</div>
    </>
  );
}

Use more Web SDK features

The Crisp Web SDK can also delay loading, set user information, force a locale, configure session continuity, and trigger chatbox actions.

Useful resources:

• Web SDK package → read the official crisp-sdk-web documentation.
• Single-page apps → learn more in How can I embed Crisp inside a single-page app?.

Updated on: 03/05/2026