@developer.notchatbot/webchat 1.2.9 → 1.2.11

package/README.md

@@ -1,23 +1,4 @@
-# 🔷 WebChat Widget
-
-A beautiful, embeddable chatbot widget built with **React**, **TypeScript**, **Vite**, **pnpm**, and **Tailwind CSS** that can be easily integrated into any website with **just one file**.
-
-## ✨ Features
-
-- **📦 Single File Bundle**: Everything in one file - no separate CSS needed!
-- **🔷 TypeScript**: Full type safety with strict typing and excellent IntelliSense
-- **⚛️ React 18**: Component-based architecture for maintainability
-- **🎨 Tailwind CSS**: Utility-first styling with prefixed classes (`ncb-`)
-- **⚡ Vite**: Lightning-fast development and optimized builds
-- **📦 pnpm**: Efficient package management and faster installs
-- **🔧 Easy Integration**: Add to any website with just one script tag
-- **🎨 Modern Design**: Beautiful, responsive UI that works on all devices
-- **🛠️ Customizable**: Configure colors, text, and behavior to match your brand
-- **✨ Smooth Animations**: Typing indicators and smooth transitions
-- **📱 Mobile Responsive**: Optimized for mobile and desktop
-- **🔌 API Ready**: Built-in support for chat API integration
-- **🚫 Zero Conflicts**: Prefixed CSS classes prevent style conflicts
-- **🛡️ Type Safe**: Catch errors at compile time with TypeScript
+# 🔷 WebChat - Embedded Chat
 
 ## 📦 Quick Start
 
@@ -337,6 +318,64 @@ window.mountEmbedChat('embed-small');   // Remounts the chat in the same element
 
 ---
 
+### Listen to lifecycle & message events (🆕)
+
+We emit **custom browser events** so you can capture interactions and feed them into Google Tag Manager, Google Analytics, Meta Pixel, or any other analytics tool.
+
+| Widget | Event name | Fired when | `detail` payload |
+|--------|------------|------------|------------------|
+| WebChat | `notchatbot-webchat-open` | The floating chat is opened | `{ conversationId }` |
+| WebChat | `notchatbot-webchat-closed` | The floating chat is closed | `{ conversationId }` |
+| WebChat | `notchatbot-webchat-message-sent` | The user sends one or more messages | `{ messages: Message[] }` |
+| WebChat | `notchatbot-webchat-message-received` | A message is received from the server | `{ message: Message, role: 'assistant' \| 'employee' }` |
+| EmbedChat | `notchatbot-embedchat-message-sent` | The user sends a message | `{ message: Message }` |
+| EmbedChat | `notchatbot-embedchat-message-received` | A message is received | `{ message: Message, role: 'assistant' \| 'employee' }` |
+
+`Message` follows the same interface used internally by the widget (id, text, sender, timestamp, etc.).
+
+#### Quick example
+```js
+window.addEventListener('notchatbot-webchat-open',  e => console.log('WebChat opened', e.detail));
+window.addEventListener('notchatbot-webchat-closed',  e => console.log('WebChat closed', e.detail));
+window.addEventListener('notchatbot-webchat-message-sent', e => console.log('Sent', e.detail.messages));
+window.addEventListener('notchatbot-webchat-message-received', e => {
+  const { role, message } = e.detail;
+  console.log('Received', role, message);
+});
+```
+
+#### Google Tag Manager / Google Analytics (GA4)
+Push data directly to the **dataLayer** and create a trigger in GTM:
+```js
+window.addEventListener('notchatbot-webchat-message-sent', e => {
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    event: 'webchat_message_sent',
+    messages: e.detail.messages,
+    conversationId: e.detail.messages[0]?.conversationId || null
+  });
+});
+```
+Then in GTM, add a **Custom Event** trigger called `webchat_message_sent` and link it to a GA4 event tag.
+
+#### Meta / Facebook Pixel
+```js
+window.addEventListener('notchatbot-webchat-open', () => {
+  if (window.fbq) {
+    fbq('trackCustom', 'WebChatOpened');
+  }
+});
+
+window.addEventListener('notchatbot-webchat-message-received', e => {
+  if (window.fbq) {
+    fbq('trackCustom', 'WebChatMessageReceived', {
+      role: e.detail.role
+    });
+  }
+});
+```
+These events make it easy to measure engagement and conversions driven by the chat widget without modifying its source code.
+
 ### Change position and padding dynamically (WebChat)
 
 #### 1. Change position and margin globally (flat)