> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# How to Install Crisp Chat Widget on a React.js App
*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](https://crisp.chat/en/livechat/) lets visitors contact your support team or interact with your [AI customer support agent](https://hugo.ai/en/) 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](#1-watch-the-react-installation-walkthrough) → follow the complete setup in video format
* [Copy your Website ID](#1-copy-your-website-id) → connect the app to the correct Crisp workspace
* [Install the Crisp Web SDK](#1-install-the-crisp-web-sdk) → add the official package to your project
* [Add Crisp to your React app](#1-add-crisp-to-your-react-app) → load the chat widget when your application starts
* [Check the installation](#1-check-the-installation) → confirm that messages reach your Crisp Inbox
* [Use advanced Web SDK features](#1-use-advanced-web-sdk-features) → customize the chat experience
---
# ${color}[#0080dd](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.
${youtube}[How to install Crisp Live Chat on a React app](evLIRMtSnmg)
---
# ${color}[#0080dd](Copy your Website ID)
Your Website ID connects the React application to the correct Crisp workspace.
**To find your Website ID:**
1. Open [**Crisp**](https://app.crisp.chat)
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**](https://help.crisp.chat/en/article/where-to-find-my-website-id-1ylqx1s/).
---
# ${color}[#0080dd](Install the Crisp Web SDK)
Open a terminal from your React project and install the official package:
```bash
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.
||| This guide is for React web applications. For a React Native mobile application, use the dedicated React Native Chat SDK instead.
---
# ${color}[#0080dd](Add Crisp to your React app)
Create a component named `CrispChat.jsx` inside your project.
```jsx
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:
```jsx
import { CrispChat } from "./components/CrispChat";
export default function App() {
return (
<>
My React app
);
}
```
| Mount the `CrispChat` component once near the root of your application so the chatbox remains available while users navigate between pages.
---
# ${color}[#0080dd](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](https://crisp.chat/en/shared-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
---
# ${color}[#0080dd](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](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/) and the [$crisp JavaScript SDK guide](https://help.crisp.chat/en/article/how-to-use-the-crisp-chatbox-javascript-sdk-1lp254r/).
For navigation behavior and other single-page application considerations, read [**How to embed Crisp inside a single-page app**](https://help.crisp.chat/en/article/how-can-i-embed-crisp-inside-a-single-page-app-1ptfyyx/).