> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://crisp.chat/en/livechat/) lets visitors contact your support team or interact with your [AI customer support agent](https://hugo.ai/en/) 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](#1-watch-the-nextjs-installation-walkthrough) → follow the complete setup in video format
* [Copy your Website ID](#1-copy-your-website-id) → connect the app to the correct Crisp workspace
* [Install the Crisp Web SDK](#1-install-the-crisp-web-sdk) → add the official package to your project
* [Choose the right Next.js setup](#1-choose-the-right-nextjs-setup) → identify which router your project uses
* [Set up Crisp with the App Router](#1-set-up-crisp-with-the-app-router) → load Crisp from `app/layout.tsx`
* [Set up Crisp with the Pages Router](#1-set-up-crisp-with-the-pages-router) → load Crisp from `pages/_app.tsx`
* [Check the installation](#1-check-the-installation) → confirm that messages reach your Crisp Inbox
* [Use advanced Web SDK features](#1-use-advanced-web-sdk-features) → customize the chat experience
---

# ${color}[#0080dd](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.

${youtube}[How to install Crisp Live Chat on a Next.js app](6Htp3cSa-Gc)
---

# ${color}[#0080dd](Copy your Website ID)

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

**To find your Website ID:**

1. Open [**Crisp**](https://app.crisp.chat)
2. Go to **Settings → Workspace Settings → Setup & Integrations**
3. Find the **Website ID** field
4. Click **Copy**

![Copy the Website ID from Crisp](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/cleanshot-2026-01-29-at-130707_1cdbhts.png =1000xauto)

You can also follow the dedicated guide: [**Where to find my Website ID**](/en/article/where-to-find-my-website-id-1ylqx1s/).
---

# ${color}[#0080dd](Install the Crisp Web SDK)

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

```bash
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.
---

# ${color}[#0080dd](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`
---

# ${color}[#0080dd](Set up Crisp with the App Router)

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

#### ${color}[#445055](Create the Crisp client component)

Create:

`app/components/CrispChat.tsx`

Then add:

```jsx
"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.

#### ${color}[#445055](Load Crisp from your root layout)

Open:

`app/layout.tsx`

Import the component:

```jsx
import CrispChat from "./components/CrispChat";
```

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

```jsx
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.
---

# ${color}[#0080dd](Set up Crisp with the Pages Router)

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

#### ${color}[#445055](Create the Crisp component)

Create:

`components/CrispChat.tsx`

Then add:

```jsx
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.

#### ${color}[#445055](Load Crisp from your app file)

Open:

`pages/_app.tsx`

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

```jsx
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.
---

# ${color}[#0080dd](Check the installation)

Start your Next.js application:

```bash
npm run dev
```
Open the local URL shown in your terminal, usually:

```text
http://localhost:3000
```

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

Send a test message, then open the [Crisp Inbox](https://crisp.chat/en/shared-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.
---

# ${color}[#0080dd](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](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/) and the [$crisp JavaScript SDK guide](https://help.crisp.chat/en/article/how-to-use-the-crisp-chatbox-javascript-sdk-1lp254r/).

For navigation behavior and other single-page application considerations, read [**How to embed Crisp inside a single-page app**](https://help.crisp.chat/en/article/how-can-i-embed-crisp-inside-a-single-page-app-1ptfyyx/).