🤖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

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