@developer.notchatbot/webchat 1.4.5 → 1.4.6

package/README.md

@@ -38,6 +38,12 @@ interface WebChatConfig {
   marginSide?: number;                  // Distance from left/right edge in pixels (default: 16)
   mobile?: WebChatPositionConfig;       // Mobile-specific position settings
   desktop?: WebChatPositionConfig;      // Desktop-specific position settings
+  whatsapp?: {                          // Integrated WhatsApp Options
+    phoneNumber: string;                // WhatsApp phone number
+    message?: string;                   // Optional default message text
+    active?: boolean;                   // Enable or disable the button (default: true)
+    color?: string;                     // Customize the internal WhatsApp button color
+  };
 }
 
 interface WebChatPositionConfig {
@@ -69,10 +75,51 @@ WebChat.initialize({
         position: "bottom-right", 
         marginBottom: 30,
         marginSide: 30
+    },
+    whatsapp: {                        // Adds a dual-button menu for WhatsApp & WebChat
+        phoneNumber: "YOUR_PHONE_NUMBER",
+        message: "Hello! I need help...",
+        active: true,
+        color: "#25D366"
     }
 });
 ```
 
+# 💬 WhatsApp Button
+
+If you simply want a floating WhatsApp action button with no WebChat, you can use `WhatsAppButtonAPI`, which isolates itself in the Shadow DOM to avoid CSS conflicts.
+
+## 📦 Installation and Basic Usage
+
+```html
+<!-- Load the script -->
+<script src="path/to/webchat.js"></script>
+<script>
+  WhatsAppButtonAPI.initialize({
+    phoneNumber: "1234567890",
+    message: "Hola, me gustaría tener más información.",
+    color: "#25D366",
+    position: "bottom-right",
+    marginBottom: 20,
+    marginSide: 20,
+    active: true,
+    size: 48, // Button dimension in px
+    
+    // Customize device-specific positioning
+    desktop: {
+      position: "bottom-right",
+      marginBottom: 30,
+      marginSide: 30
+    },
+    mobile: {
+      position: "bottom-right",
+      marginBottom: 80,
+      marginSide: 15
+    }
+  });
+</script>
+```
+
 # 💬 EmbedChat - Embedded Chat
 
 EmbedChat allows you to integrate a complete chat system directly into any element of your web page, with full control over size, position, and style.
@@ -316,6 +363,17 @@ window.unmountEmbedChat('embed-small'); // Unmounts the chat from the element wi
 window.mountEmbedChat('embed-small');   // Remounts the chat in the same element with the last config
 ```
 
+### WhatsApp Global Methods
+
+You can programatically show, hide, or destroy the standalone WhatsApp button from the Global window object.
+
+```js
+window.WhatsAppButton.initialize(config); // Initializes the standalone widget
+window.hideWhatsApp();                    // Hides WhatsApp button (display: none)
+window.showWhatsApp();                    // Unhides it
+window.unmountWhatsApp();                 // Removes from DOM entirely
+```
+
 ---
 
 ### Listen to lifecycle & message events (🆕)

package/dist/components/whatsapp/WhatsAppButton.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface WhatsAppButtonProps {
+    phoneNumber: string;
+    color?: string;
+    position?: 'bottom-right' | 'bottom-left';
+    marginBottom?: number;
+    marginSide?: number;
+    size?: number;
+    message?: string;
+}
+declare const WhatsAppButton: React.FC<WhatsAppButtonProps>;
+export default WhatsAppButton;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { WebChatAPI, EmbedChatAPI } from './types';
+import { WebChatAPI, EmbedChatAPI, WhatsAppAPI } from './types';
 declare const WebChat: WebChatAPI;
 declare const EmbedChatAPI: EmbedChatAPI;
-export { WebChat, EmbedChatAPI };
+declare const WhatsAppButtonAPI: WhatsAppAPI;
+export { WebChat, EmbedChatAPI, WhatsAppButtonAPI };

package/dist/types.d.ts

@@ -22,6 +22,9 @@ export interface WebChatConfig {
     note?: string;
     mobile?: WebChatPositionConfig;
     desktop?: WebChatPositionConfig;
+    whatsapp?: Omit<WhatsAppConfig, 'position' | 'marginBottom' | 'marginSide' | 'mobile' | 'desktop'> & {
+        active?: boolean;
+    };
 }
 export interface EmbedChatInputConfig {
     backgroundColor?: string;
@@ -111,6 +114,8 @@ export interface ChatButtonProps {
     marginSide?: number;
     hasNewMessages?: boolean;
     isMobile?: boolean;
+    isMenuOpen?: boolean;
+    hasWhatsAppMenu?: boolean;
 }
 export interface ChatWindowProps {
     isOpen: boolean;
@@ -192,3 +197,29 @@ export interface WebChatAPI {
 export interface EmbedChatAPI {
     initialize: (config: EmbedChatConfig) => EmbedChatInstance | null;
 }
+export interface WhatsAppPositionConfig {
+    position?: 'bottom-right' | 'bottom-left';
+    marginBottom?: number;
+    marginSide?: number;
+}
+export interface WhatsAppConfig {
+    phoneNumber: string;
+    active?: boolean;
+    color?: string;
+    position?: 'bottom-right' | 'bottom-left';
+    marginBottom?: number;
+    marginSide?: number;
+    size?: number;
+    message?: string;
+    mobile?: WhatsAppPositionConfig;
+    desktop?: WhatsAppPositionConfig;
+}
+export interface WhatsAppInstance {
+    destroy: () => void;
+    hide: () => void;
+    show: () => void;
+    updateConfig: (newConfig: Partial<WhatsAppConfig>) => void;
+}
+export interface WhatsAppAPI {
+    initialize: (config: WhatsAppConfig) => WhatsAppInstance | null;
+}