@hearly-knowledgebase/widget

Embeddable AI chat widget powered by Hearly.

Install

npm install @hearly-knowledgebase/widget

Usage

import { HearlyWidget } from '@hearly-knowledgebase/widget';

function App() {
  return (
    <HearlyWidget
      apiKey="your-api-key"
      theme={{ mode: 'auto' }}
      content={{
        title: 'Ask a question',
        subtitle: 'AI-powered answers',
      }}
    />
  );
}

CSS is injected automatically at runtime. If you prefer to load styles explicitly (e.g. for SSR or CSP reasons):

import '@hearly-knowledgebase/widget/styles.css';

Props

| Prop | Type | Description | |------|------|-------------| | apiKey | string | Required. Your Hearly API key | | subTenantId | string | Optional sub-tenant identifier | | uniqueIdentifiers | string[] | Filter documents by identifiers | | topK | number | Number of sources to retrieve (default: 8) | | theme | WidgetTheme | Appearance customization | | content | WidgetContent | Text/copy customization | | behavior | WidgetBehavior | Behavior settings | | position | WidgetPosition | Positioning on screen | | defaultOpen | boolean | Start with chat open | | onOpen | () => void | Callback when chat opens | | onClose | () => void | Callback when chat closes |

Peer Dependencies

• react >= 18
• react-dom >= 18