---
title: Crisp
description: Load Crisp live chat with website ID, runtime, cookie, and session options.
lastModified: 2026-05-11
icon: crisp
---
Crisp adds the Crisp live chat widget and exposes the `$crisp` queue for
chatbox actions such as opening the chat, setting user details, and resetting
sessions.

## Official Crisp documentation

* [Web Chat SDK](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/)
* [$crisp methods](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/)
* [Identity verification](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/identity-verification/)
* [Cookie policies](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/cookie-policies/)
* [Session continuity](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/session-continuity/)
* [Language customization](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/language-customization/)

## Integrate with c15t

**React**

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { crisp } from '@c15t/scripts/crisp';

const scripts = [crisp({ websiteId: 'crisp-123' })];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**Next.js**

```tsx
'use client';

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { crisp } from '@c15t/scripts/crisp';

const scripts = [crisp({ websiteId: 'crisp-123' })];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { crisp } from '@c15t/scripts/crisp';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [crisp({ websiteId: 'crisp-123' })],
});
```

## How c15t loads it

* **Category:** `functionality` (Functional)
* **Loads when:** functionality consent is granted
* **Before load:** c15t seeds `window.$crisp`, `CRISP_WEBSITE_ID`, and any
  optional Crisp runtime globals
* **On revocation:** c15t follows the default script loader behavior for
  non-persistent scripts

## Configure the integration

The helper seeds Crisp's documented globals before loading
`https://client.crisp.chat/l.js`.

```ts
crisp({
  websiteId: 'crisp-123',
  locale: 'fr',
  cookieDomain: 'app.example.com',
  cookieExpiry: 3600,
  tokenId: 'secure-user-token',
  sessionMerge: true,
  safeMode: true,
})
```

`locale` and `sessionMerge` are written to `CRISP_RUNTIME_CONFIG`.
`cookieDomain` maps to `CRISP_COOKIE_DOMAIN`, `cookieExpiry` maps to
`CRISP_COOKIE_EXPIRE`, and `tokenId` maps to `CRISP_TOKEN_ID`. `safeMode`
queues `['safe', true]` on `window.$crisp` before the loader runs so Crisp
starts in safe mode.

For session continuity, generate `tokenId` on your backend with a secure random
value. Do not use emails, hashes of emails, timestamps, or incrementing IDs as
Crisp session tokens. If you verify user emails, generate the HMAC signature on
your backend and set it with Crisp's `$crisp` API after the helper loads.

## Types

### CrispOptions

| Property    | Value                                                  |
| :---------- | :----------------------------------------------------- |
| Type Name   | \`CrispOptions\`                                       |
| Source Path | \`./packages/scripts/src/vendors/functional/crisp.ts\` |

\*AutoTypeTable: Could not extract \`CrispOptions\` from \`./packages/scripts/src/vendors/functional/crisp.ts\`. Verify the path/name and that the file is included by your tsconfig.\*

### Script

| Property    | Value                                               |
| :---------- | :-------------------------------------------------- |
| Type Name   | \`Script\`                                          |
| Source Path | \`./packages/core/src/libs/script-loader/types.ts\` |

\*AutoTypeTable: Could not extract \`Script\` from \`./packages/core/src/libs/script-loader/types.ts\`. Verify the path/name and that the file is included by your tsconfig.\*