How to install the Crisp live-chat chatbox on Next.js apps

This article explains how to add the Crisp chatbox to a Next.js application.

For Next.js and other single-page applications, the recommended setup is to use the official crisp-sdk-web package. This keeps Crisp loaded only in the browser and gives you access to the Web SDK methods when you need them.

Copy your Website ID

You need your Crisp Website ID before configuring the SDK.

To find your Website ID:

Open Crisp.
Navigate to Settings → Workspace Settings → Setup & Integrations.
Find the Website ID field.
Copy the value.

Copy the Website ID from Crisp

Install the Crisp Web SDK

Install the official Web SDK package in your Next.js project.

npm install crisp-sdk-web

Replace MY_CRISP_WEBSITE_ID in the examples below with your real Website ID. Otherwise, the chatbox will not load.

Next.js App Router setup

Use this setup if your project uses the app directory, introduced in Next.js 13.

Create a client component

Create a file such as app/components/CrispChat.tsx:

"use client";

import { useEffect } from "react";
import { Crisp } from "crisp-sdk-web";

export default function CrispChat() {
  useEffect(() => {
    Crisp.configure("MY_CRISP_WEBSITE_ID");
  }, []);

  return null;
}

Load it from your layout

Import the component in app/layout.tsx:

import CrispChat from "./components/CrispChat";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <CrispChat />
        {children}
      </body>
    </html>
  );
}

Next.js Pages Router setup

Use this setup if your project still uses the pages directory.

Create the Crisp component

Create components/CrispChat.tsx:

import { useEffect } from "react";
import { Crisp } from "crisp-sdk-web";

export default function CrispChat() {
  useEffect(() => {
    Crisp.configure("MY_CRISP_WEBSITE_ID");
  }, []);

  return null;
}

Load it from your app file

Import it in pages/_app.tsx:

import type { AppProps } from "next/app";
import CrispChat from "../components/CrispChat";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <CrispChat />
      <Component {...pageProps} />
    </>
  );
}

Useful Web SDK resources

The Web SDK can also set user information, delay loading, force a locale, configure session continuity, and trigger chatbox actions.

Useful resources:

Web SDK package → read the official crisp-sdk-web documentation.
Website ID → follow this guide if you cannot find your Website ID.

Updated on: 03/05/2026

Was this article helpful?

Thank you!