> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.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 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:__

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

![Copy the Website ID from Crisp](https://storage.crisp.chat/users/helpdesk/website/-/f/9/8/f/f98fc1f67b35b000/a7c78717-a0bc-4831-826d-88f145_1kdq03i.png)

---

# 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](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/).
* ****Website ID**** → follow [this guide](/en/article/where-to-find-my-website-id-1ylqx1s/) if you cannot find your Website ID.