public
This commit is contained in:
147
public/app.js
Normal file
147
public/app.js
Normal file
@@ -0,0 +1,147 @@
|
||||
// Accordion script
|
||||
const accTitles = document.querySelectorAll('.accordion-title');
|
||||
|
||||
accTitles.forEach(title => {
|
||||
title.addEventListener('click', () => {
|
||||
// Close all other accordions
|
||||
accTitles.forEach(otherTitle => {
|
||||
if (otherTitle !== title) {
|
||||
otherTitle.classList.remove('active');
|
||||
otherTitle.nextElementSibling.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle the clicked one
|
||||
const content = title.nextElementSibling;
|
||||
const isOpen = content.style.display === 'block';
|
||||
title.classList.toggle('active');
|
||||
content.style.display = isOpen ? 'none' : 'block';
|
||||
});
|
||||
});
|
||||
|
||||
// Slider script
|
||||
const slides = document.querySelectorAll('.slide');
|
||||
let currentIndex = 0;
|
||||
|
||||
function nextSlide() {
|
||||
if (slides.length === 0) return;
|
||||
|
||||
slides[currentIndex].classList.remove('active');
|
||||
currentIndex = (currentIndex + 1) % slides.length;
|
||||
slides[currentIndex].classList.add('active');
|
||||
}
|
||||
|
||||
// Initial display
|
||||
if (slides.length > 0) {
|
||||
slides[currentIndex].classList.add('active');
|
||||
// Change slide every 10 seconds
|
||||
setInterval(nextSlide, 10000);
|
||||
}
|
||||
|
||||
// Chat widget script
|
||||
(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('mywidget-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();
|
||||
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();
|
||||
|
||||
// Open chat if not already visible
|
||||
if (!chatWidget.classList.contains('active')) {
|
||||
chatWidget.classList.add('active');
|
||||
if (!chatOpened) {
|
||||
appendMessage(preamble, 'bot');
|
||||
chatOpened = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Send predefined message
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Attach all three buttons
|
||||
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.');
|
||||
})();
|
||||
Reference in New Issue
Block a user