npm package: @mukesh2110/chatbot-widget
Description: A plug-and-play chatbot widget for React and web apps, supporting multi-widget and plan-based usage.
Author: Your Company Name
Latest version: 1.0.1

# 🤖 Chatbot Widget for React & Web

A plug-and-play, multi-widget AI chatbot for your website or React app. Delight your users, answer questions, and boost engagement with a beautiful, customizable chat assistant—no backend hassle required!

---

## ✨ Features
- **Multi-widget support** (per plan)
- **Easy React & JS integration**
- **No backend setup needed**
- **Customizable theme, position, and bot name**
- **Widget-specific analytics & document management**
- **Works with your API & S3 storage**

---

## 🚀 Installation

```bash
npm install @mukesh2110/chatbot-widget
```

---

## ⚡️ Quick Start (React Example)

```jsx
import React, { useEffect } from 'react';
import ChatbotService from '@mukesh2110/chatbot-widget';

function App() {
  useEffect(() => {
    const chatbot = new ChatbotService({
      clientId: 'YOUR_CLIENT_ID',
      widgetId: 'YOUR_WIDGET_ID',
      apiUrl: 'https://your-domain.com/api/v1', // Optional
      position: 'bottom-right', // Optional
      theme: {
        primaryColor: '#007bff',
        backgroundColor: '#ffffff',
        textColor: '#000000'
      },
      botName: 'Chat Assistant',
      welcomeMessage: 'Hello! How can I help you today?'
    });
  }, []);

  return <div>Your App Content</div>;
}

export default App;
```

---

## ⚙️ Configuration Options

| Option           | Type     | Default                | Description                                  |
|------------------|----------|------------------------|----------------------------------------------|
| `clientId`       | string   | **required**           | Your unique client ID                        |
| `widgetId`       | string   | **required**           | The widget ID to use                         |
| `apiUrl`         | string   | 'https://localhost:3000/api/v1' | API endpoint for queries           |
| `position`       | string   | 'bottom-right'         | Widget position: 'bottom-right', 'top-left', etc. |
| `theme`          | object   | See below              | Theme colors: `primaryColor`, `backgroundColor`, `textColor` |
| `botName`        | string   | 'Chat Assistant'       | Name shown in the chat header                |
| `welcomeMessage` | string   | Friendly default       | First message shown to users                 |

---

## 🌐 HTML Script Tag Alternative

Want to use it without npm? Just add this to your HTML:

```html
<script src="https://your-domain.com/chatbot.js?clientId=YOUR_CLIENT_ID&widgetId=YOUR_WIDGET_ID"></script>
```

---

## ❓ FAQ

**Q: Can I use multiple widgets on one site?**  
A: Yes! Each widget has its own `widgetId` and settings.

**Q: Is it customizable?**  
A: Absolutely. Change colors, position, bot name, and more.

**Q: Does it work outside React?**  
A: Yes, you can use it in any JS app or plain HTML via the script tag.

**Q: Where do I get my clientId and widgetId?**  
A: From your dashboard after signing up on [your-domain.com](https://your-domain.com).

---

## 🛟 Support & Community
- [Documentation](https://your-domain.com/docs)
- [Open an Issue](https://github.com/your-org/your-repo/issues)
- Email: support@your-domain.com

---

## 📝 License

MIT — Free for personal & commercial use!