od8n_homepage/public/widget/widget.js

document.addEventListener('DOMContentLoaded', () => {
  // 1. Inject the widget HTML into the page
  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" style="display: none;">
      <div class="logo-container">
        <img src="logo.svg" alt="Logo" />
      </div>
      <div class="header">Kundenservice</div>
      <div id="cw-status" style="transition: all 0.3s ease; overflow: hidden;"></div>
      <div id="cw-chatMessages" style="max-height: 200px; overflow-y: auto; padding: 10px;"></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);

  // 2. Define variables and constants
  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 api = 'https://ai.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat';
  const sessionId = crypto.randomUUID();
  let chatOpened = false;

  // 3. Select DOM 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 statusDiv = document.getElementById('cw-status');

  // 4. Append a message to the chat
  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;
  }

  // 5. Toggle the chat widget
  chatToggle.addEventListener('click', () => {
    const isVisible = chatWidget.style.display === 'block';
    chatWidget.style.display = isVisible ? 'none' : 'block';

    if (!isVisible && !chatOpened) {
      appendMessage(preamble, 'bot');
      chatOpened = true;
    }
  });

  // 6. Handle chat message submission
  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
        })
      });

      console.log(response)

      const data = await response.json();

      if (data.status) {
        statusDiv.innerHTML = data.status;
        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);
    }
  });

  // 7. Handle buy button clicks
  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);
        });
    });
  }

  // 8. Attach handlers to pricing buttons (if they exist in your page)
  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.');
});