> ## 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 the Crisp Support Chat SDK on Single Page Applications (SPA)

*Learn how to embed the Crisp chatbox in a single-page app using the official Web SDK package.*

The `crisp-sdk-web` package is the recommended option for **React**, **Vue**, **Angular**, **Nuxt**, **Next.js,** and other single-page applications. It wraps the `$crisp` [chat SDK](https://crisp.chat/en/sdk/) and provides TypeScript-friendly helpers for common chat widget actions.

---

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

Install the package from your application project.

```bash
npm install --save crisp-sdk-web
```

| The full [Crisp Support Chat SDK documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/) is available in the Developer Hub.

---

# ${color}[#0080dd](Configure the chatbox)

To add Crisp to your app, create or open your workspace from the [Crisp App](https://app.crisp.chat), then go to **Settings → Workspace Settings → Setup & Integrations** and copy your **Website ID**.

```javascript
import { Crisp } from "crisp-sdk-web";

Crisp.configure("YOUR_WEBSITE_ID");
```

Once configured, Crisp is injected into your application and the chatbox can be displayed to your visitors.

---

# ${color}[#0080dd](Load Crisp manually)

Manual loading is useful when you want to wait until a user logs in, accepts a consent banner, or clicks a custom support button.

```javascript
import { Crisp } from "crisp-sdk-web";

Crisp.configure("YOUR_WEBSITE_ID", {
  autoload: false
});

// Load Crisp when your app is ready.
Crisp.load();
```

Methods such as `Crisp.chat``.open()` or `Crisp.chat.show()` can also load Crisp implicitly when **autoload** is disabled.

---

# ${color}[#0080dd](Attach user identity and session data)

If your app knows who the user is, you can send identity and context to Crisp so agents do not need to ask again.

```javascript
import { Crisp } from "crisp-sdk-web";

Crisp.user.setEmail("john.doe@example.com");
Crisp.user.setNickname("John Doe");

Crisp.session.setData({
  user_id: "123456",
  plan: "pro"
});
```

||| Never expose sensitive account data, secrets, access tokens, or private internal identifiers in frontend session data. Only send information that is safe for support agents to view.

---

# ${color}[#0080dd](Keep sessions clean on logout)

If you bind a Crisp session to a logged-in user, clear the session during logout so the next visitor does not inherit the previous user's conversation context.

```javascript
import { Crisp } from "crisp-sdk-web";

function userLogout() {
  Crisp.setTokenId();
  Crisp.session.reset();
}
```

You can learn more about persistent sessions in the [Session Continuity guide](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/session-continuity/).