@convokit/widget 0.1.0 → 0.1.2

package/README.md

@@ -1,28 +1,20 @@
 # @convokit/widget
 
-> **ConvoKit is currently in early access.** The waitlist is live — [join at convokit.dev](https://convokit.dev) to get early access.
-
 Add an AI-powered chat widget to any React or Next.js app in minutes. ConvoKit handles the AI, knowledge base, and conversations — you just drop in a component.
 
 **Website:** [convokit.dev](https://convokit.dev)
 
 ---
 
-## Four drop-in components
+## Get started in 5 steps
 
-| Component | Layout | You provide |
-|-----------|--------|-------------|
-| **PopupWidget** | Bubble in corner | `apiKey` (your ConvoKit public key) |
-| **FullScreenWidget** | Full page | `apiKey`, optional `onBack` |
-| **PopupBackendWidget** | Bubble in corner | `apiUrl`, `apiKey` |
-| **FullScreenBackendWidget** | Full page | `apiUrl`, `apiKey`, optional `onBack` |
+**1. Sign up** → [convokit.dev](https://convokit.dev)
 
-No separate CSS import needed — styles are bundled.
+**2. Generate your API key** → from the ConvoKit dashboard
 
----
-
-## Installation
+**3. Upload your documents** → add your knowledge base (docs, FAQs, support content)
 
+**4. Install the library**
 ```bash
 npm install @convokit/widget
 # or
@@ -31,6 +23,14 @@ yarn add @convokit/widget
 pnpm add @convokit/widget
 ```
 
+**5. Add the widget** → paste your key and you're live
+
+```tsx
+<PopupWidget apiKey="pk_live_..." />
+```
+
+That's it. ConvoKit trains on your documents and starts answering questions immediately.
+
 ---
 
 ## Quick start
@@ -91,70 +91,22 @@ export default function Layout({ children }) {
 }
 ```
 
----
-
-## All four components
-
-```tsx
-// Popup bubble – ConvoKit key
-<PopupWidget apiKey="pk_live_..." />
-
-// Full-page chat – ConvoKit key
-<FullScreenWidget apiKey="pk_live_..." onBack={() => router.back()} />
-
-// Popup bubble – your own backend
-<PopupBackendWidget apiUrl="/api/chat" apiKey="your-key" />
-
-// Full-page chat – your own backend
-<FullScreenBackendWidget apiUrl="/api/chat" apiKey="your-key" onBack={() => router.back()} />
-```
+No separate CSS import needed — styles are bundled.
 
 ---
 
 ## Props
 
-**All components accept:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `title` | `string` | Widget header title |
-| `welcomeMessage` | `string` | First message shown to the user |
-| `widgetId` | `string` | Identifier for the bot / channel |
-| `primaryColor` | `string` | Accent color (hex or CSS color) |
-
-**Popup components also accept:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `position` | `'bottom-right' \| 'bottom-left'` | Bubble position |
-| `persistMessages` | `boolean` | Keep messages across page loads |
-
-**Backend components also accept:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `authToken` | `string` | Bearer token forwarded to your backend |
-
-**Full-screen components also accept:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `onBack` | `() => void` | Called when user taps the back button |
-| `backLabel` | `string` | Label for the back button |
-
----
-
-## Advanced: low-level components
-
-If you need full control over state or API calls, use the low-level components directly:
-
-| Component | Config type |
-|-----------|-------------|
-| `PopupKey` / `FullScreenKey` | `KeyConfig` |
-| `PopupBackend` / `FullScreenBackend` | `BackendConfig` |
-| `PopupControlled` / `FullScreenControlled` | `ControlledConfig` (you pass `messages`, `onMessagesUpdate`, `onSend`) |
-
-**Types you can import:** `KeyConfig`, `BackendConfig`, `ControlledConfig`, `PopupWidgetProps`, `FullScreenWidgetProps`, `PopupBackendWidgetProps`, `FullScreenBackendWidgetProps`, `ChatMessage`, `ChatHistoryItem`, `ChatResponse`, `ThemeOptions`.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | `string` | **required** | Your ConvoKit public key (`pk_live_...` or `pk_test_...`) |
+| `title` | `string` | `'Support'` | Widget header title |
+| `welcomeMessage` | `string` | `'Hi! How can we help?'` | First message shown to the user |
+| `widgetId` | `string` | `'convokit-widget'` | Unique identifier for this widget instance |
+| `primaryColor` | `string` | — | Accent color (e.g. `'#7c3aed'`) |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'bottom-middle' \| 'top-right' \| 'top-left' \| 'top-middle'` | `'bottom-right'` | Bubble position on screen |
+| `persistMessages` | `boolean` | `false` | Restore chat history on page reload |
+| `logoUrl` | `string` | — | Custom icon shown in the chat bubble (SVG, PNG, JPG) |
 
 ---
 
@@ -179,14 +131,6 @@ module.exports = nextConfig;
 
 ---
 
-## Early access
-
-ConvoKit is in early access. Get your API key and set up your knowledge base at **[convokit.dev](https://convokit.dev)**.
-
-The waitlist is live — join now to get early access.
-
----
-
 ## License
 
 MIT