React

A provider, a few components, and hooks for the rest.

@harkly/react wraps @harkly/js so identity lives in one place and the widgets are components.

npm install @harkly/react
import { HarklyProvider, FeedbackButton, ChangelogBadge, Messenger } from "@harkly/react";

export function App({ user }) {
  return (
    <HarklyProvider publicKey="hk_pub_…" user={user ? { id: user.id, email: user.email, plan: user.plan } : null}>
      <nav>
        <FeedbackButton board="feature-requests">Send feedback</FeedbackButton>
        <ChangelogBadge />
      </nav>
      <Messenger />
    </HarklyProvider>
  );
}
  • HarklyProvider takes every init option plus user; when user changes the SDK identifies (or resets) for you.
  • FeedbackButton opens the post form. Give it a title to prefill.
  • ChangelogBadge shows the unread count and opens the updates panel.
  • Messenger mounts the launcher and follows the workspace's settings for side, color and page rules.
  • useHarkly() returns the client for track, surveys() and outbound().

Surveys and outbound messages need nothing extra: call surveys() once on route change and the one due survey shows itself; outbound() does the same for banners, chats and announcements.