> ## 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 use the $crisp chatbox Javascript SDK

*Learn how the $crisp chatbox SDK lets you control the Crisp chatbox from JavaScript.*

The $crisp SDK is included with the Crisp chatbox. You can use it to listen to chatbox events, open or hide the chatbox, set user data, send session data, and customize the visitor experience from your website code.

---

# ${color}[#0080dd](What the Javascript SDK can do)

`$crisp` is available in pages where the Crisp chatbox is installed. It uses a queue-based syntax, which means you can safely push many commands before the chatbox is fully loaded.

__Common $crisp use cases:__
* **Set user identity** → email, phone, nickname, avatar, or company
* **Add session context** → custom data, segments, or events
* **Control the chatbox** → open, close, show, hide, or toggle the widget
* **Listen to events** → message sent, message received, chatbox opened, email changed, and more
* **Customize behavior** → change runtime configuration options from your page

---

# ${color}[#0080dd](Basic examples)

Use **set** to attach data to the current visitor session.

```javascript
$crisp.push(["set", "user:email", ["john.doe@example.com"]]);

$crisp.push(["set", "session:data", [[
  ["plan", "pro"],
  ["account_id", "123456"]
]]]);
```

Use **do** to perform an action on the chatbox.

```javascript
$crisp.push(["do", "chat:open"]);
$crisp.push(["do", "chat:hide"]);
$crisp.push(["do", "chat:show"]);
```

Use **on** to listen to a chatbox event.

```javascript
$crisp.push(["on", "message:sent", function(message) {
  console.log("Visitor sent a message", message);
}]);
```

---

# ${color}[#0080dd](Use the official method reference)

The complete [$crisp method reference](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/) lists all supported methods, events, actions, and examples.

If you are using a JavaScript framework such as React, Vue, Angular, Nuxt, or Next.js, you may prefer the [NPM Web SDK package](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/npm/), which wraps `$crisp` and provides TypeScript definitions.