@zickt/react

Official React SDK for Zickt — add a customer messaging widget to your React app in one line.

Zickt is a modern customer communication platform for support, sales, and engagement. This package provides React components and hooks for embedding the Zickt live chat widget into any React application.

Install

npm install @zickt/react

Quick Start

import { ZicktMessenger } from '@zickt/react';

function App() {
  return (
    <>
      <YourApp />
      <ZicktMessenger channelKey="your-channel-key" />
    </>
  );
}

That's it. The messenger widget loads from Zickt's CDN and appears on your page. Get your channel key from the Zickt dashboard.

With Hooks

Use ZicktProvider and useZickt when you need programmatic control — showing/hiding the messenger or reading state.

import { ZicktProvider, useZickt } from '@zickt/react';

function App() {
  return (
    <ZicktProvider channelKey="your-channel-key" user={{ email: 'user@example.com', name: 'Jane' }}>
      <Dashboard />
    </ZicktProvider>
  );
}

function Dashboard() {
  const { show, hide, isReady } = useZickt();

  return (
    <div>
      <button onClick={() => show()}>Open Chat</button>
      <button onClick={() => hide()}>Close Chat</button>
    </div>
  );
}

API

<ZicktMessenger />

Drop-in component. Renders nothing visually — the messenger widget is injected by the SDK.

Prop	Type	Description
channelKey	string	Required. Your Zickt channel key
user	ZicktUser	Identify the current user
company	ZicktCompany	Associate a company
appearance	ZicktAppearance	Position and theme
hideDefaultLauncher	boolean	Hide the default chat button
customLauncherSelector	string	CSS selector for a custom launcher element
onReady	() => void	Called when the messenger is fully loaded
onShow	() => void	Called when the messenger opens
onHide	() => void	Called when the messenger closes
onUnreadCountChanged	(count: number) => void	Called when unread count changes

<ZicktProvider />

Wraps your app and provides context to useZickt. Accepts all the same props as ZicktMessenger plus children.

<ZicktProvider channelKey="your-channel-key" user={{ email: 'user@example.com' }}>
  {children}
</ZicktProvider>

useZickt()

Hook for programmatic control. Must be used inside a ZicktProvider.

const {
  isReady, // boolean — true when messenger has loaded
  show, // () => void — open the messenger
  hide, // () => void — close the messenger
  showNewMessage, // (message?: string) => void — open with a pre-filled message
  update, // (config: Partial<ZicktConfig>) => void — update config at runtime
  getVisitorId, // () => string | undefined — get the current visitor ID
  shutdown, // () => void — shut down the messenger
} = useZickt();

Types

All types are exported for use in your application:

import type {
  ZicktConfig,
  ZicktUser,
  ZicktCompany,
  ZicktAppearance,
  ZicktCallbacks,
  ZicktContextValue,
  ZicktProviderProps,
  ZicktMessengerProps,
} from '@zickt/react';

ZicktUser

interface ZicktUser {
  id?: string;
  email?: string;
  name?: string;
  phone?: string;
  avatar?: string;
  [key: string]: unknown; // custom attributes
}

ZicktAppearance

interface ZicktAppearance {
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  theme?: 'light' | 'dark' | 'auto';
}

Resources

• Documentation — full React SDK reference and guides
• Zickt website — create a free account and get your channel key

Requirements

• React 18 or 19
• A Zickt account and channel key

Quality

This package enforces strict quality gates on every release:

• 100% test coverage — statements, branches, functions, lines (48 tests)
• Bundle size limit — under 3 kB minified + brotli
• Strict TypeScript — no any, explicit return types, strict boolean expressions
• 28 ESLint rules — all as error, including type-aware async/condition correctness
• Type validation — publint, attw, tsd
• npm provenance — cryptographically signed builds linked to source

License

MIT