Oliver/od8n_homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working

Browse Source
This commit is contained in:
Oliver
2025-07-28 07:22:36 -03:00
parent abe9ae4712
commit 7695e30d59
8 changed files with 325 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
public/widget/widget.js
View File

@@ -1,150 +1,141 @@
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>
document.addEventListener('DOMContentLoaded', async () => {
try {
let id = window.location.hostname || "localhost";
console.log("Detected domain ID:", id);
<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);
const configUrl = `http://localhost:8000/widget/custom/${id}.json`;
console.log(configUrl)
const response = await fetch(configUrl);
if (!response.ok) throw new Error(`Config not found at ${configUrl}`);
// 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.
const config = await response.json();
const { widgetHTML, preamble, api } = config;
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;
if (!widgetHTML || !api) {
console.error('Invalid config format. Expected widgetHTML and api.');
return;
}
});
// 6. Handle chat message submission
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const input = chatInput.value.trim();
if (!input) return;
// Step 3: Inject HTML into page
document.body.insertAdjacentHTML('beforeend', widgetHTML);
appendMessage(input, 'user');
chatInput.value = '';
chatInput.focus();
// Step 4: 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');
try {
const response = await fetch(api, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
action: 'sendMessage',
sessionId,
chatInput: input
})
});
const sessionId = crypto.randomUUID();
let chatOpened = false;
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);
// Step 5: Utility to append message
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;
}
});
// 7. Handle buy button clicks
function handleBuyClick(buttonId, message) {
const btn = document.getElementById(buttonId);
if (!btn) return;
// Step 6: Toggle chat visibility
chatToggle.addEventListener('click', () => {
const isVisible = chatWidget.style.display === 'block';
chatWidget.style.display = isVisible ? 'none' : 'block';
btn.addEventListener('click', (e) => {
e.preventDefault();
if (chatWidget.style.display !== 'block') {
chatWidget.style.display = 'block';
if (!chatOpened) {
appendMessage(preamble, 'bot');
chatOpened = true;
}
if (!isVisible && !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.');
// 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();
try {
const res = await fetch(api, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
action: 'sendMessage',
sessionId,
chatInput: input
})
});
console.log(res)
const data = await res.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);
}
});
// 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.');
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.');
} catch (err) {
console.error('Failed to initialize chat widget:', err);
}
});