@bubblav/ai-chatbot-react
v1.0.5
Published
BubblaV AI chatbot widget for React applications
Maintainers
tonnguyenReadme
@bubblav/ai-chatbot-react
Official React package for the BubblaV AI chatbot widget.
Installation
npm install @bubblav/ai-chatbot-react
# or
yarn add @bubblav/ai-chatbot-react
# or
pnpm add @bubblav/ai-chatbot-reactUsage
Add BubblaVWidget once in your root layout or App component:
import { BubblaVWidget } from '@bubblav/ai-chatbot-react';
function App() {
return (
<>
{/* your app */}
<BubblaVWidget websiteId="your-website-id" />
</>
);
}Get your websiteId from the BubblaV dashboard.
Programmatic control
import { useBubblaVWidget } from '@bubblav/ai-chatbot-react';
function HelpButton() {
const widget = useBubblaVWidget();
return <button onClick={() => widget?.open()}>Chat with us</button>;
}Vite / Lovable / Bolt / v0
If you use a Vite-based bundler (Lovable, Bolt, v0, plain Vite), add this to your vite.config.ts to prevent duplicate-React conflicts:
export default defineConfig({
resolve: {
dedupe: ['react', 'react-dom'],
},
// ...
});Next.js
Works out of the box. Place BubblaVWidget in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):
// app/layout.tsx
import { BubblaVWidget } from '@bubblav/ai-chatbot-react';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<BubblaVWidget websiteId="your-website-id" />
</body>
</html>
);
}Documentation
Full installation guide: docs.bubblav.com/user-guide/installation