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

Configure the chatbox

To add Crisp to your app, create or open your workspace from the Crisp App, 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.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"
});

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.

Updated on: 03/05/2026