@mobil80-dev/chatbot-widget

🤖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

$3

`

`

🧩 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

$3

`
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

$3

`
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
``