@arcai/chatbot

@arcai/chatbot

A customizable chatbot widget for websites with beautiful animations and modern design.

Features

• 🎨 Fully customizable appearance
• 🌊 Smooth animations
• 💭 Thought bubbles
• 🎯 Multiple positioning options
• 🌓 Glassmorphism effects
• 📱 Responsive design
• 🔌 Easy integration

Installation

NPM

npm install @arcai/chatbot

CDN

Add the script directly to your HTML:

<!-- Using jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@arcai/chatbot/dist/chatbot.min.js"></script>

<!-- OR using UNPKG -->
<script src="https://unpkg.com/@arcai/chatbot/dist/chatbot.min.js"></script>

Usage

With NPM

import { Chatbot } from '@arcai/chatbot';

const chatbot = new Chatbot({
  apiKey: 'your-api-key',
  position: 'bottom-right',
  primaryColor: '#2563eb',
  floatAnimation: 'float-up-down',
  showThoughts: true,
  customThoughts: [
    "Need help?",
    "Have any questions?",
    "I'm here to assist you!"
  ],
  onMessage: async (message) => {
    // Handle incoming messages
    return "Thanks for your message!";
  }
});

With CDN

<script src="https://cdn.jsdelivr.net/npm/@arcai/chatbot/dist/chatbot.min.js"></script>
<script>
  const chatbot = new Arcai.Chatbot({
    apiKey: 'your-api-key',
    position: 'bottom-right',
    primaryColor: '#2563eb',
    floatAnimation: 'float-up-down',
    showThoughts: true,
    customThoughts: [
      "Need help?",
      "Have any questions?",
      "I'm here to assist you!"
    ],
    onMessage: async (message) => {
      return "Thanks for your message!";
    }
  });
</script>

Configuration Options

Option	Type	Default	Description
apiKey	string	-	Your API key (required)
position	string	'bottom-right'	Widget position ('bottom-right', 'bottom-left', 'top-right', 'top-left')
primaryColor	string	'#2563eb'	Primary color for the widget
textColor	string	'#1e293b'	Text color
bgImage	string	-	Background image URL
opacity	number	100	Background opacity (0-100)
glassmorphism	boolean	false	Enable glassmorphism effect
floatAnimation	string	'float-up-down'	Animation style for the launcher
showAvatar	boolean	true	Show bot avatar in messages
showThoughts	boolean	true	Show thought bubbles
thoughtInterval	number	8	Interval between thoughts (seconds)
customThoughts	string[]	[...]	Custom thought messages
onMessage	function	-	Message handler function

Methods

• open(): Open the chat widget
• close(): Close the chat widget
• toggle(): Toggle the chat widget
• destroy(): Remove the widget from the page

Events

The chatbot extends EventEmitter and emits the following events:

• message: When a message is sent or received
• open: When the widget is opened
• close: When the widget is closed

Styling

The widget uses CSS variables for easy customization:

:root {
  --arcai-primary-color: #2563eb;
  --arcai-primary-color-dark: #1d4ed8;
}

License

MIT