@helllo-ai/agent-chat-widget 0.1.17 → 0.1.21

package/agent-chat.latest.js

@@ -20,10 +20,18 @@
     return `
       :host, .acw * { box-sizing: border-box; }
       .acw-container { position: fixed; z-index: 2147483000; font-family: Inter, system-ui, -apple-system, sans-serif; }
+      .acw-container.bottom-right { right: 16px; bottom: 16px; }
+      .acw-container.middle-right { right: 16px; top: 50%; transform: translateY(-50%); }
       .acw-launcher { background: ${safePrimary}; color: #fff; border: none; border-radius: 999px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 14px; transition: transform 0.2s; }
       .acw-launcher:hover { opacity: 0.95; }
+      .acw-launcher img { width: 24px; height: 24px; object-fit: contain; }
       .acw-launcher.vertical { flex-direction: column; padding: 14px 10px; min-width: 48px; height: auto; }
       .acw-launcher.vertical span { writing-mode: sideways-lr; text-orientation: mixed; letter-spacing: 0.5px; }
+      .acw-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
+      .acw-header-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
+      .acw-header-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .acw-unread-badge { background: rgba(255,255,255,0.9); color: ${safePrimary}; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
+      .acw-unread-badge.hidden { display: none; }
       .acw-panel { position: absolute; width: 360px; max-width: 90vw; height: 520px; max-height: 80vh; background: ${safeBg}; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.22); display: none; flex-direction: column; overflow: hidden; }
       .acw-panel.bottom-right { right: 0; bottom: 56px; }
       .acw-panel.middle-right { right: 56px; top: 50%; transform: translateY(-50%); }
@@ -40,13 +48,30 @@
       .acw-msg-bot { margin-right: auto; background: rgba(0,0,0,0.05); color: #111; }
       .acw-input { border-top: 1px solid rgba(0,0,0,0.08); padding: 10px; display: flex; gap: 8px; }
       .acw-input input { flex: 1; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-size: 14px; }
+      .acw-input input:disabled, .acw-input button:disabled { opacity: 0.6; cursor: not-allowed; }
       .acw-input button { background: ${safePrimary}; color: #fff; border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-weight: 600; }
+      .acw-footer { font-size: 11px; color: #94a3b8; padding: 6px 12px 10px; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); }
+      .acw-footer a { color: #64748b; text-decoration: none; }
+      .acw-footer a:hover { text-decoration: underline; }
       .acw-status { font-size: 12px; color: #666; padding: 8px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.06); }
       .acw-dot { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 6px rgba(0,0,0,0.04); }
       .acw-dot.connected { background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,0.18); }
       .acw-dot.disconnected { background: #ef4444; box-shadow: 0 0 0 6px rgba(239,68,68,0.18); }
-      .acw-disconnect { margin-left: auto; background: #f8fafc; color: #0f172a; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
-      .acw-disconnect:hover { background: #eef2f7; }
+      .acw-customer-form { position: absolute; inset: 0; background: ${safeBg}; z-index: 10; display: flex; flex-direction: column; padding: 20px; }
+      .acw-customer-form h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #0f172a; }
+      .acw-customer-form p { margin: 0 0 16px; font-size: 13px; color: #64748b; }
+      .acw-customer-form .field { margin-bottom: 16px; }
+      .acw-customer-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: #475569; }
+      .acw-customer-form input { width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-size: 14px; }
+      .acw-customer-form .actions { display: flex; gap: 8px; margin-top: auto; }
+      .acw-customer-form button { flex: 1; padding: 10px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
+      .acw-customer-form .submit-btn { background: ${safePrimary}; color: #fff; }
+      .acw-customer-form .submit-btn:hover { opacity: 0.95; }
+      .acw-customer-form .skip-btn { background: #f8fafc; color: #64748b; border: 1px solid rgba(0,0,0,0.08); }
+      .acw-customer-form .skip-btn:hover { background: #eef2f7; }
+      .acw-start-cta { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
+      .acw-start-cta button { background: ${safePrimary}; color: #fff; border: none; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
+      .acw-start-cta button:hover { opacity: 0.95; }
       @media (max-width: 480px) {
         .acw-panel { width: calc(100vw - 24px); height: 70vh; }
       }
@@ -65,9 +90,30 @@
       wsUrl,
       title = 'Chat with us',
       greeting = null,
+      captureCustomerInfo = false,
+      allowSkipCustomerInfo = true,
       position = 'bottom-right',
+      iconUrl = null,
+      showIcon = true,
+      launcherText = 'Chat',
     } = config
 
+    // Resolve icon: explicit iconUrl, then page favicon, then /favicon.ico (only used when showIcon is true)
+    const resolvedIconUrl = (() => {
+      if (!showIcon) return null
+      if (iconUrl && typeof iconUrl === 'string' && iconUrl.trim()) return iconUrl.trim()
+      try {
+        const link = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]')
+        if (link && link.href) return link.href
+      } catch (_) {}
+      try {
+        const origin = window.location.origin || ''
+        if (origin) return origin + '/favicon.ico'
+      } catch (_) {}
+      return null
+    })()
+    const launcherLabel = (typeof launcherText === 'string' && launcherText.trim()) ? launcherText.trim() : 'Chat'
+
     // Valid positions
     const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
     const finalPosition = validPositions.includes(position) ? position : 'bottom-right'
@@ -130,13 +176,42 @@
 
     const launcher = document.createElement('button')
     launcher.className = isVertical ? 'acw-launcher vertical' : 'acw-launcher'
-    launcher.innerHTML = '<span>Chat</span>'
+    if (resolvedIconUrl) {
+      const launcherImg = document.createElement('img')
+      launcherImg.src = resolvedIconUrl
+      launcherImg.alt = launcherLabel
+      launcher.appendChild(launcherImg)
+      const launcherTextSpan = document.createElement('span')
+      launcherTextSpan.textContent = launcherLabel
+      launcher.appendChild(launcherTextSpan)
+    } else {
+      const span = document.createElement('span')
+      span.textContent = launcherLabel
+      launcher.appendChild(span)
+    }
 
     const header = document.createElement('div')
     header.className = 'acw-header'
+    const headerLeft = document.createElement('div')
+    headerLeft.className = 'acw-header-left'
+    if (resolvedIconUrl) {
+      const headerIcon = document.createElement('img')
+      headerIcon.className = 'acw-header-icon'
+      headerIcon.src = resolvedIconUrl
+      headerIcon.alt = ''
+      headerLeft.appendChild(headerIcon)
+    }
+    const titleWrap = document.createElement('div')
+    titleWrap.className = 'acw-header-title-wrap'
     const titleEl = document.createElement('div')
     titleEl.className = 'acw-title'
     titleEl.textContent = title
+    const unreadBadge = document.createElement('span')
+    unreadBadge.className = 'acw-unread-badge hidden'
+    unreadBadge.textContent = '0'
+    titleWrap.appendChild(titleEl)
+    titleWrap.appendChild(unreadBadge)
+    headerLeft.appendChild(titleWrap)
     const headerActions = document.createElement('div')
     headerActions.style.display = 'flex'
     headerActions.style.alignItems = 'center'
@@ -151,7 +226,7 @@
 
     headerActions.appendChild(minimizeBtn)
     headerActions.appendChild(closeBtn)
-    header.appendChild(titleEl)
+    header.appendChild(headerLeft)
     header.appendChild(headerActions)
 
     const statusEl = document.createElement('div')
@@ -160,15 +235,17 @@
     statusDot.className = 'acw-dot disconnected'
     const statusText = document.createElement('span')
     statusText.textContent = 'Disconnected'
-    const disconnectBtn = document.createElement('button')
-    disconnectBtn.className = 'acw-disconnect'
-    disconnectBtn.textContent = 'Connect'
     statusEl.appendChild(statusDot)
     statusEl.appendChild(statusText)
-    statusEl.appendChild(disconnectBtn)
+
+    const startCtaEl = document.createElement('div')
+    startCtaEl.className = 'acw-start-cta'
+    const startConversationBtn = document.createElement('button')
+    startConversationBtn.textContent = 'Click to Start Conversation'
+    startCtaEl.appendChild(startConversationBtn)
 
     const messages = document.createElement('div')
-      messages.className = 'acw-messages'
+    messages.className = 'acw-messages'
 
     const inputWrap = document.createElement('div')
     inputWrap.className = 'acw-input'
@@ -180,20 +257,219 @@
     inputWrap.appendChild(input)
     inputWrap.appendChild(sendBtn)
 
+    const footerEl = document.createElement('div')
+    footerEl.className = 'acw-footer'
+    footerEl.style.display = 'none'
+    const footerLink = document.createElement('a')
+    footerLink.href = 'https://helllo.ai'
+    footerLink.target = '_blank'
+    footerLink.rel = 'noopener noreferrer'
+    footerLink.textContent = 'helllo.ai'
+    footerEl.appendChild(document.createTextNode('Powered by '))
+    footerEl.appendChild(footerLink)
+
+    // Customer info form (if enabled)
+    let customerForm = null
+    let sessionId = null
+    let customerInfoSubmitted = false
+    let firstMessageReceived = false
+    let conversationStarted = false
+    let formShownBeforeConnect = false
+    let pendingCustomerName = null
+    let pendingCustomerPhone = null
+    let unreadCount = 0
+
+    if (captureCustomerInfo) {
+      customerForm = document.createElement('div')
+      customerForm.className = 'acw-customer-form'
+      customerForm.style.display = 'none'
+      
+      const formTitle = document.createElement('h3')
+      formTitle.textContent = 'Welcome! Please share your details'
+      const formDesc = document.createElement('p')
+      formDesc.textContent = 'We need a few details to get started'
+      
+      const nameField = document.createElement('div')
+      nameField.className = 'field'
+      const nameLabel = document.createElement('label')
+      nameLabel.textContent = 'Your Name'
+      nameLabel.setAttribute('for', 'acw-customer-name')
+      const nameInput = document.createElement('input')
+      nameInput.id = 'acw-customer-name'
+      nameInput.type = 'text'
+      nameInput.placeholder = 'Enter your name'
+      nameField.appendChild(nameLabel)
+      nameField.appendChild(nameInput)
+      
+      const phoneField = document.createElement('div')
+      phoneField.className = 'field'
+      const phoneLabel = document.createElement('label')
+      phoneLabel.textContent = 'Phone Number'
+      phoneLabel.setAttribute('for', 'acw-customer-phone')
+      const phoneInput = document.createElement('input')
+      phoneInput.id = 'acw-customer-phone'
+      phoneInput.type = 'tel'
+      phoneInput.placeholder = 'Enter your phone number'
+      phoneField.appendChild(phoneLabel)
+      phoneField.appendChild(phoneInput)
+      
+      const formActions = document.createElement('div')
+      formActions.className = 'actions'
+      const submitBtn = document.createElement('button')
+      submitBtn.className = 'submit-btn'
+      submitBtn.textContent = 'Start Chat'
+      const skipBtn = document.createElement('button')
+      skipBtn.className = 'skip-btn'
+      skipBtn.textContent = 'Skip'
+      formActions.appendChild(submitBtn)
+      if (allowSkipCustomerInfo) {
+        formActions.appendChild(skipBtn)
+      }
+      
+      customerForm.appendChild(formTitle)
+      customerForm.appendChild(formDesc)
+      customerForm.appendChild(nameField)
+      customerForm.appendChild(phoneField)
+      customerForm.appendChild(formActions)
+      
+      function submitCustomerInfo() {
+        const name = nameInput.value.trim()
+        const phone = phoneInput.value.trim()
+        
+        if (!name || !phone) {
+          alert('Please fill in both name and phone number')
+          return
+        }
+        
+        // Form shown before connect: save and connect; customer_info sent in connection_established
+        if (formShownBeforeConnect) {
+          pendingCustomerName = name
+          pendingCustomerPhone = phone
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'none'
+          connect()
+          return
+        }
+        
+        if (!sessionId) {
+          console.error('[AgentChatWidget] No session ID available')
+          alert('Session not established. Please wait for connection.')
+          return
+        }
+        
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+          alert('WebSocket not connected. Please wait for connection.')
+          return
+        }
+        
+        try {
+          ws.send(JSON.stringify({
+            type: 'customer_info',
+            session_id: sessionId,
+            phone_number: phone,
+            customer_name: name,
+            embed_key: embedKey
+          }))
+          customerInfoSubmitted = true
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'flex'
+        } catch (error) {
+          console.error('[AgentChatWidget] Error sending customer info:', error)
+          alert('Error submitting information. Please try again.')
+        }
+      }
+      
+      function skipCustomerInfo() {
+        if (formShownBeforeConnect) {
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'none'
+          connect()
+          return
+        }
+        customerInfoSubmitted = true
+        customerForm.style.display = 'none'
+        messages.style.display = 'flex'
+        inputWrap.style.display = 'flex'
+      }
+      
+      submitBtn.onclick = submitCustomerInfo
+      if (allowSkipCustomerInfo) skipBtn.onclick = skipCustomerInfo
+      
+      // Allow Enter key to submit
+      nameInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          phoneInput.focus()
+        }
+      })
+      phoneInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault()
+          submitCustomerInfo()
+        }
+      })
+      
+      panel.appendChild(customerForm)
+    }
+
     panel.appendChild(header)
     panel.appendChild(statusEl)
+    panel.appendChild(startCtaEl)
     panel.appendChild(messages)
     panel.appendChild(inputWrap)
+    panel.appendChild(footerEl)
     shadow.appendChild(panel)
     shadow.appendChild(launcher)
     document.body.appendChild(container)
 
+    // Initial state: show start CTA, hide messages and input until user starts conversation
+    messages.style.display = 'none'
+    inputWrap.style.display = 'none'
+
+    function showStartCta() {
+      startCtaEl.style.display = 'flex'
+      messages.style.display = 'none'
+      inputWrap.style.display = 'none'
+      footerEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'none'
+    }
+    function showFormOnly() {
+      startCtaEl.style.display = 'none'
+      messages.style.display = 'none'
+      inputWrap.style.display = 'none'
+      footerEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'flex'
+    }
+    function showChat() {
+      startCtaEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'none'
+      messages.style.display = 'flex'
+      inputWrap.style.display = 'flex'
+      footerEl.style.display = 'block'
+    }
+
+    function updateUnreadBadge() {
+      unreadBadge.textContent = String(unreadCount)
+      if (unreadCount > 0) {
+        unreadBadge.classList.remove('hidden')
+      } else {
+        unreadBadge.classList.add('hidden')
+      }
+    }
+
     function appendMessage(text, role) {
       const msg = document.createElement('div')
       msg.className = 'acw-msg ' + (role === 'user' ? 'acw-msg-user' : 'acw-msg-bot')
       msg.textContent = text
       messages.appendChild(msg)
       messages.scrollTop = messages.scrollHeight
+      if (role === 'bot' && panel.style.display !== 'flex') {
+        unreadCount++
+        updateUnreadBadge()
+      }
     }
 
     // No default greeting; only show messages after connection
@@ -203,10 +479,32 @@
     let connecting = false
 
     const resolvedWsUrl = (() => {
+      // Explicit wsUrl takes highest priority
       if (wsUrl) return wsUrl
-      const baseCandidate = voiceServiceUrl || apiBaseUrl || new URL(document.currentScript?.src || window.location.href).origin
-      const voiceBase = (baseCandidate || '').replace(/\/$/, '')
-      const wsBase = voiceBase.replace(/^http/, 'ws')
+      
+      // Determine environment-specific WebSocket URL based on VERSION
+      let wsBase
+      if (VERSION.includes('-staging')) {
+        wsBase = 'wss://talk2ai-staging.helllo.ai'
+      } else if (VERSION.includes('-prod')) {
+        wsBase = 'wss://talk2ai-prod.helllo.ai'
+      } else {
+        // For dev/latest, use existing fallback logic
+        const baseCandidate = voiceServiceUrl || apiBaseUrl || new URL(document.currentScript?.src || window.location.href).origin
+        const voiceBase = (baseCandidate || '').replace(/\/$/, '')
+        // Handle both http/https and ws/wss URLs
+        if (voiceBase.startsWith('http://')) {
+          wsBase = voiceBase.replace(/^http/, 'ws')
+        } else if (voiceBase.startsWith('https://')) {
+          wsBase = voiceBase.replace(/^https/, 'wss')
+        } else if (voiceBase.startsWith('ws://') || voiceBase.startsWith('wss://')) {
+          wsBase = voiceBase // Already a WebSocket URL
+        } else {
+          // Default to ws if no protocol
+          wsBase = 'ws://' + voiceBase
+        }
+      }
+      
       const params = new URLSearchParams()
       params.set('embed_key', embedKey)
       params.set('host', window.location.hostname)
@@ -218,25 +516,34 @@
       console.info('[AgentChatWidget] Resolved WS URL:', resolvedWsUrl)
     } catch (_) {}
 
+    function setInputEnabled(enabled) {
+      input.disabled = !enabled
+      sendBtn.disabled = !enabled
+      input.placeholder = enabled ? 'Type a message...' : 'Connect to start chatting'
+    }
+
     function updateStatus(text, isConnected) {
       statusText.textContent = text
       statusDot.classList.remove('connected', 'disconnected')
       statusDot.classList.add(isConnected ? 'connected' : 'disconnected')
-
-      // Update button text and handler based on connection status
-      disconnectBtn.textContent = isConnected ? 'Disconnect' : 'Connect'
-      disconnectBtn.onclick = isConnected ? disconnect : connect
+      setInputEnabled(isConnected)
     }
 
     function connect() {
       if (connected || connecting) return
       connecting = true
+      firstMessageReceived = false
+      startCtaEl.style.display = 'none'
+      // Show chat UI immediately so the panel is not empty while connecting
+      showChat()
+      setInputEnabled(false)
       const url = resolvedWsUrl
       try {
         ws = new WebSocket(url)
       } catch (err) {
         connecting = false
-        updateStatus('Connection error', false)
+        updateStatus('Disconnected', false)
+        appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
         console.error('[AgentChatWidget] WS error', err)
         return
       }
@@ -245,33 +552,93 @@
         connected = true
         connecting = false
         updateStatus('Connected', true)
+        // If captureCustomerInfo, connection_established will show form or chat
+        if (!captureCustomerInfo) showChat()
       }
 
       ws.onmessage = (event) => {
         try {
           const data = JSON.parse(event.data)
+          
+          // Handle connection_established message
+          if (data.type === 'connection_established') {
+            if (data.session_id) sessionId = data.session_id
+            
+            // Form was shown before connect (Start Conversation → form → submit/skip): send customer_info if pending, then show chat
+            if (formShownBeforeConnect) {
+              if (pendingCustomerName && pendingCustomerPhone && ws && ws.readyState === WebSocket.OPEN) {
+                try {
+                  ws.send(JSON.stringify({
+                    type: 'customer_info',
+                    session_id: sessionId,
+                    phone_number: pendingCustomerPhone,
+                    customer_name: pendingCustomerName,
+                    embed_key: embedKey
+                  }))
+                } catch (e) {
+                  console.error('[AgentChatWidget] Error sending customer info:', e)
+                }
+              }
+              pendingCustomerName = null
+              pendingCustomerPhone = null
+              customerInfoSubmitted = true
+              if (data.welcome_message) appendMessage(data.welcome_message, 'bot')
+              showChat()
+              return
+            }
+            
+            // Display welcome message if provided
+            if (data.welcome_message) {
+              appendMessage(data.welcome_message, 'bot')
+              if (!firstMessageReceived && captureCustomerInfo && customerForm && !customerInfoSubmitted) {
+                firstMessageReceived = true
+                setTimeout(() => {
+                  showFormOnly()
+                  const nameInput = customerForm.querySelector('#acw-customer-name')
+                  if (nameInput) setTimeout(() => nameInput.focus(), 100)
+                }, 300)
+              }
+            } else {
+              if (!firstMessageReceived && captureCustomerInfo && customerForm && !customerInfoSubmitted) {
+                firstMessageReceived = true
+                setTimeout(() => {
+                  showFormOnly()
+                  const nameInput = customerForm.querySelector('#acw-customer-name')
+                  if (nameInput) setTimeout(() => nameInput.focus(), 100)
+                }, 100)
+              }
+            }
+            if (captureCustomerInfo && !customerInfoSubmitted && customerForm) return
+            showChat()
+            return
+          }
+          
+          // Handle regular chat messages
           const text = data.text || data.content || data.message || ''
           const role = data.role || 'assistant'
-          if (text) appendMessage(text, role === 'user' ? 'user' : 'bot')
+          if (text) {
+            appendMessage(text, role === 'user' ? 'user' : 'bot')
+          }
         } catch (e) {
           // Fallback to raw text
-          if (event.data) appendMessage(String(event.data), 'bot')
+          if (event.data) {
+            appendMessage(String(event.data), 'bot')
+          }
         }
       }
 
       ws.onerror = (e) => {
         console.error('[AgentChatWidget] WS error', e)
-        updateStatus('Connection error', false)
-        appendMessage('Connection error. Check WS service and URL.', 'bot')
+        updateStatus('Disconnected', false)
+        appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
       }
 
       ws.onclose = (ev) => {
         connected = false
         connecting = false
-        const reason = ev && (ev.reason || ev.code)
         updateStatus('Disconnected', false)
         if (!ev.wasClean) {
-          appendMessage(`Connection closed (${reason || 'unclean'})`, 'bot')
+          appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
         }
       }
     }
@@ -284,14 +651,38 @@
       connected = false
       connecting = false
       updateStatus('Disconnected', false)
+      sessionId = null
+      customerInfoSubmitted = false
+      firstMessageReceived = false
+      conversationStarted = false
+      formShownBeforeConnect = false
+      pendingCustomerName = null
+      pendingCustomerPhone = null
+      if (customerForm) {
+        customerForm.style.display = 'none'
+        const nameInput = customerForm.querySelector('#acw-customer-name')
+        const phoneInput = customerForm.querySelector('#acw-customer-phone')
+        if (nameInput) nameInput.value = ''
+        if (phoneInput) phoneInput.value = ''
+      }
+      showStartCta()
     }
 
     function sendMessage() {
       const text = input.value.trim()
       if (!text) return
+      
+      // Don't allow sending messages if customer info form is required and not submitted
+      if (captureCustomerInfo && !customerInfoSubmitted) {
+        return
+      }
+      
       if (!ws || ws.readyState !== WebSocket.OPEN) {
-        connect()
-        setTimeout(sendMessage, 200)
+        if (connecting) {
+          appendMessage('Connecting... Please wait.', 'bot')
+        } else {
+          appendMessage('Please click "Click to Start Conversation" to start chatting.', 'bot')
+        }
         return
       }
       appendMessage(text, 'user')
@@ -299,6 +690,19 @@
       input.value = ''
     }
 
+    startConversationBtn.onclick = () => {
+      conversationStarted = true
+      startCtaEl.style.display = 'none'
+      if (captureCustomerInfo && customerForm) {
+        formShownBeforeConnect = true
+        showFormOnly()
+        const nameInput = customerForm.querySelector('#acw-customer-name')
+        if (nameInput) setTimeout(() => nameInput.focus(), 100)
+      } else {
+        connect()
+      }
+    }
+
     launcher.onclick = () => {
       const isOpen = panel.style.display === 'flex'
       if (isOpen) {
@@ -306,7 +710,9 @@
         disconnect()
       } else {
         panel.style.display = 'flex'
-        connect()
+        unreadCount = 0
+        updateUnreadBadge()
+        if (!connected && !connecting && !conversationStarted) showStartCta()
       }
     }
 
@@ -335,7 +741,7 @@
       },
       open() {
         panel.style.display = 'flex'
-        connect()
+        // Connection only via explicit Connect button
       },
       close() {
         panel.style.display = 'none'
@@ -348,9 +754,17 @@
     const scriptEl = document.currentScript || document.querySelector('script[data-agent-id]')
     const ds = (scriptEl && scriptEl.dataset) || {}
     const allowed = (ds.allowedDomains || ds.allowed_domains || '').split(',').map((d) => d.trim()).filter(Boolean)
+    const captureCustomerInfo = userConfig.captureCustomerInfo !== undefined 
+      ? userConfig.captureCustomerInfo 
+      : ds.captureCustomerInfo === 'true' || ds.capture_customer_info === 'true'
+    const allowSkipCustomerInfo = userConfig.allowSkipCustomerInfo !== undefined 
+      ? userConfig.allowSkipCustomerInfo 
+      : ds.allowSkipCustomerInfo !== 'false' && ds.allow_skip_customer_info !== 'false'
     const position = userConfig.position || ds.position || ds.launcherPosition || 'bottom-right'
     const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
     const validPosition = validPositions.includes(position) ? position : 'bottom-right'
+    const showIcon = userConfig.showIcon !== undefined ? userConfig.showIcon : ds.showIcon !== 'false' && ds.show_icon !== 'false'
+    const launcherText = userConfig.launcherText ?? userConfig.launcher_text ?? ds.launcherText ?? ds.launcher_text ?? 'Chat'
     return {
       agentId: userConfig.agentId || ds.agentId,
       embedKey: userConfig.embedKey || ds.embedKey || ds.embed_key,
@@ -362,7 +776,12 @@
       wsUrl: userConfig.wsUrl || ds.wsUrl || ds.ws_url,
       title: userConfig.title || ds.title,
       greeting: userConfig.greeting || ds.greeting,
+      captureCustomerInfo: captureCustomerInfo,
+      allowSkipCustomerInfo: allowSkipCustomerInfo,
       position: validPosition,
+      iconUrl: userConfig.iconUrl || userConfig.icon_url || ds.iconUrl || ds.icon_url,
+      showIcon: showIcon,
+      launcherText: launcherText,
     }
   }
 

package/agent-chat.prod.js

@@ -24,8 +24,14 @@
       .acw-container.middle-right { right: 16px; top: 50%; transform: translateY(-50%); }
       .acw-launcher { background: ${safePrimary}; color: #fff; border: none; border-radius: 999px; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 14px; transition: transform 0.2s; }
       .acw-launcher:hover { opacity: 0.95; }
+      .acw-launcher img { width: 24px; height: 24px; object-fit: contain; }
       .acw-launcher.vertical { flex-direction: column; padding: 14px 10px; min-width: 48px; height: auto; }
       .acw-launcher.vertical span { writing-mode: sideways-lr; text-orientation: mixed; letter-spacing: 0.5px; }
+      .acw-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
+      .acw-header-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
+      .acw-header-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
+      .acw-unread-badge { background: rgba(255,255,255,0.9); color: ${safePrimary}; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
+      .acw-unread-badge.hidden { display: none; }
       .acw-panel { position: absolute; width: 360px; max-width: 90vw; height: 520px; max-height: 80vh; background: ${safeBg}; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.22); display: none; flex-direction: column; overflow: hidden; }
       .acw-panel.bottom-right { right: 0; bottom: 56px; }
       .acw-panel.middle-right { right: 56px; top: 50%; transform: translateY(-50%); }
@@ -42,13 +48,15 @@
       .acw-msg-bot { margin-right: auto; background: rgba(0,0,0,0.05); color: #111; }
       .acw-input { border-top: 1px solid rgba(0,0,0,0.08); padding: 10px; display: flex; gap: 8px; }
       .acw-input input { flex: 1; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; font-size: 14px; }
+      .acw-input input:disabled, .acw-input button:disabled { opacity: 0.6; cursor: not-allowed; }
       .acw-input button { background: ${safePrimary}; color: #fff; border: none; border-radius: 8px; padding: 0 14px; cursor: pointer; font-weight: 600; }
+      .acw-footer { font-size: 11px; color: #94a3b8; padding: 6px 12px 10px; text-align: center; border-top: 1px solid rgba(0,0,0,0.06); }
+      .acw-footer a { color: #64748b; text-decoration: none; }
+      .acw-footer a:hover { text-decoration: underline; }
       .acw-status { font-size: 12px; color: #666; padding: 8px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.06); }
       .acw-dot { width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 6px rgba(0,0,0,0.04); }
       .acw-dot.connected { background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,0.18); }
       .acw-dot.disconnected { background: #ef4444; box-shadow: 0 0 0 6px rgba(239,68,68,0.18); }
-      .acw-disconnect { margin-left: auto; background: #f8fafc; color: #0f172a; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
-      .acw-disconnect:hover { background: #eef2f7; }
       .acw-customer-form { position: absolute; inset: 0; background: ${safeBg}; z-index: 10; display: flex; flex-direction: column; padding: 20px; }
       .acw-customer-form h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: #0f172a; }
       .acw-customer-form p { margin: 0 0 16px; font-size: 13px; color: #64748b; }
@@ -61,6 +69,9 @@
       .acw-customer-form .submit-btn:hover { opacity: 0.95; }
       .acw-customer-form .skip-btn { background: #f8fafc; color: #64748b; border: 1px solid rgba(0,0,0,0.08); }
       .acw-customer-form .skip-btn:hover { background: #eef2f7; }
+      .acw-start-cta { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
+      .acw-start-cta button { background: ${safePrimary}; color: #fff; border: none; border-radius: 10px; padding: 14px 24px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
+      .acw-start-cta button:hover { opacity: 0.95; }
       @media (max-width: 480px) {
         .acw-panel { width: calc(100vw - 24px); height: 70vh; }
       }
@@ -80,9 +91,29 @@
       title = 'Chat with us',
       greeting = null,
       captureCustomerInfo = false,
+      allowSkipCustomerInfo = true,
       position = 'bottom-right',
+      iconUrl = null,
+      showIcon = true,
+      launcherText = 'Chat',
     } = config
 
+    // Resolve icon: explicit iconUrl, then page favicon, then /favicon.ico (only used when showIcon is true)
+    const resolvedIconUrl = (() => {
+      if (!showIcon) return null
+      if (iconUrl && typeof iconUrl === 'string' && iconUrl.trim()) return iconUrl.trim()
+      try {
+        const link = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]')
+        if (link && link.href) return link.href
+      } catch (_) {}
+      try {
+        const origin = window.location.origin || ''
+        if (origin) return origin + '/favicon.ico'
+      } catch (_) {}
+      return null
+    })()
+    const launcherLabel = (typeof launcherText === 'string' && launcherText.trim()) ? launcherText.trim() : 'Chat'
+
     // Valid positions
     const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
     const finalPosition = validPositions.includes(position) ? position : 'bottom-right'
@@ -145,13 +176,42 @@
 
     const launcher = document.createElement('button')
     launcher.className = isVertical ? 'acw-launcher vertical' : 'acw-launcher'
-    launcher.innerHTML = '<span>Chat</span>'
+    if (resolvedIconUrl) {
+      const launcherImg = document.createElement('img')
+      launcherImg.src = resolvedIconUrl
+      launcherImg.alt = launcherLabel
+      launcher.appendChild(launcherImg)
+      const launcherTextSpan = document.createElement('span')
+      launcherTextSpan.textContent = launcherLabel
+      launcher.appendChild(launcherTextSpan)
+    } else {
+      const span = document.createElement('span')
+      span.textContent = launcherLabel
+      launcher.appendChild(span)
+    }
 
     const header = document.createElement('div')
     header.className = 'acw-header'
+    const headerLeft = document.createElement('div')
+    headerLeft.className = 'acw-header-left'
+    if (resolvedIconUrl) {
+      const headerIcon = document.createElement('img')
+      headerIcon.className = 'acw-header-icon'
+      headerIcon.src = resolvedIconUrl
+      headerIcon.alt = ''
+      headerLeft.appendChild(headerIcon)
+    }
+    const titleWrap = document.createElement('div')
+    titleWrap.className = 'acw-header-title-wrap'
     const titleEl = document.createElement('div')
     titleEl.className = 'acw-title'
     titleEl.textContent = title
+    const unreadBadge = document.createElement('span')
+    unreadBadge.className = 'acw-unread-badge hidden'
+    unreadBadge.textContent = '0'
+    titleWrap.appendChild(titleEl)
+    titleWrap.appendChild(unreadBadge)
+    headerLeft.appendChild(titleWrap)
     const headerActions = document.createElement('div')
     headerActions.style.display = 'flex'
     headerActions.style.alignItems = 'center'
@@ -166,7 +226,7 @@
 
     headerActions.appendChild(minimizeBtn)
     headerActions.appendChild(closeBtn)
-    header.appendChild(titleEl)
+    header.appendChild(headerLeft)
     header.appendChild(headerActions)
 
     const statusEl = document.createElement('div')
@@ -175,15 +235,17 @@
     statusDot.className = 'acw-dot disconnected'
     const statusText = document.createElement('span')
     statusText.textContent = 'Disconnected'
-    const disconnectBtn = document.createElement('button')
-    disconnectBtn.className = 'acw-disconnect'
-    disconnectBtn.textContent = 'Connect'
     statusEl.appendChild(statusDot)
     statusEl.appendChild(statusText)
-    statusEl.appendChild(disconnectBtn)
+
+    const startCtaEl = document.createElement('div')
+    startCtaEl.className = 'acw-start-cta'
+    const startConversationBtn = document.createElement('button')
+    startConversationBtn.textContent = 'Click to Start Conversation'
+    startCtaEl.appendChild(startConversationBtn)
 
     const messages = document.createElement('div')
-      messages.className = 'acw-messages'
+    messages.className = 'acw-messages'
 
     const inputWrap = document.createElement('div')
     inputWrap.className = 'acw-input'
@@ -195,10 +257,27 @@
     inputWrap.appendChild(input)
     inputWrap.appendChild(sendBtn)
 
+    const footerEl = document.createElement('div')
+    footerEl.className = 'acw-footer'
+    footerEl.style.display = 'none'
+    const footerLink = document.createElement('a')
+    footerLink.href = 'https://helllo.ai'
+    footerLink.target = '_blank'
+    footerLink.rel = 'noopener noreferrer'
+    footerLink.textContent = 'helllo.ai'
+    footerEl.appendChild(document.createTextNode('Powered by '))
+    footerEl.appendChild(footerLink)
+
     // Customer info form (if enabled)
     let customerForm = null
     let sessionId = null
     let customerInfoSubmitted = false
+    let firstMessageReceived = false
+    let conversationStarted = false
+    let formShownBeforeConnect = false
+    let pendingCustomerName = null
+    let pendingCustomerPhone = null
+    let unreadCount = 0
 
     if (captureCustomerInfo) {
       customerForm = document.createElement('div')
@@ -243,7 +322,9 @@
       skipBtn.className = 'skip-btn'
       skipBtn.textContent = 'Skip'
       formActions.appendChild(submitBtn)
-      formActions.appendChild(skipBtn)
+      if (allowSkipCustomerInfo) {
+        formActions.appendChild(skipBtn)
+      }
       
       customerForm.appendChild(formTitle)
       customerForm.appendChild(formDesc)
@@ -251,7 +332,7 @@
       customerForm.appendChild(phoneField)
       customerForm.appendChild(formActions)
       
-      async function submitCustomerInfo() {
+      function submitCustomerInfo() {
         const name = nameInput.value.trim()
         const phone = phoneInput.value.trim()
         
@@ -260,51 +341,54 @@
           return
         }
         
+        // Form shown before connect: save and connect; customer_info sent in connection_established
+        if (formShownBeforeConnect) {
+          pendingCustomerName = name
+          pendingCustomerPhone = phone
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'none'
+          connect()
+          return
+        }
+        
         if (!sessionId) {
           console.error('[AgentChatWidget] No session ID available')
+          alert('Session not established. Please wait for connection.')
           return
         }
         
-        const baseUrl = voiceServiceUrl || apiBaseUrl || new URL(document.currentScript?.src || window.location.href).origin
-        let apiBase = (baseUrl || '').replace(/\/$/, '')
-        // Convert ws:// to http:// for HTTP requests
-        if (apiBase.startsWith('ws://')) {
-          apiBase = apiBase.replace(/^ws/, 'http')
-        } else if (apiBase.startsWith('wss://')) {
-          apiBase = apiBase.replace(/^wss/, 'https')
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+          alert('WebSocket not connected. Please wait for connection.')
+          return
         }
-        const endpoint = `${apiBase}/api/v1/agents/text-chat/customer-info`
         
         try {
-          const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              session_id: sessionId,
-              phone_number: phone,
-              customer_name: name,
-            }),
-          })
-          
-          if (response.ok) {
-            customerInfoSubmitted = true
-            customerForm.style.display = 'none'
-            messages.style.display = 'flex'
-            inputWrap.style.display = 'flex'
-          } else {
-            const errorText = await response.text()
-            console.error('[AgentChatWidget] Failed to submit customer info:', errorText)
-            alert('Failed to submit information. Please try again.')
-          }
+          ws.send(JSON.stringify({
+            type: 'customer_info',
+            session_id: sessionId,
+            phone_number: phone,
+            customer_name: name,
+            embed_key: embedKey
+          }))
+          customerInfoSubmitted = true
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'flex'
         } catch (error) {
-          console.error('[AgentChatWidget] Error submitting customer info:', error)
+          console.error('[AgentChatWidget] Error sending customer info:', error)
           alert('Error submitting information. Please try again.')
         }
       }
       
       function skipCustomerInfo() {
+        if (formShownBeforeConnect) {
+          customerForm.style.display = 'none'
+          messages.style.display = 'flex'
+          inputWrap.style.display = 'none'
+          connect()
+          return
+        }
         customerInfoSubmitted = true
         customerForm.style.display = 'none'
         messages.style.display = 'flex'
@@ -312,7 +396,7 @@
       }
       
       submitBtn.onclick = submitCustomerInfo
-      skipBtn.onclick = skipCustomerInfo
+      if (allowSkipCustomerInfo) skipBtn.onclick = skipCustomerInfo
       
       // Allow Enter key to submit
       nameInput.addEventListener('keydown', (e) => {
@@ -333,18 +417,59 @@
 
     panel.appendChild(header)
     panel.appendChild(statusEl)
+    panel.appendChild(startCtaEl)
     panel.appendChild(messages)
     panel.appendChild(inputWrap)
+    panel.appendChild(footerEl)
     shadow.appendChild(panel)
     shadow.appendChild(launcher)
     document.body.appendChild(container)
 
+    // Initial state: show start CTA, hide messages and input until user starts conversation
+    messages.style.display = 'none'
+    inputWrap.style.display = 'none'
+
+    function showStartCta() {
+      startCtaEl.style.display = 'flex'
+      messages.style.display = 'none'
+      inputWrap.style.display = 'none'
+      footerEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'none'
+    }
+    function showFormOnly() {
+      startCtaEl.style.display = 'none'
+      messages.style.display = 'none'
+      inputWrap.style.display = 'none'
+      footerEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'flex'
+    }
+    function showChat() {
+      startCtaEl.style.display = 'none'
+      if (customerForm) customerForm.style.display = 'none'
+      messages.style.display = 'flex'
+      inputWrap.style.display = 'flex'
+      footerEl.style.display = 'block'
+    }
+
+    function updateUnreadBadge() {
+      unreadBadge.textContent = String(unreadCount)
+      if (unreadCount > 0) {
+        unreadBadge.classList.remove('hidden')
+      } else {
+        unreadBadge.classList.add('hidden')
+      }
+    }
+
     function appendMessage(text, role) {
       const msg = document.createElement('div')
       msg.className = 'acw-msg ' + (role === 'user' ? 'acw-msg-user' : 'acw-msg-bot')
       msg.textContent = text
       messages.appendChild(msg)
       messages.scrollTop = messages.scrollHeight
+      if (role === 'bot' && panel.style.display !== 'flex') {
+        unreadCount++
+        updateUnreadBadge()
+      }
     }
 
     // No default greeting; only show messages after connection
@@ -391,25 +516,34 @@
       console.info('[AgentChatWidget] Resolved WS URL:', resolvedWsUrl)
     } catch (_) {}
 
+    function setInputEnabled(enabled) {
+      input.disabled = !enabled
+      sendBtn.disabled = !enabled
+      input.placeholder = enabled ? 'Type a message...' : 'Connect to start chatting'
+    }
+
     function updateStatus(text, isConnected) {
       statusText.textContent = text
       statusDot.classList.remove('connected', 'disconnected')
       statusDot.classList.add(isConnected ? 'connected' : 'disconnected')
-
-      // Update button text and handler based on connection status
-      disconnectBtn.textContent = isConnected ? 'Disconnect' : 'Connect'
-      disconnectBtn.onclick = isConnected ? disconnect : connect
+      setInputEnabled(isConnected)
     }
 
     function connect() {
       if (connected || connecting) return
       connecting = true
+      firstMessageReceived = false
+      startCtaEl.style.display = 'none'
+      // Show chat UI immediately so the panel is not empty while connecting
+      showChat()
+      setInputEnabled(false)
       const url = resolvedWsUrl
       try {
         ws = new WebSocket(url)
       } catch (err) {
         connecting = false
-        updateStatus('Connection error', false)
+        updateStatus('Disconnected', false)
+        appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
         console.error('[AgentChatWidget] WS error', err)
         return
       }
@@ -418,49 +552,93 @@
         connected = true
         connecting = false
         updateStatus('Connected', true)
-        
-        // Generate session ID when websocket connects
-        sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
-        
-        // Show customer info form if enabled and not yet submitted
-        if (captureCustomerInfo && customerForm && !customerInfoSubmitted) {
-          customerForm.style.display = 'flex'
-          messages.style.display = 'none'
-          inputWrap.style.display = 'none'
-          // Focus first input
-          const nameInput = customerForm.querySelector('#acw-customer-name')
-          if (nameInput) setTimeout(() => nameInput.focus(), 100)
-        } else {
-          messages.style.display = 'flex'
-          inputWrap.style.display = 'flex'
-        }
+        // If captureCustomerInfo, connection_established will show form or chat
+        if (!captureCustomerInfo) showChat()
       }
 
       ws.onmessage = (event) => {
         try {
           const data = JSON.parse(event.data)
+          
+          // Handle connection_established message
+          if (data.type === 'connection_established') {
+            if (data.session_id) sessionId = data.session_id
+            
+            // Form was shown before connect (Start Conversation → form → submit/skip): send customer_info if pending, then show chat
+            if (formShownBeforeConnect) {
+              if (pendingCustomerName && pendingCustomerPhone && ws && ws.readyState === WebSocket.OPEN) {
+                try {
+                  ws.send(JSON.stringify({
+                    type: 'customer_info',
+                    session_id: sessionId,
+                    phone_number: pendingCustomerPhone,
+                    customer_name: pendingCustomerName,
+                    embed_key: embedKey
+                  }))
+                } catch (e) {
+                  console.error('[AgentChatWidget] Error sending customer info:', e)
+                }
+              }
+              pendingCustomerName = null
+              pendingCustomerPhone = null
+              customerInfoSubmitted = true
+              if (data.welcome_message) appendMessage(data.welcome_message, 'bot')
+              showChat()
+              return
+            }
+            
+            // Display welcome message if provided
+            if (data.welcome_message) {
+              appendMessage(data.welcome_message, 'bot')
+              if (!firstMessageReceived && captureCustomerInfo && customerForm && !customerInfoSubmitted) {
+                firstMessageReceived = true
+                setTimeout(() => {
+                  showFormOnly()
+                  const nameInput = customerForm.querySelector('#acw-customer-name')
+                  if (nameInput) setTimeout(() => nameInput.focus(), 100)
+                }, 300)
+              }
+            } else {
+              if (!firstMessageReceived && captureCustomerInfo && customerForm && !customerInfoSubmitted) {
+                firstMessageReceived = true
+                setTimeout(() => {
+                  showFormOnly()
+                  const nameInput = customerForm.querySelector('#acw-customer-name')
+                  if (nameInput) setTimeout(() => nameInput.focus(), 100)
+                }, 100)
+              }
+            }
+            if (captureCustomerInfo && !customerInfoSubmitted && customerForm) return
+            showChat()
+            return
+          }
+          
+          // Handle regular chat messages
           const text = data.text || data.content || data.message || ''
           const role = data.role || 'assistant'
-          if (text) appendMessage(text, role === 'user' ? 'user' : 'bot')
+          if (text) {
+            appendMessage(text, role === 'user' ? 'user' : 'bot')
+          }
         } catch (e) {
           // Fallback to raw text
-          if (event.data) appendMessage(String(event.data), 'bot')
+          if (event.data) {
+            appendMessage(String(event.data), 'bot')
+          }
         }
       }
 
       ws.onerror = (e) => {
         console.error('[AgentChatWidget] WS error', e)
-        updateStatus('Connection error', false)
-        appendMessage('Connection error. Check WS service and URL.', 'bot')
+        updateStatus('Disconnected', false)
+        appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
       }
 
       ws.onclose = (ev) => {
         connected = false
         connecting = false
-        const reason = ev && (ev.reason || ev.code)
         updateStatus('Disconnected', false)
         if (!ev.wasClean) {
-          appendMessage(`Connection closed (${reason || 'unclean'})`, 'bot')
+          appendMessage('Failed to connect. Please try again or check your connection.', 'bot')
         }
       }
     }
@@ -475,6 +653,11 @@
       updateStatus('Disconnected', false)
       sessionId = null
       customerInfoSubmitted = false
+      firstMessageReceived = false
+      conversationStarted = false
+      formShownBeforeConnect = false
+      pendingCustomerName = null
+      pendingCustomerPhone = null
       if (customerForm) {
         customerForm.style.display = 'none'
         const nameInput = customerForm.querySelector('#acw-customer-name')
@@ -482,6 +665,7 @@
         if (nameInput) nameInput.value = ''
         if (phoneInput) phoneInput.value = ''
       }
+      showStartCta()
     }
 
     function sendMessage() {
@@ -494,8 +678,11 @@
       }
       
       if (!ws || ws.readyState !== WebSocket.OPEN) {
-        connect()
-        setTimeout(sendMessage, 200)
+        if (connecting) {
+          appendMessage('Connecting... Please wait.', 'bot')
+        } else {
+          appendMessage('Please click "Click to Start Conversation" to start chatting.', 'bot')
+        }
         return
       }
       appendMessage(text, 'user')
@@ -503,6 +690,19 @@
       input.value = ''
     }
 
+    startConversationBtn.onclick = () => {
+      conversationStarted = true
+      startCtaEl.style.display = 'none'
+      if (captureCustomerInfo && customerForm) {
+        formShownBeforeConnect = true
+        showFormOnly()
+        const nameInput = customerForm.querySelector('#acw-customer-name')
+        if (nameInput) setTimeout(() => nameInput.focus(), 100)
+      } else {
+        connect()
+      }
+    }
+
     launcher.onclick = () => {
       const isOpen = panel.style.display === 'flex'
       if (isOpen) {
@@ -510,7 +710,9 @@
         disconnect()
       } else {
         panel.style.display = 'flex'
-        connect()
+        unreadCount = 0
+        updateUnreadBadge()
+        if (!connected && !connecting && !conversationStarted) showStartCta()
       }
     }
 
@@ -539,7 +741,7 @@
       },
       open() {
         panel.style.display = 'flex'
-        connect()
+        // Connection only via explicit Connect button
       },
       close() {
         panel.style.display = 'none'
@@ -555,9 +757,14 @@
     const captureCustomerInfo = userConfig.captureCustomerInfo !== undefined 
       ? userConfig.captureCustomerInfo 
       : ds.captureCustomerInfo === 'true' || ds.capture_customer_info === 'true'
+    const allowSkipCustomerInfo = userConfig.allowSkipCustomerInfo !== undefined 
+      ? userConfig.allowSkipCustomerInfo 
+      : ds.allowSkipCustomerInfo !== 'false' && ds.allow_skip_customer_info !== 'false'
     const position = userConfig.position || ds.position || ds.launcherPosition || 'bottom-right'
     const validPositions = ['bottom-right', 'middle-right', 'top-right', 'bottom-left', 'middle-left', 'top-left']
     const validPosition = validPositions.includes(position) ? position : 'bottom-right'
+    const showIcon = userConfig.showIcon !== undefined ? userConfig.showIcon : ds.showIcon !== 'false' && ds.show_icon !== 'false'
+    const launcherText = userConfig.launcherText ?? userConfig.launcher_text ?? ds.launcherText ?? ds.launcher_text ?? 'Chat'
     return {
       agentId: userConfig.agentId || ds.agentId,
       embedKey: userConfig.embedKey || ds.embedKey || ds.embed_key,
@@ -570,7 +777,11 @@
       title: userConfig.title || ds.title,
       greeting: userConfig.greeting || ds.greeting,
       captureCustomerInfo: captureCustomerInfo,
+      allowSkipCustomerInfo: allowSkipCustomerInfo,
       position: validPosition,
+      iconUrl: userConfig.iconUrl || userConfig.icon_url || ds.iconUrl || ds.icon_url,
+      showIcon: showIcon,
+      launcherText: launcherText,
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helllo-ai/agent-chat-widget",
-  "version": "0.1.17",
+  "version": "0.1.21",
   "description": "Bot Swarm Agent Chat Widget - Embeddable chat widget for AI agents",
   "main": "agent-chat.latest.js",
   "files": [