Ink Live Chat Widget
A framework-agnostic live chat widget for Kraken-powered sites. The widget
ships as a standard custom element — <ink-live-chat-widget> — so it works in
plain HTML, React, Vue, or any other frontend stack, with an optional React
wrapper for convenience.
The widget renders a floating chat launcher and conversation panel, talks to your GraphQL endpoint, and handles message history, polling, persistence, theming, and accessibility for you.
Packages
| Package | Purpose |
|---|---|
@krakentech/ink-live-chat-widget | Core, framework-agnostic web component (ESM + optional script-tag build). |
@krakentech/ink-live-chat-widget-react | Thin React wrapper — <InkLiveChatWidget config={…} />. |
The React package is a thin wrapper: it mounts the custom element, passes your
config through unchanged, and cleans up on unmount. All behaviour, theming,
and the GraphQL contract are defined by the core package.
Key features
- Framework-agnostic — a custom element that runs anywhere; no React required. First-class React wrapper available.
- Auth-flexible — no built-in login or token logic. Plug in your own auth via per-request headers or a same-origin proxy. See Authentication.
- Themeable — built-in dark (default) and light presets, plus per-key overrides for colours, fonts, sizing, and trigger placement via config or CSS variables. See Theme.
- Localisable copy — every user-facing string is overridable. See Strings.
- Resilient by default — message persistence, request de-duplication, polling with tab-visibility awareness, retry on send/load errors.
- Accessible — ARIA roles, keyboard support (Enter to send, Shift+Enter for a newline, Escape to dismiss), and focus management out of the box.
- Encapsulated — rendered in a Shadow DOM so the widget's styles never leak into (or inherit from) your app.
How it fits together
Your app (browser)
→ mounts <ink-live-chat-widget> with a config
→ widget POSTs GraphQL to the endpoint you configure (apiUrl)
→ Kraken GraphQL (directly, or via your same-origin proxy)
The widget never handles credentials itself. Your application is responsible for authenticating GraphQL requests — either by returning headers the widget attaches per request, or by exposing a same-origin proxy that adds the token server-side.
Where to go next
- Request access — get a Kraken API instance and an npm token for the private registry.
- Installation — configure the registry and install the packages.
- Quick Start — a minimal working integration.
- Authentication — choose an integration pattern for your stack.
- Configuration — the full config reference.