Articles on: Installing Crisp

How to Install Crisp Chat Widget on Next.js App

This article explains how to install the Crisp Live Chat widget in a Next.js application using the official crisp-sdk-web package.

The Crisp website chat widget lets visitors contact your support team or interact with your AI customer support agent directly from your Next.js app.

The setup depends on whether your project uses the App Router or the Pages Router.

In this guide, you will learn how to:

Watch the Next.js installation walkthrough → follow the complete setup in video format
Copy your Website ID → connect the app to the correct Crisp workspace
Install the Crisp Web SDK → add the official package to your project
Choose the right Next.js setup → identify which router your project uses
Set up Crisp with the App Router → load Crisp from app/layout.tsx
Set up Crisp with the Pages Router → load Crisp from pages/_app.tsx
Check the installation → confirm that messages reach your Crisp Inbox
Use advanced Web SDK features → customize the chat experience

Watch the Next.js installation walkthrough

This video shows how to install crisp-sdk-web, configure your Website ID, choose the correct Next.js router setup, and confirm that the Crisp chatbox is working.

Copy your Website ID

Your Website ID connects the Next.js application to the correct Crisp workspace.

To find your Website ID:

Open Crisp
Go to Settings → Workspace Settings → Setup & Integrations
Find the Website ID field
Click Copy

Copy the Website ID from Crisp

You can also follow the dedicated guide: Where to find my Website ID.

Install the Crisp Web SDK

Open a terminal from your Next.js project and install the official package:

npm install crisp-sdk-web

The package lets you load the Crisp chatbox from your frontend code and use additional Web SDK features when needed.

Choose the right Next.js setup

Before adding Crisp, check which routing system your project uses.

App Router → your project contains an app directory
Pages Router → your project contains a pages directory

The Crisp component is almost the same in both cases. The main difference is where you load it globally.

App Router → app/layout.tsx
Pages Router → pages/_app.tsx

Set up Crisp with the App Router

Use this setup if your Next.js project contains an app directory.

Create the Crisp client component

Create:

app/components/CrispChat.tsx

Then add:

"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;
}

Replace MY_CRISP_WEBSITE_ID with the Website ID copied from your Crisp workspace.

"use client" is required because Crisp needs to run in the browser.

Load Crisp from your root layout

Open:

app/layout.tsx

Import the component:

import CrispChat from "./components/CrispChat";

Then render it inside the <body> of your layout:

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

Mount CrispChat once in the root layout so the chatbox remains available across your Next.js application.

Set up Crisp with the Pages Router

Use this setup if your Next.js project contains a pages directory.

Create the Crisp component

Create:

components/CrispChat.tsx

Then add:

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

export default function CrispChat() {
  useEffect(() => {
    Crisp.configure("MY\_CRISP\_WEBSITE\_ID");
  }, []);

  return null;
}

Replace MY_CRISP_WEBSITE_ID with the Website ID copied from your Crisp workspace.

Load Crisp from your app file

Open:

pages/_app.tsx

Import the Crisp component and render it before your page component:

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

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

Because _app.tsx wraps your pages, Crisp remains available across your Next.js application.

Check the installation

Start your Next.js application:

npm run dev

Open the local URL shown in your terminal, usually:

http://localhost:3000

The Crisp chatbox should appear in the bottom corner of the page.

Send a test message, then open the Crisp Inbox to confirm that the conversation reaches the correct workspace.

If the chatbox does not appear, check that:

The crisp-sdk-web package is installed
The Website ID is correct
MY_CRISP_WEBSITE_ID has been replaced with your real Website ID
The CrispChat component is loaded globally
App Router projects include "use client" in CrispChat.tsx

If everything looks correct, restart your development server and refresh the page.

Use advanced Web SDK features

Once Crisp is installed, you can use the Web SDK to adapt the chat experience to your Next.js application.

For example, you can:

Set the visitor's name, email address, phone number, or avatar
Force the chatbox language
Delay the initial chatbox loading
Preserve a session across authenticated devices
Open, close, show, or hide the chatbox from your interface
Listen to chatbox events from your application

For implementation details, read the official crisp-sdk-web documentation and the $crisp JavaScript SDK guide.

For navigation behavior and other single-page application considerations, read How to embed Crisp inside a single-page app.

Updated on: 07/09/2026

Was this article helpful?

Thank you!