@vuedapt/vuebot
Version:
VueBot - AI Chatbot Widget for easy website integration
428 lines (323 loc) • 10.9 kB
Markdown
A customizable AI chatbot widget that can be easily integrated into any website. Built with React and TypeScript, featuring markdown support, customizable styling, and a simple API.
- 🤖 **AI-Powered Chat**: Connect to your VueBot API for intelligent conversations
- 🎨 **Fully Customizable**: Colors, position, avatar, and more
- 📝 **Markdown Support**: Rich text rendering with code blocks, lists, tables, and more
- 📱 **Responsive Design**: Works seamlessly on desktop and mobile devices
- 🔌 **Easy Integration**: Works with vanilla HTML, React, Next.js, and any framework
- ⚡ **Lightweight**: Optimized bundle size with standalone and module builds
- 🎯 **TypeScript Support**: Full TypeScript definitions included
```bash
npm install @vuedapt/vuebot
```
**⚠️ Important:** When using the NPM package, you must import the CSS file:
```jsx
import VueBotWidget from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css'; // Required for styles
```
**📝 Need an API Key?** Sign up and generate your API key at [vuebot-client.vuedapt.com](https://vuebot-client.vuedapt.com)
Include the standalone script and CSS from unpkg:
```html
<link rel="stylesheet" href="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css">
<script src="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.standalone.js"></script>
```
Or use local files after building:
```html
<link rel="stylesheet" href="./dist/vuebot-widget.css">
<script src="./dist/vuebot-widget.standalone.js"></script>
```
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css">
</head>
<body>
<!-- Your website content -->
<!-- VueBot Widget -->
<script src="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.standalone.js"></script>
<script>
window.VueBot.init({
apiKey: 'vb_your_api_key_here',
});
</script>
</body>
</html>
```
**Important:** You must import the CSS file for styles to work.
```jsx
import VueBotWidget from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css'; // Import styles
function App() {
return (
<div>
<VueBotWidget
config={{
apiKey: 'vb_your_api_key_here',
apiBaseUrl: 'https://vuebot-api.vuedapt.com',
}}
/>
<div>Your app content</div>
</div>
);
}
```
**Note:** For Next.js, see the [Next.js Example](
To use VueBot, you need an API key. You can sign up and generate an API key from:
**https://vuebot-client.vuedapt.com**
1. Sign up for an account
2. Create a chatbot
3. Copy your API key (starts with `vb_`)
4. Use it in your widget configuration
## Configuration Options
### Required
- **`apiKey`** (string): Your chatbot API key from the VueBot dashboard (starts with `vb_`). Get your API key from [vuebot-client.vuedapt.com](https://vuebot-client.vuedapt.com)
### Optional
- **`apiBaseUrl`** (string): API base URL (default: `'https://vuebot-api.vuedapt.com'`)
- **`position`** (string): Widget position - `'bottom-right'` | `'bottom-left'` | `'top-right'` | `'top-left'` (default: `'bottom-right'`)
- **`primaryColor`** (string): Primary color for buttons and header (default: `'#00a6f4'`)
- **`secondaryColor`** (string): Secondary color for hover states (default: `'#00bcff'`)
- **`textColor`** (string): Text color for messages (default: `'#1f2937'`)
- **`backgroundColor`** (string): Chat window background color (default: `'#ffffff'`)
- **`botName`** (string): Name displayed in chat header (default: `'Chat Assistant'`)
- **`botAvatar`** (string): URL to bot's profile picture (default: Wikipedia default profile picture)
- **`collapsed`** (boolean): Start in collapsed state (default: `false`)
- **`showOnLoad`** (boolean): Show chat window on page load (default: `true`)
- **`zIndex`** (number): CSS z-index for widget (default: `9999`)
- **`greetingMessage`** (string): Initial greeting message from bot
- **`darkTheme`** (boolean): Enable dark theme mode (default: `false`). When enabled, the widget uses dark colors for backgrounds, text, and UI elements. You can still customize colors using `textColor` and `backgroundColor` props.
## Examples
### Customized Widget
```javascript
window.VueBot.init({
apiKey: 'vb_your_api_key_here',
position: 'bottom-left',
primaryColor: '#10b981',
secondaryColor: '#059669',
botName: 'Support Bot',
botAvatar: 'https://example.com/bot-avatar.png',
greetingMessage: 'Hi! How can I help you today?',
showOnLoad: false,
});
```
```javascript
window.VueBot.init({
apiKey: 'vb_your_api_key_here',
darkTheme: true, // Enable dark theme
primaryColor: '#00a6f4',
botName: 'AI Assistant',
});
```
```javascript
// Initialize widget
window.VueBot.init({
apiKey: 'vb_your_api_key_here',
});
// Open chat window
window.VueBot.open();
// Close chat window
window.VueBot.close();
// Toggle chat window
window.VueBot.toggle();
```
```jsx
import VueBotWidget from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css'; // Import styles
function MyApp() {
return (
<div>
<VueBotWidget
config={{
apiKey: process.env.REACT_APP_VUEBOT_API_KEY,
apiBaseUrl: 'https://vuebot-api.vuedapt.com',
primaryColor: '#00a6f4',
botName: 'AI Assistant',
botAvatar: '/images/bot-avatar.png',
greetingMessage: 'Hello! How can I help you?',
}}
/>
<div>Your app content</div>
</div>
);
}
```
**Important:** Next.js requires dynamic imports with SSR disabled for client-side only components like VueBot.
**Option 1: Using NPM Package with Dynamic Import (Recommended)**
Create a client component (e.g., `app/components/ChatBot.jsx`):
```jsx
'use client';
import dynamic from 'next/dynamic';
import '@vuedapt/vuebot/dist/vuebot-widget.css';
const VueBotWidget = dynamic(() => import('@vuedapt/vuebot'), {
ssr: false,
});
export default function ChatBot() {
return (
<VueBotWidget config={{
apiKey: process.env.NEXT_PUBLIC_VUEBOT_API_KEY,
apiBaseUrl: process.env.NEXT_PUBLIC_VUEBOT_API_URL || 'https://vuebot-api.vuedapt.com',
}} />
);
}
```
Then use it in your layout or page:
```jsx
// app/layout.js or app/page.js
import ChatBot from './components/ChatBot';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<ChatBot />
</body>
</html>
);
}
```
**Option 2: Using CDN/Standalone Script**
```jsx
'use client';
import { useEffect } from 'react';
import Script from 'next/script';
export default function Home() {
useEffect(() => {
// Add stylesheet link to head
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css';
document.head.appendChild(link);
return () => {
const existingLink = document.querySelector(`link[href="${link.href}"]`);
if (existingLink) {
existingLink.remove();
}
};
}, []);
useEffect(() => {
if (typeof window !== 'undefined' && window.VueBot && window.VueBot.init) {
window.VueBot.init({
apiKey: process.env.NEXT_PUBLIC_VUEBOT_API_KEY,
apiBaseUrl: process.env.NEXT_PUBLIC_VUEBOT_API_URL || 'https://vuebot-api.vuedapt.com',
});
}
}, []);
return (
<>
<Script
src="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.standalone.js"
strategy="afterInteractive"
onLoad={() => {
if (typeof window !== 'undefined' && window.VueBot && window.VueBot.init) {
window.VueBot.init({
apiKey: process.env.NEXT_PUBLIC_VUEBOT_API_KEY,
apiBaseUrl: process.env.NEXT_PUBLIC_VUEBOT_API_URL || 'https://vuebot-api.vuedapt.com',
});
}
}}
/>
<div>Your page content</div>
</>
);
}
```
Initialize the chatbot widget with configuration options.
**Parameters:**
- `config` (VueBotConfig): Configuration object (see Configuration Options above)
**Example:**
```javascript
window.VueBot.init({
apiKey: 'vb_your_api_key_here',
position: 'bottom-right',
});
```
Open the chat window programmatically.
**Example:**
```javascript
window.VueBot.open();
```
Close the chat window programmatically.
**Example:**
```javascript
window.VueBot.close();
```
Toggle the chat window open/closed state.
**Example:**
```javascript
window.VueBot.toggle();
```
The widget supports full markdown rendering in assistant messages, including:
- **Bold** and *italic* text
- Code blocks with syntax highlighting
- Inline `code` formatting
- Lists (ordered and unordered)
- Headings (H1, H2, H3)
- Tables
- Links (open in new tab)
- Blockquotes
- Images
The chatbot will automatically format responses using markdown when configured to do so.
The widget uses CSS custom properties (variables) that can be overridden:
```css
:root {
--vuebot-primary:
--vuebot-secondary:
--vuebot-text:
--vuebot-bg:
}
```
You can override these in your own CSS:
```css
:root {
--vuebot-primary:
--vuebot-secondary:
}
```
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
**Proprietary - All Rights Reserved**
This software is proprietary and confidential. Unauthorized copying, forking, modification, or distribution is strictly prohibited.
Copyright (c) 2025 VueBot. All Rights Reserved.
For licensing inquiries, please contact: info@vuedapt.com
For issues, questions, or feature requests, please contact support or visit our documentation at [https://vuebot.vuedapt.com](https://vuebot.vuedapt.com).
- Added drag-and-drop functionality for the floating widget button
- Widget can now be repositioned to any corner by dragging the button
- Added dark theme support with `darkTheme` prop
- Enable dark mode by setting `darkTheme: true` in configuration
- Dark theme includes optimized colors for backgrounds, text, and UI elements
- Added session management with sessionStorage
- Initial release
- Markdown support for rich text rendering
- Customizable styling and positioning
- React and vanilla JavaScript support
- TypeScript definitions included