Drop-in JavaScript chat widget for websites (no iframe, no framework)
npm install @mobil80-dev/chatbot-widgetattachToElement
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
``