@codeinnovative/chat-widget

A zero-config, embeddable React chat widget. Import one component, pass a token, done.

Installation

npm install @codeinnovative/chat-widget

react and react-dom (v18 or v19) are peer dependencies — install them if your project doesn't already have them.

Usage

import { ChatWidget } from "@codeinnovative/chat-widget";
import "@codeinnovative/chat-widget/styles.css"; // only needed on the UMD build path

function App() {
  return <ChatWidget token="YOUR_WIDGET_TOKEN" />;
}

The widget renders itself fixed to the bottom-right corner of the viewport — it can be mounted anywhere in your component tree. If you're consuming the ESM build through a modern bundler (Vite, webpack 5+, etc.), CSS is auto-injected on import and the explicit styles.css import isn't needed.

With optional props

import { ChatWidget, HEADER_ALIGN } from "@codeinnovative/chat-widget";

<ChatWidget
  token="YOUR_WIDGET_TOKEN"
  headerName="Acme Support"
  headerAlign={HEADER_ALIGN.CENTER}
  primaryColor="#16A34A"
/>;

Props

| Prop | Type | Required | Description | | -------------- | ---------------------------------- | -------- | ------------------------------------------------------------------ | | token | string | Yes | The widget token issued for your workspace. | | headerName | string | No | Overrides the header title (defaults to "Chat Support"). | | headerAlign | "left" \| "center" \| "right" | No | Where the header title/logo sit. Use the HEADER_ALIGN constant. Defaults to "left". | | primaryColor | string (hex color) | No | Overrides the theme color, e.g. "#4F46E5". |

License

MIT