Crisp SDK Web

Crisp SDK Web wraps the browser-global $crisp command queue used by the Crisp chat widget in a typed TypeScript class, so React, Vue, Angular, and vanilla JS apps can configure, show, hide, and drive the widget without hand-writing script-injection code. It exposes dedicated sub-modules for chat state, user identification, sessions, triggers, scenarios, and structured message types.

Rather than pasting Crisp’s raw embed snippet into an app and reaching into a global object, developers import a singleton Crisp instance, call configure(websiteId, options), and get autocomplete-backed methods for the full widget surface — opening/closing the chatbox, pushing user data, listening for availability events, and sending rich message types like pickers and file attachments.

What You Get

• A singleton Crisp client with a configure(websiteId, options) entrypoint that handles script injection and autoload
• Typed sub-APIs for chat (show/hide/open/close), session, user, trigger, scenario, and Hugo bot tooling
• Structured message classes for animation, audio, file, picker, and field message types
• Configuration helpers for locale, cookie domain/expiry, safe mode, color theme, and widget position
• Event subscription helpers such as onWebsiteAvailabilityChanged with matching off* unsubscribe methods

Common Use Cases

• Adding Crisp live chat support to a React, Vue, or Angular single-page application
• Identifying logged-in users and passing session/company metadata to the widget
• Sending rich in-chat messages (file uploads, pickers) from application code
• Programmatically opening the chat widget from a support or contact-us button
• Reacting to operator availability changes to show custom offline messaging

Under The Hood

Architecture - A single Crisp class (src/index.ts) acts as the composition root, instantiating one sub-module per concern (CrispChat, CrispSession, CrispUser, CrispMessage, CrispTrigger, CrispScenario, CrispHugo) and passing itself into each as a parent reference. Every sub-module method funnels writes through window.$crisp.push([...]), mirroring Crisp’s native array-based command queue, while configure()/load() handle lazily injecting the widget <script> tag and setting the CRISP_WEBSITE_ID/CRISP_RUNTIME_CONFIG globals. Tech Stack - Pure TypeScript (target ES5, strict mode partially relaxed via strictNullChecks: false), built with Rollup into ESM, CJS/UMD, and .d.ts bundles, published via a tag-triggered GitHub Actions release workflow. No runtime dependencies beyond tslib. Code Quality - Consistent JSDoc-style comments on every public method, ESLint with a custom eslint-plugin-crisp config enforced via npm test, and a tsc --noEmit-style typecheck script; however there is no visible unit test suite (test script only runs lint), so correctness relies on manual QA and type coverage rather than automated tests. API Design - The singleton export (import { Crisp } from 'crisp-sdk-web') plus one configure() call gives a low-boilerplate entry point, and namespaced sub-objects (Crisp.chat.open(), Crisp.user.setEmail()) make the API discoverable via autocomplete; enums like ChatboxColors and ChatboxPosition replace Crisp’s raw string commands with typed constants.