@convokit/widget
v0.1.3
Published
AI chat widget for your website
Downloads
1,304
Maintainers
_piyushReadme
@convokit/widget
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
Get started in 5 steps
1. Sign up → convokit.dev
2. Generate your API key → from the ConvoKit dashboard
3. Upload your documents → add your knowledge base (docs, FAQs, support content)
4. Install the library
npm install @convokit/widget
# or
yarn add @convokit/widget
# or
pnpm add @convokit/widget5. Add the widget → paste your key and you're live
<PopupWidget apiKey="pk_live_..." />That's it. ConvoKit trains on your documents and starts answering questions immediately.
Quick start
React / Vite
import { PopupWidget } from '@convokit/widget';
export function App() {
return (
<div>
{/* your app */}
<PopupWidget apiKey={import.meta.env.VITE_CONVOKIT_KEY ?? ''} />
</div>
);
}Next.js App Router (recommended)
Use the built-in Next.js entry — no need to write dynamic() yourself:
// app/layout.tsx
import { PopupWidgetNext } from '@convokit/widget/next';
export default function Layout({ children }) {
return (
<html><body>
{children}
<PopupWidgetNext apiKey={process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? ''} />
</body></html>
);
}PopupWidgetNext uses next/dynamic with ssr: false automatically and reads NEXT_PUBLIC_CONVOKIT_KEY if you don't pass apiKey.
Next.js App Router (manual dynamic import)
'use client';
import dynamic from 'next/dynamic';
const PopupWidget = dynamic(
() => import('@convokit/widget').then((m) => m.PopupWidget),
{ ssr: false }
);
export default function Layout({ children }) {
return (
<>
{children}
<PopupWidget apiKey={process.env.NEXT_PUBLIC_CONVOKIT_KEY ?? ''} />
</>
);
}No separate CSS import needed — styles are bundled.
Props
| 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 |
| instanceId | 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) |
Fixing duplicate React errors in Next.js
If you see Cannot read properties of undefined (reading 'ReactCurrentDispatcher'), add this to next.config.js:
const nextConfig = {
transpilePackages: ['@convokit/widget'],
webpack: (config) => {
config.resolve.alias = {
...config.resolve.alias,
react: require.resolve('react'),
'react-dom': require.resolve('react-dom'),
};
return config;
},
};
module.exports = nextConfig;License
MIT