@custral/ui

Custral's UI / product clients — the browser-facing, publishable-key surfaces:

• CustralChat — programmatically embed and drive the live chat widget (open/close, identify, message events) over Socket.IO.
• CustralUsage — report per-customer usage events against a Custral Usage Module.

These use a publishable key (pk_…, safe in the browser) and are separate from @custral/sdk — the secret-key, server-side REST SDK (records / objects / webhooks). Reach for @custral/sdk for backend integrations; reach for @custral/ui for the chat widget and usage tracking.

Install

npm install @custral/ui

Chat widget

import {CustralChat} from "@custral/ui";

const chat = new CustralChat({publishableKey: "pk_…"});

await chat.init(); // load widget config + restore any prior visitor session

// Optionally attach known contact info for lead capture.
await chat.identify({email: "[email protected]"});

// Receive agent replies pushed in real time (returns an unsubscribe fn).
chat.onMessage((msg) => console.log("agent says:", msg.text));

// Send a message — a conversation is created on the first send.
await chat.sendMessage("Hi, I need help with billing.");

For a drop-in <script> install (no bundler), load the standalone widget.js instead — see Chat widget install.

Usage tracking

import {CustralUsage} from "@custral/ui";

const usage = new CustralUsage({publishableKey: process.env.CUSTRAL_PUBLISHABLE_KEY!, moduleId: "umod_…"});
await usage.track({productRecordId: "rec_…", customerRecordId: "rec_…", quantity: 1});

License

MIT