> ## 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 install Crisp Live Chat on Next.js ?

**Are you using Next.js / React to create your new web application? Here is how you can add the Crisp chatbox widget on it in less than 2 minutes.**

➡️ To know more about Crisp [chat widget](https://crisp.chat/en/livechat/) click here

1. Create an account on Crisp.  
2. On app.crisp.chat, head over to Settings > Workspace Settings > Setup & Integrations  
3. Copy your Website ID

![](https://storage.crisp.chat/users/helpdesk/website/-/c/c/2/2/cc22ebce0e127000/315a4814-d6ab-4ee6-9a62-ff6fac_1h2ovf5.png)

7. Copy the JavaScript code to retrieve your `CRISP_WEBSITE_ID`.

8. Install Crisp in your React project:

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

9. Inside your `components` folder, create a file `crisp.js` and paste this code below. Replace the `CRISP_WEBSITE_ID` with yours.

```
import React, { Component } from "react";

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

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

render () {
    return null;
  }
}
export default CrispChat
```

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

Then, we tell can import Crisp in our component.

```
import dynamic from 'next/dynamic'

const CrispWithNoSSR = dynamic(
  () => import('../components/crisp'),
  { ssr: false }
)
```

and Finally include it in your App:

```
class App extends React.Component {
  render () {
    return (
      <Router>
          <CrispWithNoSSR />
      </Router>)
  }
}
export default App
```

### Next.js 13

Starting from Next.js 13, you will need to make some minor adjustments to the code provided above:

1. In the `crisp.js` file, we need to change the class component to a functional component, and we also need to add `use client` at the beginning:

```
"use client"

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

const CrispChat = () => {
  useEffect(() => {
    Crisp.configure("MY_CRISP_WEBSITE_ID");
  });

return null;
}

export default CrispChat;
```

2. In the `layout.js` file, remove `{ ssr: false }`:  
```
import dynamic from 'next/dynamic'

export default function RootLayout({ children }) {
  const CrispWithNoSSR = dynamic(
    () => import('../components/crisp')
  )

return (
    <html lang="en">
    <CrispWithNoSSR />
    <body>
    {children}
    </body>
    </html>
  )
}
```