Zickt React SDK jetzt auf NPM

Zickt Messenger, jetzt nur ein pnpm add entfernt

Wir haben @zickt/react auf NPM veröffentlicht. Es bietet eine erstklassige React-Integration für den Zickt Messenger — das gleiche Live-Chat-Widget, das Kundengespräche auf dieser Seite antreibt.

Eine Komponente. Unter 3 KB. Keine Abhängigkeiten. Funktioniert mit Next.js, Vite, Remix oder allem mit React 18+. Wir nutzen es selbst — das Messenger-Widget auf genau dieser Seite wird von @zickt/react betrieben.

pnpm add @zickt/react

Warum wir es gebaut haben

Wenn man ein SaaS-Produkt betreibt, ist das Support-Erlebnis Teil des Produkts. Einen Script-Tag in das HTML einzufügen funktioniert, aber es passt nicht dazu, wie moderne Teams entwickeln. Man verliert Typsicherheit, Lifecycle-Kontrolle und die Möglichkeit, das Messenger-Verhalten mit dem Anwendungsstatus zu verknüpfen.

@zickt/react löst das. Es ist ein vollwertiges React SDK, das sich sauber mit dem Komponentenbaum ein- und aushängt, vollständige TypeScript-Typen mitbringt und SSR ohne Hydration-Probleme unterstützt.

Zwei Wege zur Integration

Drop-in: für die meisten Teams

Wenn man einfach nur den Messenger auf der Seite braucht, reicht eine Komponente:

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

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

Das Widget erscheint unten rechts, bereit für Konversationen. Position, Theme, Farben, Schriftarten und mehr lassen sich über Props anpassen — keine CSS-Overrides nötig:

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

Hooks: für Teams, die Kontrolle brauchen

Die App in ZicktProvider einwickeln und den useZickt Hook für programmatische Steuerung nutzen — Messenger öffnen/schließen, Benutzer nach dem Login identifizieren, auf Events reagieren:

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()}>Support kontaktieren</button>;
}

Damit lassen sich Abläufe bauen wie „Messenger nach Onboarding-Schritt 3 öffnen" oder „Benutzer mit Firmenplan identifizieren, damit das Support-Team Kontext hat, bevor das Gespräch beginnt."

Benutzer und Unternehmen identifizieren

Benutzer- und Firmendaten übergeben, damit das Support-Team sofort weiß, mit wem es spricht:

<ZicktMessenger
  channelKey="your_channel_key"
  user={{
    id: 'usr_123',
    email: '[email protected]',
    name: 'Jane Chen',
  }}
  company={{
    id: 'comp_456',
    name: 'Acme Corp',
  }}
/>

Die Agents sehen Name, E-Mail und Unternehmen, sobald eine Konversation startet. Kein „Können Sie mir Ihre E-Mail-Adresse geben?"-Hin-und-Her.

Auf Messenger-Events reagieren

Lifecycle-Events nutzen, um den Messenger mit der eigenen UI zu koordinieren:

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

Für den Produktionseinsatz gebaut

Ein paar Details, die zählen, wenn man an echte Benutzer ausliefert:

• SSR-sicher — keine window is not defined-Fehler, funktioniert mit Next.js App Router und Pages Router
• Asynchrones Laden — das SDK ist unter 3 KB; der Messenger selbst lädt vom CDN, ohne das Bundle zu blockieren
• Sauberes Unmount — Komponente entfernen und der Messenger fährt ordentlich herunter, keine verwaisten Skripte
• TypeScript-first — jeder Prop, Callback und Hook-Rückgabetyp ist vollständig typisiert mit Autovervollständigung

Erste Schritte

1. Installieren: pnpm add @zickt/react
2. Channel-Key aus dem Zickt Dashboard holen
3. <ZicktMessenger channelKey="..." /> zum Layout hinzufügen
4. Konversationen empfangen

Vollständige API-Referenz in der Dokumentation.

Was kommt als Nächstes

Das SDK unterstützt bereits benutzerdefinierte Launcher-Elemente und Appearance-Theming. Wir erweitern die Entwickleroberfläche weiter:

• Event-gesteuerte Workflows — Aktionen in der App basierend auf Konversationsstatusänderungen auslösen
• Besucher-Intelligence — Seitenkontext und Sitzungsdaten automatisch an das Support-Team weiterleiten

Wir bauen Zickt für Teams, denen die Developer Experience ihrer Tools wichtig ist. Feedback gerne über den Messenger auf dieser Seite.