diff --git a/public/app.js b/public/app.js
index c747580..71275d2 100644
--- a/public/app.js
+++ b/public/app.js
@@ -32,126 +32,3 @@ if (slides.length > 0) {
   setInterval(nextSlide, 10000);
 }
 
-(function () {
-  const preamble = `
-We use what we preach — this chatbot is powered by our own n8n automation 🤖 to help you quickly find what you need.
-
-Want to talk to a real automation expert? Just buy a service pack 💼 — it includes a 1-hour get-to-know session with our team 👥.
-
-If it’s not the right fit, no worries — we’ll refund you 💸.
-`;
-
-  const logo="logo.svg"
-  const api='https://ai.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat'
-
-  // Elements
-  const chatToggle = document.getElementById('cw-chatToggle');
-  const chatWidget = document.getElementById('cw-chatWidget');
-  const chatForm = document.getElementById('cw-chatForm');
-  const chatInput = document.getElementById('cw-chatInput');
-  const chatMessages = document.getElementById('cw-chatMessages');
-  const sessionId = crypto.randomUUID();
-
-  let chatOpened = false;
-
-  function appendMessage(text, sender) {
-    const msg = document.createElement('div');
-    msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
-    msg.innerHTML = text;
-
-    chatMessages.appendChild(msg);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-  }
-
-  chatToggle.addEventListener('click', () => {
-    const isVisible = chatWidget.classList.toggle('active');
-    if (isVisible && !chatOpened) {
-      appendMessage(
-        preamble,
-        'bot'
-      );
-      chatOpened = true;
-    }
-  });
-
-  chatForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    const input = chatInput.value.trim();
-    if (!input) return;
-    appendMessage(input, 'user');
-    chatInput.value = '';
-    chatInput.focus();
-
-    try {
-      const response = await fetch(api, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: input })
-      });
-
-      const data = await response.json();
-      console.log("12344")
-      const statusDiv = document.getElementById('cw-status');
-console.log("ASS")
-    console.log(data)
-if (data.status) {
-  statusDiv.innerHTML = data.status;
-
-  // Wait one frame to ensure DOM is updated
-  requestAnimationFrame(() => {
-
-    statusDiv.style.padding = '10px';
-    statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
-  });
-} else {
-  statusDiv.style.maxHeight = '0';
-  statusDiv.style.padding = '0 10px';
-}
-
-
-
-      appendMessage(data.output, 'bot');
-    } catch (error) {
-      appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
-      console.error(error);
-    }
-  });
-
-  function handleBuyClick(buttonId, message) {
-    const btn = document.getElementById(buttonId);
-    if (!btn) return;
-
-    btn.addEventListener('click', (e) => {
-      e.preventDefault();
-
-      if (!chatWidget.classList.contains('active')) {
-        chatWidget.classList.add('active');
-        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((response) => response.json())
-        .then((data) => {
-          appendMessage(data.output, 'bot');
-        })
-        .catch((error) => {
-          appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
-          console.error(error);
-        });
-    });
-  }
-
-  handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
-  handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
-  handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
-  handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
-})();
diff --git a/public/button.png b/public/button.png
new file mode 100644
index 0000000..f326413
Binary files /dev/null and b/public/button.png differ
diff --git a/public/index.html b/public/index.html
index 0c2670a..f1f9a62 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,22 +9,9 @@
   <meta name="author" content="OD8N">
   <title>OD8N - Odoo & n8n Automation Experts</title>
   <link rel="stylesheet" href="style.css">
-  <button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
-    <img src="logo.svg" alt="Logo"><span class="text-xs">Agent</span>
-  </button>
 
-  <div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
-    <div class="logo-container">
-      <img src="logo.svg" alt="Logo" />
-    </div>
-    <div class="header">Kundenservice</div>
-    <div id="cw-status"></div>
-    <div id="cw-chatMessages"></div>
-    <form id="cw-chatForm" autocomplete="off">
-      <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
-      <button type="submit">Senden</button>
-    </form>
-  </div>
+  <script src="widget/widget.js"></script>
+
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
diff --git a/public/widget.js b/public/widget.js
new file mode 100644
index 0000000..e480f25
--- /dev/null
+++ b/public/widget.js
@@ -0,0 +1,351 @@
+
+(function () {
+  const preamble = `
+We use what we preach — this chatbot is powered by our own n8n automation 🤖 to help you quickly find what you need.
+
+Want to talk to a real automation expert? Just buy a service pack 💼 — it includes a 1-hour get-to-know session with our team 👥.
+
+If it’s not the right fit, no worries — we’ll refund you 💸.
+`;
+
+  const logo="logo.svg"
+  const api='https://ai.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat'
+
+  // Elements
+  const chatToggle = document.getElementById('cw-chatToggle');
+  const chatWidget = document.getElementById('cw-chatWidget');
+  const chatForm = document.getElementById('cw-chatForm');
+  const chatInput = document.getElementById('cw-chatInput');
+  const chatMessages = document.getElementById('cw-chatMessages');
+  const sessionId = crypto.randomUUID();
+
+  let chatOpened = false;
+
+  function appendMessage(text, sender) {
+    const msg = document.createElement('div');
+    msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
+    msg.innerHTML = text;
+
+    chatMessages.appendChild(msg);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  }
+
+  chatToggle.addEventListener('click', () => {
+    const isVisible = chatWidget.classList.toggle('active');
+    if (isVisible && !chatOpened) {
+      appendMessage(
+        preamble,
+        'bot'
+      );
+      chatOpened = true;
+    }
+  });
+
+  chatForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const input = chatInput.value.trim();
+    if (!input) return;
+    appendMessage(input, 'user');
+    chatInput.value = '';
+    chatInput.focus();
+
+    try {
+      const response = await fetch(api, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: input })
+      });
+
+      const data = await response.json();
+      console.log("12344")
+      const statusDiv = document.getElementById('cw-status');
+console.log("ASS")
+    console.log(data)
+if (data.status) {
+  statusDiv.innerHTML = data.status;
+
+  // Wait one frame to ensure DOM is updated
+  requestAnimationFrame(() => {
+
+    statusDiv.style.padding = '10px';
+    statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
+  });
+} else {
+  statusDiv.style.maxHeight = '0';
+  statusDiv.style.padding = '0 10px';
+}
+
+
+
+      appendMessage(data.output, 'bot');
+    } catch (error) {
+      appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
+      console.error(error);
+    }
+  });
+
+  function handleBuyClick(buttonId, message) {
+    const btn = document.getElementById(buttonId);
+    if (!btn) return;
+
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      if (!chatWidget.classList.contains('active')) {
+        chatWidget.classList.add('active');
+        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((response) => response.json())
+        .then((data) => {
+          appendMessage(data.output, 'bot');
+        })
+        .catch((error) => {
+          appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
+          console.error(error);
+        });
+    });
+  }
+
+  handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
+  handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
+  handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
+  handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
+})();
+
+document.addEventListener('DOMContentLoaded', () => {
+  const widgetHTML = `
+    <button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
+      <img src="logo.svg" alt="Logo"><span class="text-xs">Agent</span>
+    </button>
+
+    <div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
+      <div class="logo-container">
+        <img src="logo.svg" alt="Logo" />
+      </div>
+      <div class="header">Kundenservice</div>
+      <div id="cw-status"></div>
+      <div id="cw-chatMessages"></div>
+      <form id="cw-chatForm" autocomplete="off">
+        <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
+        <button type="submit">Senden</button>
+      </form>
+    </div>
+  `;
+
+  document.body.insertAdjacentHTML('beforeend', widgetHTML);
+
+  const style = document.createElement('style');
+  style.textContent = `
+    /* cw.css */
+
+    /* Container */
+    #cw-chatToggle {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      background-color: #FFA500;
+      color: white;
+      padding: 12px 16px;
+      border-radius: 25px;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      z-index: 100000;
+      border: none;
+      user-select: none;
+      transition: background-color 0.3s ease;
+    }
+    #cw-chatToggle:hover {
+      transform: translateY(-5px);
+    }
+    #cw-chatToggle div {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    #cw-chatToggle img {
+      image-rendering: pixelated;
+      image-rendering: optimizeQuality;
+      image-rendering: -webkit-optimize-contrast; /* Chrome */
+      image-rendering: crisp-edges;              /* Fallback */
+    }
+    #cw-chatToggle span.text-sm {
+      font-weight: 500;
+      font-size: 0.875rem; /* 14px */
+    }
+    #cw-chatToggle span.text-xs {
+      font-size: 0.75rem; /* 12px */
+    }
+
+    /* Chat widget container */
+    #cw-chatWidget {
+      display: none;
+      position: fixed;
+      bottom: 100px;
+      right: 24px;
+      width: 500px;
+      max-height: 70vh;
+      background: white;
+      border: 1px solid #ccc;
+      border-radius: 12px;
+      flex-direction: column;
+      z-index: 100000;
+      font-family: system-ui, sans-serif;
+    }
+    #cw-chatWidget.active {
+      display: flex;
+    }
+
+    /* Logo container */
+    #cw-chatWidget .logo-container {
+      display: flex;
+      justify-content: center;
+      padding-top: 16px;
+      padding-bottom: 10px;
+    }
+    #cw-chatWidget .logo-container img {
+      height: 60px;
+      user-select: none;
+      image-rendering: optimizeQuality;
+      image-rendering: pixelated;
+      image-rendering: -webkit-optimize-contrast; /* Chrome */
+      image-rendering: crisp-edges;              /* Fallback */
+    }
+
+    /* Header */
+    #cw-status {
+      padding: 10px 10px;
+      background-color: #f0f0f0;
+      border-bottom: 1px solid #ddd;
+      max-height: 0;
+      transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+    }
+
+    #cw-chatWidget .header {
+      background-color: #0070c0;
+      color: white;
+      padding: 8px 16px;
+      font-weight: 600;
+      text-align: center;
+      user-select: none;
+    }
+
+    /* Messages container */
+    #cw-chatMessages {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding: 16px;
+      font-size: 0.875rem;
+      line-height: 1.4;
+      user-select: text;
+      scroll-behavior: smooth;
+      background: #fafafa;
+    }
+
+    /* Chat form */
+    #cw-chatForm {
+      display: flex;
+      margin: 0px;
+      border-top: 1px solid #ddd;
+    }
+    #cw-chatInput {
+      flex: 1;
+      border: none;
+      padding: 8px 20px;
+      font-size: 1rem;
+      outline-offset: 2px;
+      border-radius: 0 0 0 12px;
+    }
+    #cw-chatInput:focus {
+      outline: 0px solid #0070c0;
+    }
+    #cw-chatForm button {
+      background-color: #0070c0;
+      border: none;
+      color: white;
+      padding: 0 16px;
+      cursor: pointer;
+      font-weight: 600;
+      border-radius: 0 0 12px 0;
+      transition: background-color 0.3s ease;
+    }
+    #cw-chatForm button:hover {
+      background-color: #005a9e;
+    }
+
+    /* Message bubbles */
+    .cw-message {
+      max-width: 75%;
+      margin-bottom: 8px;
+      padding: 8px 12px;
+      border-radius: 12px;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+    .cw-message.user {
+      background-color: #DCF8C6;
+      color: #333;
+      margin-left: auto;
+      text-align: right;
+    }
+    .cw-message.bot {
+      background-color: #E0E0E0;
+      color: #333;
+      margin-right: auto;
+      text-align: left;
+    }
+
+    .button {
+      display: inline-block;
+      padding: 12px 24px;
+      background-color: #4CAF50; /* Green */
+      color: white;
+      text-align: center;
+      text-decoration: none;
+      border-radius: 8px;
+      font-size: 16px;
+      font-weight: bold;
+      transition: background-color 0.3s ease, box-shadow 0.3s ease;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .button:hover {
+      background-color: #45a049;
+      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+    }
+
+    .button:active {
+      background-color: #3e8e41;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 600px) {
+      #cw-chatWidget {
+        width: 90%;
+        max-height: 60vh;
+        bottom: 80px;
+        right: 5%;
+      }
+      #cw-chatToggle {
+        bottom: 16px;
+        right: 16px;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+});
diff --git a/public/widget/OD8N.css b/public/widget/OD8N.css
new file mode 100644
index 0000000..899cf51
--- /dev/null
+++ b/public/widget/OD8N.css
@@ -0,0 +1,184 @@
+
+/* Container */
+#cw-chatToggle {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background-color: #FFA500;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 25px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  z-index: 100000;
+  border: none;
+  user-select: none;
+  transition: background-color 0.3s ease;
+}
+#cw-chatToggle:hover {
+  transform: translateY(-5px);
+}
+#cw-chatToggle div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#cw-chatToggle img {
+  image-rendering: pixelated;
+  image-rendering: optimizeQuality;
+  image-rendering: -webkit-optimize-contrast; /* Chrome */
+  image-rendering: crisp-edges;              /* Fallback */
+}
+#cw-chatToggle span.text-sm {
+  font-weight: 500;
+  font-size: 0.875rem; /* 14px */
+}
+#cw-chatToggle span.text-xs {
+  font-size: 0.75rem; /* 12px */
+}
+
+/* Chat widget container */
+#cw-chatWidget {
+  display: none;
+  position: fixed;
+  bottom: 100px;
+  right: 24px;
+  width: 500px;
+  max-height: 70vh;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+  flex-direction: column;
+  z-index: 100000;
+  font-family: system-ui, sans-serif;
+}
+#cw-chatWidget.active {
+  display: flex;
+}
+
+/* Logo container */
+#cw-chatWidget .logo-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 16px;
+  padding-bottom: 10px;
+}
+#cw-chatWidget .logo-container img {
+  height: 60px;
+  user-select: none;
+  image-rendering: optimizeQuality;
+  image-rendering: pixelated;
+  image-rendering: -webkit-optimize-contrast; /* Chrome */
+  image-rendering: crisp-edges;              /* Fallback */
+}
+
+/* Header */
+#cw-status {
+  padding: 10px 10px;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #ddd;
+  max-height: 0;
+  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+}
+
+#cw-chatWidget .header {
+  background-color: #0070c0;
+  color: white;
+  padding: 8px 16px;
+  font-weight: 600;
+  text-align: center;
+  user-select: none;
+}
+
+/* Messages container */
+#cw-chatMessages {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 16px;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  user-select: text;
+  scroll-behavior: smooth;
+  background: #fafafa;
+}
+
+/* Chat form */
+#cw-chatForm {
+  display: flex;
+  margin: 0px;
+  border-top: 1px solid #ddd;
+}
+#cw-chatInput {
+  flex: 1;
+  border: none;
+  padding: 8px 20px;
+  font-size: 1rem;
+  outline-offset: 2px;
+  border-radius: 0 0 0 12px;
+}
+#cw-chatInput:focus {
+  outline: 0px solid #0070c0;
+}
+#cw-chatForm button {
+  background-color: #0070c0;
+  border: none;
+  color: white;
+  padding: 0 16px;
+  cursor: pointer;
+  font-weight: 600;
+  border-radius: 0 0 12px 0;
+  transition: background-color 0.3s ease;
+}
+#cw-chatForm button:hover {
+  background-color: #005a9e;
+}
+
+/* Message bubbles */
+.cw-message {
+  max-width: 75%;
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  border-radius: 12px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+.cw-message.user {
+  background-color: #DCF8C6;
+  color: #333;
+  margin-left: auto;
+  text-align: right;
+}
+.cw-message.bot {
+  background-color: #E0E0E0;
+  color: #333;
+  margin-right: auto;
+  text-align: left;
+}
+
+.button {
+  display: inline-block;
+  padding: 12px 24px;
+  background-color: #4CAF50; /* Green */
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.button:hover {
+  background-color: #45a049;
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+}
+
+.button:active {
+  background-color: #3e8e41;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
diff --git a/public/widget/widget.js b/public/widget/widget.js
new file mode 100644
index 0000000..db6eb5f
--- /dev/null
+++ b/public/widget/widget.js
@@ -0,0 +1,169 @@
+
+(function () {
+
+  <button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
+    <img src="logo.svg" alt="Logo"><span class="text-xs">Agent</span>
+  </button>
+
+  <div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
+    <div class="logo-container">
+      <img src="logo.svg" alt="Logo" />
+    </div>
+    <div class="header">Kundenservice</div>
+    <div id="cw-status"></div>
+    <div id="cw-chatMessages"></div>
+    <form id="cw-chatForm" autocomplete="off">
+      <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
+      <button type="submit">Senden</button>
+    </form>
+  </div>
+
+
+
+
+  const preamble = `
+We use what we preach — this chatbot is powered by our own n8n automation 🤖 to help you quickly find what you need.
+
+Want to talk to a real automation expert? Just buy a service pack 💼 — it includes a 1-hour get-to-know session with our team 👥.
+
+If it’s not the right fit, no worries — we’ll refund you 💸.
+`;
+
+  const logo="logo.svg"
+  const api='https://ai.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat'
+
+  // Elements
+  const chatToggle = document.getElementById('cw-chatToggle');
+  const chatWidget = document.getElementById('cw-chatWidget');
+  const chatForm = document.getElementById('cw-chatForm');
+  const chatInput = document.getElementById('cw-chatInput');
+  const chatMessages = document.getElementById('cw-chatMessages');
+  const sessionId = crypto.randomUUID();
+
+  let chatOpened = false;
+
+  function appendMessage(text, sender) {
+    const msg = document.createElement('div');
+    msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
+    msg.innerHTML = text;
+
+    chatMessages.appendChild(msg);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+  }
+
+  chatToggle.addEventListener('click', () => {
+    const isVisible = chatWidget.classList.toggle('active');
+    if (isVisible && !chatOpened) {
+      appendMessage(
+        preamble,
+        'bot'
+      );
+      chatOpened = true;
+    }
+  });
+
+  chatForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const input = chatInput.value.trim();
+    if (!input) return;
+    appendMessage(input, 'user');
+    chatInput.value = '';
+    chatInput.focus();
+
+    try {
+      const response = await fetch(api, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'sendMessage', sessionId, chatInput: input })
+      });
+
+      const data = await response.json();
+      console.log("12344")
+      const statusDiv = document.getElementById('cw-status');
+console.log("ASS")
+    console.log(data)
+if (data.status) {
+  statusDiv.innerHTML = data.status;
+
+  // Wait one frame to ensure DOM is updated
+  requestAnimationFrame(() => {
+
+    statusDiv.style.padding = '10px';
+    statusDiv.style.maxHeight = statusDiv.scrollHeight + 'px';
+  });
+} else {
+  statusDiv.style.maxHeight = '0';
+  statusDiv.style.padding = '0 10px';
+}
+
+
+
+      appendMessage(data.output, 'bot');
+    } catch (error) {
+      appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
+      console.error(error);
+    }
+  });
+
+  function handleBuyClick(buttonId, message) {
+    const btn = document.getElementById(buttonId);
+    if (!btn) return;
+
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      if (!chatWidget.classList.contains('active')) {
+        chatWidget.classList.add('active');
+        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((response) => response.json())
+        .then((data) => {
+          appendMessage(data.output, 'bot');
+        })
+        .catch((error) => {
+          appendMessage('Fehler beim Verbinden mit dem Server. Bitte versuchen Sie es später erneut.', 'bot');
+          console.error(error);
+        });
+    });
+  }
+
+  handleBuyClick('buy-3h', 'I want to buy the 3 Hours pack for $450.');
+  handleBuyClick('buy-5h', 'I want to buy the 5 Hours pack for $675.');
+  handleBuyClick('buy-10h', 'I want to buy the 10 Hours pack for $1200.');
+  handleBuyClick('buy-bundle', 'I want to buy the ODOO and N8N bundle for $395 per year.');
+})();
+
+document.addEventListener('DOMContentLoaded', () => {
+  const widgetHTML = `
+      <button id="cw-chatToggle" aria-label="Toggle chat widget" type="button">
+    <img src="logo.svg" alt="Logo"><span class="text-xs">Agent</span>
+  </button>
+
+  <div id="cw-chatWidget" role="region" aria-live="polite" aria-label="Customer support chat widget">
+    <div class="logo-container">
+      <img src="logo.svg" alt="Logo" />
+    </div>
+    <div class="header">Kundenservice</div>
+    <div id="cw-status"></div>
+    <div id="cw-chatMessages"></div>
+    <form id="cw-chatForm" autocomplete="off">
+      <input type="text" id="cw-chatInput" placeholder="Type your message..." required autocomplete="off" />
+      <button type="submit">Senden</button>
+    </form>
+  </div>
+  `;
+
+  document.body.insertAdjacentHTML('beforeend', widgetHTML);
+
+});