npm package: @mobil80-dev/chatbot-widget
Description: Drop-in JavaScript chat widget for websites (no iframe, no framework)
Author: NanthaGopal
Latest version: 3.0.1

## 🤖Chatbot

A lightweight JavaScript chatbot widget powered by VaultChat, designed to be embedded into any website without iframes or frameworks.

## ✨ Features

- Floating chat button (fully customizable)
- Chat card UI
- API-based chatbot responses
- Light & Dark theme support
- No iframe
- No dependencies
- Easy setup
- Optional page/container restriction via `attachToElement`

## 📦 Installation

```bash
npm install @mobil80-dev/chatbot-widget
```

## 🎨 Theme (Light / Dark)

VaultChat supports light and dark themes to match your application UI.
This helps improve text visibility and appearance when used inside dark-themed websites.

```
theme: 'light' | 'dark'
```

## ✅ Supported Button Types

You can use text, image, or custom HTML as the floating button.

## ✅ Supported Button Shapes

You can use circle, square, pill as the floating button shape.

## 🌐 HTML / CSS

### 🚀 Usage

```
<script type="module">
  import VaultChat from 'https://unpkg.com/@mobil80-dev/chatbot-widget/dist/index.js'

  VaultChat.init({
    apiKey: 'YOUR_API_KEY',
    primaryColor: '#7c3aed',
    theme: 'light' | 'dark'
    buttonContent: '💬',         // content | image Url | emote
    buttonType: 'text',        //  text | image
    buttonShape: 'circle'      // circle | square | pill
  })
</script>
```

## 🧩 Vue

### 🚀 Usage (Vue 3)

```
import { onMounted } from 'vue'
import VaultChat from '@mobil80-dev/chatbot-widget'

onMounted(() => {
  VaultChat.init({
    apiKey: 'YOUR_API_KEY',
    primaryColor: '#7c3aed',
    theme: 'light' | 'dark'
    buttonContent: '💬',         // content | image Url | emote
    buttonType: 'test',        // text | image
    buttonShape: 'circle'      // circle | square | pill
  })
})
```

## ⚛️ React

### 🚀 Usage

```
import { useEffect } from 'react'
import VaultChat from '@mobil80-dev/chatbot-widget'

useEffect(() => {
  VaultChat.init({
    apiKey: 'YOUR_API_KEY',
    primaryColor: '#7c3aed',
    theme: 'light' | 'dark'
    buttonContent: '💬',         // content | image Url | emote
    buttonType: 'text',        // text | image
    buttonShape: 'circle'      // circle | square | pill
  })
}, [])
```

## 🅰️ Angular

### 🚀 Usage

```
import VaultChat from '@mobil80-dev/chatbot-widget'

VaultChat.init({
  apiKey: 'YOUR_API_KEY',
  primaryColor: '#7c3aed',
  theme: 'light' | 'dark'
  buttonContent: '💬',         // content | image Url | emote
  buttonType: 'text',        // text | image
  buttonShape: 'circle'      // circle | square | pill
})

```

## 📌 attachToElement (Optional)

VaultChat allows you to specify a container where the chat widget should be rendered. By default, the chat button and card are appended to document.body.

You can restrict the widget to a specific element by passing a CSS selector or a DOM element using the attachToElement option:

```
// Using a CSS selector
VaultChat.init({
  apiKey: 'YOUR_API_KEY',
  attachToElement: '#dashboard-container'
})

// Using a DOM element
const container = document.getElementById('dashboard-container')
VaultChat.init({
  apiKey: 'YOUR_API_KEY',
  attachToElement: container
})
```

📌 Call this inside ngOnInit() of your root or layout component.

## ⚙️ Configuration Reference

```
| Option          | Type       | Description                                     |
| --------------- | ---------- | ----------------------------------------------- |
| apiKey          | string     | Your VaultChat API key                          |
| primaryColor    | string     | Primary UI color                                |
| theme           | string     | `light` or `dark`                               |
| buttonContent   | string     | Text, image URL, or emoji                       |
| buttonType      | string     | `text` or `image`                               |
| buttonShape     | string     | `circle`, `square`, or `pill`                   |
| attachToElement | string/DOM | CSS selector or DOM element to mount the widget |

```

## 📄 License

```
MIT
Mobil80
```