@accurix/centrinfo-widget

The embeddable Centrinfo public chat widget — a style-isolated chat client that drops onto any website. The current standalone CDN bundle is about 35 KB gzipped and can dock bottom-right or bottom-left.

Built with Preact inside a Shadow DOM web component, so it can't break the host site's CSS and the host's CSS can't break it. It talks to the Centrinfo public chat API (see .claude/PUBLIC_CHAT.md for the backend, and .claude/PUBLIC_WIDGET_LIBRARY.md for the design).

Install

Script tag (any site — WordPress / Webflow / plain HTML)

Zero-JS, via data-* on the script:

<script
  src="https://cdn.accurix.com/centrinfo/js/sdk-centrinfo-widget-v1.0.0/centrinfo-widget.js"
  data-token="pub_8f3k…"
  defer
></script>

Or call init yourself:

<script
  src="https://cdn.accurix.com/centrinfo/js/sdk-centrinfo-widget-v1.0.0/centrinfo-widget.js"
  defer
></script>
<script>
  window.addEventListener('load', () => Centrinfo.init({ token: 'pub_8f3k…' }));
</script>

npm (React / Next / any bundler)

pnpm add @accurix/centrinfo-widget

import { init } from '@accurix/centrinfo-widget';
const widget = init({ token: 'pub_8f3k…' });
// widget.open() / .close() / .toggle() / .destroy()

Config

| Option | Type | Default | Notes | | ------------------------------------------------------------- | ----------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------- | | token (required) | string | — | The org's pub_* token. It is the org identity. | | apiBaseUrl | string | prod API | Override for staging / self-host. | | accentColor | string | brand green | Any CSS color — drives the launcher, header, user bubbles & send button (a darker shade for the gradient is derived automatically). | | launcherIcon | string | chat glyph | Image URL (e.g. the org's logo) shown in the launcher bubble. | | theme | 'light' \| 'dark' \| 'auto' | 'auto' | auto follows the host's prefers-color-scheme; light/dark force it. | | openByDefault | boolean | false | Open the panel on load. | | zIndex | number | very high | Stacking against the host page. | | demo | boolean | false | Use the built-in mock transport — no backend/token needed. | | onOpen / onClose / onMessage / onAction / onHandoff | function | — | Event hooks. |

Persona (agent name/avatar/greeting), the voice toggle, and which lead-gen actions appear all come from the token via GET /public-chat/bootstrap — not from the snippet.

data-* attributes for the script install: data-token, data-api-base, data-accent, data-theme, data-open, data-demo.

Environment

The default API origin is baked from VITE_API_BASE_URL (see .env.example). Copy .env.example → .env (gitignored) to override locally; unset falls back to production (https://api.accurixtech.com). Local default is the local API (http://api.accurixtech.com/). A per-init apiBaseUrl always wins at runtime. Restart the dev server after editing .env.

Develop

pnpm --filter @accurix/centrinfo-widget dev      # playground host site @ :3005 (demo mode)
pnpm --filter @accurix/centrinfo-widget build    # → dist/index.{mjs,cjs,d.ts} + dist/cdn/*
pnpm --filter @accurix/centrinfo-widget check-types
pnpm --filter @accurix/centrinfo-widget test-unit
pnpm --filter @accurix/centrinfo-widget verify:release

Release Artifacts

build:npm uses tsdown to emit the npm package entrypoints:

• dist/index.mjs
• dist/index.cjs
• dist/index.d.ts

build:cdn uses Vite to emit the browser script and then writes a manifest:

• dist/cdn/centrinfo-widget.js
• dist/cdn/manifest.json

Canonical v1 CDN URL:

https://cdn.accurix.com/centrinfo/js/sdk-centrinfo-widget-v1.0.0/centrinfo-widget.js

Status

v1 in progress — chat, streaming (SSE), citations, suggested-reply chips, session memory, handoff CTA, lead-gen actions, voice input, theming. Backend GET /public-chat/bootstrap is pending (the only backend work); the client falls back to sensible defaults until it lands.