wizzard

public/index.html

@@ -157,31 +157,40 @@
         <h3>3 Hours</h3>
         <p>Quick fixes and small automation improvements.</p>
         <span class="price">$450</span>
-        <a href="#" class="btn-secondary" id="buy-3h">Choose Plan</a>
+        <button class="btn-secondary" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
+        Choose Plan
+        </button>
+
       </div>
       <div class="package featured">
         <h3>5 Hours</h3>
         <p>Ideal for mid-level integrations and custom workflows.</p>
         <span class="price">$675</span>
 
-<a href="#" class="btn-secondary" id="buy-5h">Choose Plan</a>
+<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
+    Choose Plan
+  </button>
 
       </div>
       <div class="package">
         <h3>10 Hours</h3>
         <p>Perfect for large projects and advanced automation.</p>
         <span class="price">$1.200</span>
-        <a href="#" class="btn-secondary" id="buy-10h">Choose Plan</a>
+        <button class="btn-secondary" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
+    Choose Plan
+  </button>
       </div>
 
 
 
 
       <div class="package">
-        <h3>ODOO & N8N Bundle</h3>
+        <h3>N8N Installation and Maintainance</h3>
-        <p>Perfect for taking conrtol over your company automation installation.</p>
+        <p>We install N8N on your Container and maintain it for one year.</p>
-        <span class="price">$395 per Year</span>
+        <span class="price">$75 per Year</span>
-        <a href="#" class="btn-secondary" id="buy-bundle">Choose Plan</a>
+        <button class="btn-secondary" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
+    Choose Plan
+  </button>
       </div>
  
 

public/widget/widget.js

@@ -1,11 +1,10 @@
 document.addEventListener('DOMContentLoaded', async () => {
   try {
-    let id = window.location.hostname || "localhost";
+    const id = window.location.hostname || "localhost";
-    console.log("Detected domain ID:", id); 
+    console.log("Detected domain ID:", id);
-  
 
     const configUrl = `http://localhost:8000/widget/custom/${id}.json`;
-    console.log(configUrl)
+    console.log(configUrl);
     const response = await fetch(configUrl);
     if (!response.ok) throw new Error(`Config not found at ${configUrl}`);
 
@@ -17,10 +16,10 @@ document.addEventListener('DOMContentLoaded', async () => {
       return;
     }
 
-    // Step 3: Inject HTML into page
+    // Inject HTML
     document.body.insertAdjacentHTML('beforeend', widgetHTML);
 
-    // Step 4: Select DOM elements
+    // DOM references
     const chatToggle = document.getElementById('cw-chatToggle');
     const chatWidget = document.getElementById('cw-chatWidget');
     const chatForm = document.getElementById('cw-chatForm');
@@ -31,7 +30,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     const sessionId = crypto.randomUUID();
     let chatOpened = false;
 
-    // Step 5: Utility to append message
+    // Append a message to the chat
     function appendMessage(text, sender) {
       const msg = document.createElement('div');
       msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
@@ -40,24 +39,11 @@ document.addEventListener('DOMContentLoaded', async () => {
       chatMessages.scrollTop = chatMessages.scrollHeight;
     }
 
-    // Step 6: Toggle chat visibility
+    // Centralized function to send a message
-    chatToggle.addEventListener('click', () => {
+    async function sendMessageToBot(messageText) {
-      const isVisible = chatWidget.style.display === 'block';
+      console.log(messageText)
-      chatWidget.style.display = isVisible ? 'none' : 'block';
+      chatWidget.style.display = 'block';
-
+      appendMessage(messageText, 'user');
-      if (!isVisible && !chatOpened) {
-        appendMessage(preamble, 'bot');
-        chatOpened = true;
-      }
-    });
-
-    // Step 7: Handle form submission
-    chatForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const input = chatInput.value.trim();
-      if (!input) return;
-
-      appendMessage(input, 'user');
       chatInput.value = '';
       chatInput.focus();
 
@@ -68,10 +54,10 @@ document.addEventListener('DOMContentLoaded', async () => {
           body: JSON.stringify({
             action: 'sendMessage',
             sessionId,
-            chatInput: input
+            chatInput: messageText
           })
         });
- console.log(res)
+
         const data = await res.json();
 
         if (data.status) {
@@ -90,52 +76,34 @@ document.addEventListener('DOMContentLoaded', async () => {
         appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
         console.error(error);
       }
-    });
-
-    // Step 8: Attach pricing buttons if they exist
-    function handleBuyClick(buttonId, message) {
-      const btn = document.getElementById(buttonId);
-      if (!btn) return;
-
-      btn.addEventListener('click', (e) => {
-        e.preventDefault();
-
-        if (chatWidget.style.display !== 'block') {
-          chatWidget.style.display = 'block';
-          if (!chatOpened) {
-            appendMessage(preamble, 'bot');
-            chatOpened = true;
-          }
-        }
-
-        appendMessage(message, 'user');
-
-        fetch(api, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            action: 'sendMessage',
-            sessionId,
-            chatInput: message
-          })
-        })
-          .then(res => res.json())
-          .then(data => {
-            appendMessage(data.output, 'bot');
-          })
-          .catch(err => {
-            appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
-            console.error(err);
-          });
-      });
     }
 
-    handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
+  window.sendMessageToBot = sendMessageToBot;
-    handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
+    // Toggle chat widget
-    handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
+    chatToggle.addEventListener('click', () => {
-    handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
+      const isVisible = chatWidget.style.display === 'block';
+      chatWidget.style.display = isVisible ? 'none' : 'block';
+
+      if (!isVisible && !chatOpened) {
+        appendMessage(preamble, 'bot');
+        chatOpened = true;
+      }
+    });
+
+    // Form submission
+    chatForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const input = chatInput.value.trim();
+      if (input) {
+        sendMessageToBot(input);
+      }
+    });
+
+    // Attach buy button listeners
+
   } catch (err) {
     console.error('Failed to initialize chat widget:', err);
   }
+
 });