@arcai/chatbot v1.0.1

@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

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