This article explains how to install the Crisp Live Chat widget in a React application using the official crisp-sdk-web package.

The Crisp website chat widget lets visitors contact your support team or interact with your AI customer support agent directly from your React app.

The Web SDK also gives you access to advanced options such as user data, session continuity, events, locale settings, and chatbox actions.

In this guide, you will learn how to:

• Watch the React installation walkthrough → follow the complete setup in video format
• Copy your Website ID → connect the app to the correct Crisp workspace
• Install the Crisp Web SDK → add the official package to your project
• Add Crisp to your React app → load the chat widget when your application starts
• Check the installation → confirm that messages reach your Crisp Inbox
• Use advanced Web SDK features → customize the chat experience

Watch the React installation walkthrough

This video shows how to install crisp-sdk-web, configure your Website ID, create the React component, and confirm that the Crisp chatbox is working.

Copy your Website ID

Your Website ID connects the React application to the correct Crisp workspace.

To find your Website ID:

1. Open Crisp
2. Go to Settings → Workspace Settings → Setup & Integrations
3. Find the Website ID field
4. Click Copy

You can also follow the dedicated guide: Where to find my Website ID.

Install the Crisp Web SDK

Open a terminal from your React project and install the official package:

npm install crisp-sdk-web

The package is designed to load the Crisp chatbox in web applications built with frameworks such as React, Vue, or Angular.

Add Crisp to your React app

Create a component named CrispChat.jsx inside your project.

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

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

  return null;
}

Replace MY_CRISP_WEBSITE_ID with the Website ID copied from your Crisp workspace.

The component does not display any React interface itself. It initializes Crisp in the browser and loads the chat widget on top of your application.

Then import the component into your main app:

import { CrispChat } from "./components/CrispChat";

export default function App() {
  return (
    <>
      <CrispChat />

      <main>
        <h1>My React app</h1>
      </main>
    </>
  );
}

Check the installation

Start your React application and open it in a browser.

The Crisp chatbox should appear in the bottom corner of the page.

Send a test message, then open the Crisp Inbox to confirm that the conversation reaches the correct workspace.

If the chatbox does not appear, check that:

• The crisp-sdk-web package is installed
• The Website ID is correct
• The CrispChat component is mounted in your application
• The application is running in a browser
• A browser extension is not blocking the chatbox script

Use advanced Web SDK features

Once Crisp is installed, you can use the Web SDK to adapt the chat experience to your React application.

For example, you can:

• Set the visitor's name, email address, phone number, or avatar
• Force the chatbox language
• Delay the initial chatbox loading
• Preserve a session across authenticated devices
• Open, close, show, or hide the chatbox from your interface
• Listen to chatbox events from your application

For implementation details, read the official crisp-sdk-web documentation and the $crisp JavaScript SDK guide.

For navigation behavior and other single-page application considerations, read How to embed Crisp inside a single-page app.

Updated on: 31/07/2026