> ## 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 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` `` SDK and provides TypeScript-friendly helpers for common chatbox actions.

---

# Install the Web SDK

Install the package from your application project.

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

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

---

# 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****.

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

---

# 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.

```
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` ``](https://Crisp.chat)`` `.open()` `` or `` `Crisp.chat.show()` `` can also load Crisp implicitly when ****autoload**** is disabled.

---

# 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.

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

---

# 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.

```
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/).