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.

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

Basic examples

Use set to attach data to the current visitor session.

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

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

Use on to listen to a chatbox event.

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

Use the official method reference

The complete $crisp method reference 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, which wraps $crisp and provides TypeScript definitions.

Updated on: 03/05/2026