@mobil80-dev/chatbot-widget 2.0.1 → 2.0.3

package/README.md

@@ -11,6 +11,7 @@ A lightweight JavaScript chatbot widget powered by VaultChat, designed to be emb
 - No iframe
 - No dependencies
 - Easy setup
+- Optional page/container restriction via `attachToElement`
 
 ## 📦 Installation
 
@@ -112,20 +113,41 @@ VaultChat.init({
 
 ```
 
+## 📌 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,                   |
-| buttonType    | string |  `text` | `image`                   |
-| buttonShape   | string | `circle` | `square` | `pill`        |
-
+| 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 |
 
 ```
 

package/index.js

@@ -10,7 +10,7 @@ let isOpen = false
 /* =========================================================
    STYLE INJECTION (ONCE)
 ========================================================= */
-function injectStylesOnce () {
+function injectStylesOnce() {
   if (stylesInjected) return
   stylesInjected = true
 
@@ -23,7 +23,6 @@ function injectStylesOnce () {
     .vc-fab:hover {
       box-shadow: 0 12px 28px rgba(0,0,0,.3);
     }
-
     .vc-loader {
       display: inline-flex;
       gap: 6px;
@@ -41,7 +40,6 @@ function injectStylesOnce () {
     }
     .vc-loader span:nth-child(1) { animation-delay: -0.32s; }
     .vc-loader span:nth-child(2) { animation-delay: -0.16s; }
-
     @keyframes vc-bounce {
       0%, 80%, 100% { transform: scale(0); }
       40% { transform: scale(1); }
@@ -50,30 +48,33 @@ function injectStylesOnce () {
   document.head.appendChild(style)
 }
 
+/* =========================================================
+   HELPER TO RESOLVE CONTAINER
+========================================================= */
+function getAttachContainer(selector) {
+  if (!selector) return document.body
+  if (typeof selector === 'string') {
+    const el = document.querySelector(selector)
+    return el || document.body
+  }
+  return selector // accept DOM element directly
+}
+
 /* =========================================================
    BUTTON
 ========================================================= */
-function getButton () {
+function getButton() {
   if (vcButton) return vcButton
-
   vcButton = document.createElement('div')
   vcButton.className = 'vc-fab'
-  document.body.appendChild(vcButton)
-
   return vcButton
 }
 
-function updateButton (config) {
+function updateButton(config) {
   const button = getButton()
   button.innerHTML = ''
 
-  const {
-    buttonType = 'text',
-    buttonContent = 'Chat',
-    buttonShape = 'circle',
-    primaryColor = '#2563eb'
-  } = config
-
+  const { buttonType = 'text', buttonContent = '🤖', buttonShape = 'circle', primaryColor = '#2563eb' } = config
   const isText = buttonType === 'text'
 
   if (buttonType === 'image') {
@@ -87,8 +88,7 @@ function updateButton (config) {
     button.textContent = buttonContent
   }
 
-  const borderRadius =
-    buttonShape === 'pill' ? '999px' : buttonShape === 'square' ? '8px' : '50%'
+  const borderRadius = buttonShape === 'pill' ? '999px' : buttonShape === 'square' ? '8px' : '50%'
 
   Object.assign(button.style, {
     position: 'fixed',
@@ -116,51 +116,22 @@ function updateButton (config) {
 /* =========================================================
    CARD
 ========================================================= */
-function getCard () {
+function getCard() {
   if (vcCard) return vcCard
-
   vcCard = document.createElement('div')
-  document.body.appendChild(vcCard)
   return vcCard
 }
 
-function updateCard (config) {
+function updateCard(config) {
   const card = getCard()
 
-  const theme =
-    config.theme === 'dark'
-      ? 'dark'
-      : config.theme === 'light'
-      ? 'light'
-      : window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
-
+  const theme = config.theme === 'dark' ? 'dark' : config.theme === 'light' ? 'light' :
+    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   const isDark = theme === 'dark'
 
   const colors = isDark
-    ? {
-        cardBg: '#0f172a',
-        headerBorder: '#1e293b',
-        text: '#e5e7eb',
-        mutedText: '#94a3b8',
-        inputBg: '#020617',
-        inputBorder: '#334155',
-        botBubble: '#1e293b',
-        userText: '#ffffff',
-        messagesBg: '#020617'
-      }
-    : {
-        cardBg: '#ffffff',
-        headerBorder: '#e5e7eb',
-        text: '#0f172a',
-        mutedText: '#64748b',
-        inputBg: '#ffffff',
-        inputBorder: '#cbd5f5',
-        botBubble: '#e5e7eb',
-        userText: '#ffffff',
-        messagesBg: '#f8fafc'
-      }
+    ? { cardBg: '#0f172a', headerBorder: '#1e293b', text: '#e5e7eb', mutedText: '#94a3b8', inputBg: '#020617', inputBorder: '#334155', botBubble: '#1e293b', userText: '#ffffff', messagesBg: '#020617' }
+    : { cardBg: '#ffffff', headerBorder: '#e5e7eb', text: '#0f172a', mutedText: '#64748b', inputBg: '#ffffff', inputBorder: '#cbd5f5', botBubble: '#e5e7eb', userText: '#ffffff', messagesBg: '#f8fafc' }
 
   const primaryColor = config.primaryColor || '#2563eb'
 
@@ -208,20 +179,22 @@ function updateCard (config) {
   const input = card.querySelector('#vc-input')
   const sendBtn = card.querySelector('#vc-send')
 
-  function sendMessage () {
+  // send message
+  async function sendMessage() {
     const text = input.value.trim()
     if (!text) return
 
     const userMsg = document.createElement('div')
     userMsg.style.cssText = `
-    background:${config.primaryColor || '#2563eb'};
-    color:${config.theme === 'dark' ? '#fff' : '#fff'};
-    padding:8px 12px;
-    border-radius:12px;
-    max-width:80%;
-    margin:8px 0 8px auto`
+      background:${primaryColor};
+      color:${colors.userText};
+      padding:8px 12px;
+      border-radius:12px;
+      max-width:80%;
+      margin:8px 0 8px auto`
     userMsg.textContent = text
     messages.appendChild(userMsg)
+
     input.value = ''
     messages.scrollTop = messages.scrollHeight
 
@@ -232,29 +205,22 @@ function updateCard (config) {
 
     showLoader(messages, sendBtn)
 
-    fetch('https://api.vaultchat.io/askChatbot', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ api_key: config.apiKey, question: text })
-    })
-      .then(res => res.json())
-      .then(data => {
-        hideLoader(sendBtn)
-        addBotMessage(
-          data?.data?.blocks?.map(b => b.text).join('\n') || 'No response'
-        )
-      })
-      .catch(() => {
-        hideLoader(sendBtn)
-        addBotMessage('⚠️ Something went wrong')
+    try {
+      const res = await fetch('https://api.vaultchat.io/askChatbot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ api_key: config.apiKey, question: text })
       })
+      const data = await res.json()
+      hideLoader(sendBtn)
+      addBotMessage(data?.data?.blocks?.map(b => b.text).join('\n') || 'No response')
+    } catch {
+      hideLoader(sendBtn)
+      addBotMessage('⚠️ Something went wrong')
+    }
   }
-  sendBtn.onclick = sendMessage
-  input.addEventListener('keydown', e => {
-    if (e.key === 'Enter') sendMessage()
-  })
 
-  function addBotMessage (text) {
+  function addBotMessage(text) {
     const div = document.createElement('div')
     div.style.cssText = `
       background:${colors.botBubble};
@@ -267,12 +233,18 @@ function updateCard (config) {
     messages.appendChild(div)
     messages.scrollTop = messages.scrollHeight
   }
+
+  // events
+  sendBtn.onclick = sendMessage
+  input.addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage() })
+
+  return { messages, input, sendBtn }
 }
 
 /* =========================================================
    LOADER
 ========================================================= */
-function showLoader (container, sendBtn) {
+function showLoader(container, sendBtn) {
   loaderEl = document.createElement('div')
   loaderEl.className = 'vc-loader'
   loaderEl.innerHTML = '<span></span><span></span><span></span>'
@@ -285,7 +257,7 @@ function showLoader (container, sendBtn) {
   }
 }
 
-function hideLoader (sendBtn) {
+function hideLoader(sendBtn) {
   loaderEl?.remove()
   loaderEl = null
 
@@ -300,16 +272,29 @@ function hideLoader (sendBtn) {
    PUBLIC API
 ========================================================= */
 const VaultChat = {
-  init (config = {}) {
+  init(config = {}) {
     injectStylesOnce()
     updateButton(config)
+
+    const mountEl = getAttachContainer(config.attachToElement)
+    mountEl.appendChild(vcButton)
+
     updateCard(config)
+    mountEl.appendChild(vcCard)
 
-    const button = getButton()
-    button.onclick = () => {
+    vcButton.onclick = () => {
       isOpen = !isOpen
       vcCard.style.display = isOpen ? 'flex' : 'none'
     }
+  },
+
+  destroy() {
+    vcButton?.remove()
+    vcCard?.remove()
+    vcButton = null
+    vcCard = null
+    loaderEl = null
+    isOpen = false
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobil80-dev/chatbot-widget",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Drop-in JavaScript chat widget for websites (no iframe, no framework)",
   "main": "index.js",
   "type": "module",
@@ -11,7 +11,7 @@
     "javascript",
     "vaultchat"
   ],
-  "author": "Nantha Gopal",
+  "author": "NanthaGopal",
   "license": "MIT",
   "dependencies": {
     "@mobil80-dev/chatbot-widget": "^1.0.8"