Articles on: Install Crisp

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 click here

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

Copy the JavaScript code to retrieve your CRISP_WEBSITE_ID.

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 (
      <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:

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 (
    <html lang="en">
    <CrispWithNoSSR />
    <body>
    {children}
    </body>
    </html>
  )
}

Updated on: 24/02/2025

Was this article helpful?

Thank you!