> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.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 the Crisp live-chat chatbox on ReactJS apps
__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**](https://app.crisp.chat).
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
```
||| Replace `` `MY_CRISP_WEBSITE_ID` `` in the example below with your real Website ID. Otherwise, the chatbox will not load.
---
# 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 ( <> My awesome app
);}
```
---
# 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](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/).
* ****Single-page apps**** → learn more in [How can I embed Crisp inside a single-page app?](/en/article/how-can-i-embed-crisp-inside-a-single-page-app-1ptfyyx/).