> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.co-din.com/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 ?

Articles on: [Install Crisp](/en/category/install-crisp-8bn075/)

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  
  
*   Create an account on Crisp.
  
*   Go to ` Settings`. Then, ` Website Settings`.
  
*   Next to your website, click on ` Settings`.
  
*   Click on ` Setup instructions`.
  
*   Click on ` Chatbox setup instructions`.
  
*   Select ` HTML`.
  
  
![](https://storage.crisp.chat/users/helpdesk/website/6158f5ce6e002000/b85d86a0-e739-4f85-93aa-bd1c6a_1blq3dm.png)  
  
*   Copy the JavaScript code to retrieve your ` CRISP_WEBSITE_ID`.
  
  
![](https://storage.crisp.chat/users/helpdesk/website/7b1e97a5c60ac000/baef265d-2959-4120-99f1-3b4628_1yz75ms.png)  
  
*   Install Crisp in your React project:
  
  

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

  
  
*   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:  
  
*   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;```

  
  
*   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} ) }```

Updated on: 11/03/2024