Zickt React SDK is Now on NPM

Zickt messenger, now a pnpm add away

We just published @zickt/react on NPM. It gives you a first-class React integration for Zickt messenger — the same live chat widget that powers customer conversations on this site.

One component. Under 3 KB. Zero dependencies. Works with Next.js, Vite, Remix, or anything running React 18+. We're dogfooding it ourselves — the messenger widget on this very site is powered by @zickt/react.

pnpm add @zickt/react

Why we built it

If you're running a SaaS product, your support experience is part of your product. Dropping a script tag into your HTML works, but it doesn't fit how modern teams build. You lose type safety, lifecycle control, and the ability to tie messenger behavior to your application state.

@zickt/react solves that. It's a proper React SDK that mounts and unmounts cleanly with your component tree, ships full TypeScript types, and handles SSR without hydration issues.

Two ways to integrate

Drop-in: for most teams

If you just need the messenger on your site, it's one component:

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

export default function App() {
  return (
    <>
      <YourApp />
      <ZicktMessenger channelKey="your_channel_key" />
    </>
  );
}

The widget appears in the bottom-right corner, ready to handle conversations. You can customize position, theme, colors, fonts, and more through props — no CSS overrides needed:

<ZicktMessenger
  channelKey="your_channel_key"
  appearance={{
    position: 'bottom-right',
    theme: 'auto',
    primaryColor: '#0066CC',
    fontFamily: '"Inter", sans-serif',
    borderRadius: '16px',
  }}
/>

Hooks: for teams that need control

Wrap your app in ZicktProvider and use the useZickt hook for programmatic control — open/close the messenger, identify users after login, react to events:

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

function App() {
  return (
    <ZicktProvider channelKey="your_channel_key">
      <Dashboard />
    </ZicktProvider>
  );
}

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

  const handleLogin = (user) => {
    identify({
      email: user.email,
      name: user.name,
      company: { name: user.org, plan: user.plan },
    });
  };

  return <button onClick={() => show()}>Talk to support</button>;
}

This is what lets you build flows like "open messenger after onboarding step 3" or "identify the user with their company plan so your support team has context before the conversation starts."

Identify users and companies

Pass user and company data so your support team sees who they're talking to without asking:

<ZicktMessenger
  channelKey="your_channel_key"
  user={{
    id: 'usr_123',
    email: 'jane@acme.com',
    name: 'Jane Chen',
  }}
  company={{
    id: 'comp_456',
    name: 'Acme Corp',
  }}
/>

Your agents see the name, email, and company the moment a conversation starts. No "can I get your email?" back-and-forth.

React to messenger events

Hook into lifecycle events to coordinate the messenger with your UI:

<ZicktMessenger
  channelKey="your_channel_key"
  onReady={() => console.log('Messenger loaded')}
  onUnreadCountChanged={(count) => setBadgeCount(count)}
  onShow={() => pauseOnboardingTour()}
  onHide={() => resumeOnboardingTour()}
/>

Built for production

A few details that matter when you're shipping to real users:

• SSR-safe — no window is not defined errors, works with Next.js App Router and Pages Router
• Async loading — the SDK is under 3 KB; the messenger itself loads from CDN without blocking your bundle
• Clean unmount — remove the component and the messenger shuts down properly, no orphaned scripts
• TypeScript-first — every prop, callback, and hook return type is fully typed with autocomplete

Get started

1. Install: pnpm add @zickt/react
2. Get your channel key from the Zickt dashboard
3. Add <ZicktMessenger channelKey="..." /> to your layout
4. Start receiving conversations

Full API reference in the docs.

What's next

The SDK already supports custom launcher elements and appearance theming. We're continuing to expand the developer surface:

• Event-driven workflows — trigger actions in your app based on conversation state changes
• Visitor intelligence — surface page context and session data to your support team automatically

We're building Zickt for teams who care about the developer experience of their tools. If you have feedback, reach out through the messenger on this page.