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.
Go to Settings. Then, Workspace Settings, Setup Instructions
Click on Chatbox setup instructions.
Select HTML.

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: 02/11/2024

Was this article helpful?

Thank you!