Added Deployment and Readme Changes

asaddon · Nov 2, 2024 · 65f91fb · 65f91fb
1 parent 61d2924
commit 65f91fb
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 30 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -1,17 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Whatsapp Chat box</title>
-  </head>
-  <body background="https://images.unsplash.com/photo-1675004865285-d0afc22903cf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Nzc0NzUxOA&ixlib=rb-4.0.3&q=80&w=1920"></body>
-  <script src="https://imlolman.github.io/js/controller.js"></script>
-  <script src="WhatsappChatBox.min.js"></script>
-  <script>
-    var wachatbox = new WAChatBox({
-      link: "https://wa.me/919999999999",
-    });
-  </script>
-</html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WA Chat Box Example</title>
+</head>
+<body>
+    <script>
+        (function() {
+            let chatBoxInitialized = false;
+
+            function loadChatBoxScript(callback) {
+                const script = document.createElement('script');
+                script.src = "https://cdn.jsdelivr.net/gh/asaddon/WhatsApp@refs/heads/main/dist/WhatsAppChatBox.min.js";
+                script.onload = callback; // Call the callback function once the script is loaded
+                document.head.appendChild(script);
+            }
+
+            function initializeChatBox() {
+                if (!chatBoxInitialized) {
+                    // Initialize the chat box after the script is loaded
+                    const chatBox = new window.WAChatBox({
+                        link: "https://wa.me/123456789",
+                        user: {
+                            name: "My Company",
+                            avatar: "https://randomuser.me/api/portraits/women/66.jpg",
+                            status: "Typically replies within few hours!"
+                        },
+                        chat_name: "Sales", 
+                        text: "Hey There 👋<br>Let's talk to get a Price Quote!",
+                        button_text: "",
+                        tooltipText: "We're on WhatsApp!",
+                        tooltipTimeout: 15000,
+                    });
+
+                    chatBoxInitialized = true; // Set the flag to true after initialization
+                }
+            }
+
+            // Add event listeners for user interactions
+            function onUserInteraction() {  // Corrected function name
+                if (!chatBoxInitialized) {
+                    loadChatBoxScript(initializeChatBox); // Load the script and initialize the chat box
+                }
+            }
+
+            window.addEventListener('scroll', onUserInteraction);
+            window.addEventListener('mousedown', onUserInteraction);
+            window.addEventListener('mousemove', onUserInteraction);
+            window.addEventListener('touchstart', onUserInteraction);
+            window.addEventListener('keydown', onUserInteraction);
+        })(); // Immediately invoke the function
+    </script>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WA Chat Box Example</title>
+</head>
+<body>
+    <script>
+        (function() {
+            let chatBoxInitialized = false;
+
+            function loadChatBoxScript(callback) {
+                const script = document.createElement('script');
+                script.src = "https://cdn.jsdelivr.net/gh/asaddon/WhatsApp@refs/heads/main/dist/WhatsAppChatBox.min.js";
+                script.onload = callback; // Call the callback function once the script is loaded
+                document.head.appendChild(script);
+            }
+
+            function initializeChatBox() {
+                if (!chatBoxInitialized) {
+                    // Initialize the chat box after the script is loaded
+                    const chatBox = new window.WAChatBox({
+                        link: "https://wa.me/123456789",
+                        user: {
+                            name: "My Company",
+                            avatar: "https://randomuser.me/api/portraits/women/66.jpg",
+                            status: "Typically replies within few hours!"
+                        },
+                        chat_name: "Sales", 
+                        text: "Hey There 👋<br>Let's talk to get a Price Quote!",
+                        button_text: "",
+                        tooltipText: "We're on WhatsApp!",
+                        tooltipTimeout: 15000,
+                    });
+
+                    chatBoxInitialized = true; // Set the flag to true after initialization
+                }
+            }
+
+            // Add event listeners for user interactions
+            function onUserInteraction() {  // Corrected function name
+                if (!chatBoxInitialized) {
+                    loadChatBoxScript(initializeChatBox); // Load the script and initialize the chat box
+                }
+            }
+
+            window.addEventListener('scroll', onUserInteraction);
+            window.addEventListener('mousedown', onUserInteraction);
+            window.addEventListener('mousemove', onUserInteraction);
+            window.addEventListener('touchstart', onUserInteraction);
+            window.addEventListener('keydown', onUserInteraction);
+        })(); // Immediately invoke the function
+    </script>
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -1,28 +1,25 @@
 # WhatsApp Chat widget for websites
 
-Demo: https://imlolman.github.io/Whatsapp-Chat-Widget/
-
-
-https://user-images.githubusercontent.com/11874560/222985797-3aeca0e5-c162-4346-967a-ed35be3cdf66.mp4
-
-
 ## Instructions
 
-* Download <a href="https://raw.githubusercontent.com/imlolman/whatsapp-bottom-button/main/dist/WhatsappChatBox.min.js">WhatsappChatBox.min.js</a> from here.<br>
+* Download <a href="https://cdn.jsdelivr.net/gh/asaddon/WhatsApp@refs/heads/main/dist/WhatsAppChatBox.min.js">WhatsappChatBox.min.js</a> from here.<br>
 * Add the file to your header
 ```<script src="WhatsappChatBox.min.js"></script>```
 
 * Initiate with the configuration
 Configure with your settings
 ```javascript
   new WAChatBox({
-    link: "https://wa.me/919999999999",
-    user: {
-      name: "Alice",
-      avatar: "https://randomuser.me/api/portraits/women/66.jpg",
-      status: "Typically replies within an hour",
-    },
-    text: `Hey There 👋<br><br>I'm here to help, so let me know what's up and I'll be happy to find a solution 🤓`,
-    button_text: "Need Help?",
+     link: "https://wa.me/123456789",
+                        user: {
+                            name: "My Company",
+                            avatar: "https://randomuser.me/api/portraits/women/66.jpg",
+                            status: "Typically replies within few hours!"
+                        },
+                        chat_name: "Sales", 
+                        text: "Hey There 👋<br>Let's talk to get a Price Quote!",
+                        button_text: "",
+                        tooltipText: "We're on WhatsApp!",
+                        tooltipTimeout: 15000,
   });
  ```