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

wizzard

Browse Source
This commit is contained in:
Oliver
2025-07-28 07:50:15 -03:00
parent 7695e30d59
commit 8d7cc60518
2 changed files with 53 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/index.html
View File

@@ -157,31 +157,40 @@
<h3>3 Hours</h3>
<p>Quick fixes and small automation improvements.</p>
<span class="price">$450</span>
<a href="#" class="btn-secondary" id="buy-3h">Choose Plan</a>
<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
Choose Plan
</button>
</div>
<div class="package featured">
<h3>5 Hours</h3>
<p>Ideal for mid-level integrations and custom workflows.</p>
<span class="price">$675</span>
<a href="#" class="btn-secondary" id="buy-5h">Choose Plan</a>
<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
Choose Plan
</button>
</div>
<div class="package">
<h3>10 Hours</h3>
<p>Perfect for large projects and advanced automation.</p>
<span class="price">$1.200</span>
<a href="#" class="btn-secondary" id="buy-10h">Choose Plan</a>
<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
Choose Plan
</button>
</div>
<div class="package">
<h3>ODOO & N8N Bundle</h3>
<p>Perfect for taking conrtol over your company automation installation.</p>
<span class="price">$395 per Year</span>
<a href="#" class="btn-secondary" id="buy-bundle">Choose Plan</a>
<h3>N8N Installation and Maintainance</h3>
<p>We install N8N on your Container and maintain it for one year.</p>
<span class="price">$75 per Year</span>
<button class="btn-secondary" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
Choose Plan
</button>
</div>

94
public/widget/widget.js
View File

@@ -1,11 +1,10 @@
document.addEventListener('DOMContentLoaded', async () => {
try {
let id = window.location.hostname || "localhost";
const id = window.location.hostname || "localhost";
console.log("Detected domain ID:", id);
const configUrl = `http://localhost:8000/widget/custom/${id}.json`;
console.log(configUrl)
console.log(configUrl);
const response = await fetch(configUrl);
if (!response.ok) throw new Error(`Config not found at ${configUrl}`);
@@ -17,10 +16,10 @@ document.addEventListener('DOMContentLoaded', async () => {
return;
}
// Step 3: Inject HTML into page
// Inject HTML
document.body.insertAdjacentHTML('beforeend', widgetHTML);
// Step 4: Select DOM elements
// DOM references
const chatToggle = document.getElementById('cw-chatToggle');
const chatWidget = document.getElementById('cw-chatWidget');
const chatForm = document.getElementById('cw-chatForm');
@@ -31,7 +30,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const sessionId = crypto.randomUUID();
let chatOpened = false;
// Step 5: Utility to append message
// Append a message to the chat
function appendMessage(text, sender) {
const msg = document.createElement('div');
msg.classList.add('cw-message', sender === 'user' ? 'user' : 'bot');
@@ -40,24 +39,11 @@ document.addEventListener('DOMContentLoaded', async () => {
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Step 6: Toggle chat visibility
chatToggle.addEventListener('click', () => {
const isVisible = chatWidget.style.display === 'block';
chatWidget.style.display = isVisible ? 'none' : 'block';
if (!isVisible && !chatOpened) {
appendMessage(preamble, 'bot');
chatOpened = true;
}
});
// Step 7: Handle form submission
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const input = chatInput.value.trim();
if (!input) return;
appendMessage(input, 'user');
// Centralized function to send a message
async function sendMessageToBot(messageText) {
console.log(messageText)
chatWidget.style.display = 'block';
appendMessage(messageText, 'user');
chatInput.value = '';
chatInput.focus();
@@ -68,10 +54,10 @@ document.addEventListener('DOMContentLoaded', async () => {
body: JSON.stringify({
action: 'sendMessage',
sessionId,
chatInput: input
chatInput: messageText
})
});
console.log(res)
const data = await res.json();
if (data.status) {
@@ -90,52 +76,34 @@ document.addEventListener('DOMContentLoaded', async () => {
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;
window.sendMessageToBot = sendMessageToBot;
// Toggle chat widget
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) {
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);
});
});
}
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.');
// Form submission
chatForm.addEventListener('submit', (e) => {
e.preventDefault();
const input = chatInput.value.trim();
if (input) {
sendMessageToBot(input);
}
});
// Attach buy button listeners
} catch (err) {
console.error('Failed to initialize chat widget:', err);
}
});