od8n_homepage/public/widget/widget.js

(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);

});