> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.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 do I use Crisp with ReactJS

**Installing Crisp with React is very easy. Here is the solution**

1. Create an account on Crisp: app.crisp.chat  
2. Go to **Settings** from the bottom-left icon  
3. Navigate to **Settings > Workspace Settings > Setup Instructions**  
4. Click on **Chatbox setup instructions** and copy the HTML code :)

![](https://storage.crisp.chat/users/helpdesk/website/-/2/6/2/b/262b5e2b57d40a00/c988b79a-b972-4946-9495-cb778e_atpvaf.png)

5. Install Crisp in your React project:

```
npm install crisp-sdk-web
```

6. Go to your React codebase and update the main component.

```
import React, { Component } from "react";
import { Crisp } from "crisp-sdk-web";

class App extends Component {
  componentDidMount() {
    Crisp.configure("MY_CRISP_WEBSITE_ID");
  }

render() {
    return (
      <div>
        My Awesome App
      </div>
    );
  }
}

export default App;
```

||| Make sure to replace `CRISP_WEBSITE_ID` with yours. Otherwise, this will not work!

### Using the Web SDK

The Crisp Web SDK offers many different options such as many loading, as well as setting user information.

You can find more information from your our documentation on [https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/)