@vuedapt/vuebot

v1.3.3

Published

24 days ago

VueBot - AI Chatbot Widget for easy website integration

0High
0Medium
0Low

vuedapt

chatbot ai widget vuebot chat assistant

VueBot Widget

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.

Features

🤖 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

Installation

NPM

npm install @vuedapt/vuebot

⚠️ Important: When using the NPM package, you must import the CSS file:

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

CDN / Script Tag

Include the standalone script and CSS from unpkg:

<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:

<link rel="stylesheet" href="./dist/vuebot-widget.css">
<script src="./dist/vuebot-widget.standalone.js"></script>

Quick Start

Basic Usage (Script Tag)

<!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>

React

Important: You must import the CSS file for styles to work.

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 section below, as it requires dynamic imports with SSR disabled.

Getting Your API Key

To use VueBot, you need an API key. You can sign up and generate an API key from:

https://vuebot-client.vuedapt.com

Sign up for an account
Create a chatbot
Copy your API key (starts with vb_)
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

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

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,
});

Dark Theme Widget

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  darkTheme: true, // Enable dark theme
  primaryColor: '#00a6f4',
  botName: 'AI Assistant',
});

Programmatic Control

// 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();

React Example

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>
  );
}

Next.js Example

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):

'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:

// 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

'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>
    </>
  );
}

API Methods

`VueBot.init(config)`

Initialize the chatbot widget with configuration options.

Parameters:

config (VueBotConfig): Configuration object (see Configuration Options above)

Example:

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  position: 'bottom-right',
});

`VueBot.open()`

Open the chat window programmatically.

Example:

window.VueBot.open();

`VueBot.close()`

Close the chat window programmatically.

Example:

window.VueBot.close();

`VueBot.toggle()`

Toggle the chat window open/closed state.

Example:

window.VueBot.toggle();

Markdown Support

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.

Styling

The widget uses CSS custom properties (variables) that can be overridden:

:root {
  --vuebot-primary: #00a6f4;
  --vuebot-secondary: #00bcff;
  --vuebot-text: #1f2937;
  --vuebot-bg: #ffffff;
}

You can override these in your own CSS:

:root {
  --vuebot-primary: #10b981;
  --vuebot-secondary: #059669;
}

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

This software is proprietary and confidential. Unauthorized copying, forking, modification, or distribution is strictly prohibited.

For licensing inquiries, please contact: [email protected]

Support

For issues, questions, or feature requests, please contact support or visit our documentation at https://vuebot.vuedapt.com.

Changelog

1.3.0

Added drag-and-drop functionality for the floating widget button
Widget can now be repositioned to any corner by dragging the button

1.2.0

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

1.1.0

Added session management with sessionStorage

1.0.0

Initial release
Markdown support for rich text rendering
Customizable styling and positioning
React and vanilla JavaScript support
TypeScript definitions included

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VueBot Widget

Features

Installation

NPM

CDN / Script Tag

Quick Start

Basic Usage (Script Tag)

React

Getting Your API Key

Configuration Options

Required

Optional

Examples

Customized Widget

Dark Theme Widget

Programmatic Control

React Example

Next.js Example

API Methods

VueBot.init(config)

VueBot.open()

VueBot.close()

VueBot.toggle()

Markdown Support

Styling

Browser Support

License

Support

Changelog

1.3.0

1.2.0

1.1.0

1.0.0

`VueBot.init(config)`

`VueBot.open()`

`VueBot.close()`

`VueBot.toggle()`