Artikelen over: 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>  )}

Bijgewerkt op: 12/02/2026

Was dit artikel nuttig?

Dankuwel!