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!