> ## 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](https://app.crisp.chat), head over to Settings > Workspace Settings > Setup & Integrations
3. Copy your Website ID
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 ( ) }}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 ( {children} )}
```