new design
This commit is contained in:
Oliver
109
public/app.js
109
public/app.js
@@ -1,21 +1,82 @@
|
|||||||
|
/**
|
||||||
|
* Function to handle the scroll behavior of the navigation bar
|
||||||
|
*/
|
||||||
|
|
||||||
|
let header = document.querySelector('.navbar-main');
|
||||||
|
let buttonMobile = document.getElementById('Burger-menu');
|
||||||
|
let nav = document.querySelector('nav');
|
||||||
|
let links = document.querySelectorAll('nav ul li a');
|
||||||
|
|
||||||
|
const scrollFunction = () => {
|
||||||
|
if (
|
||||||
|
document.body.scrollTop > 100 ||
|
||||||
|
document.documentElement.scrollTop > 100
|
||||||
|
) {
|
||||||
|
header.classList.add("bg");
|
||||||
|
} else {
|
||||||
|
header.classList.remove("bg");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', scrollFunction);
|
||||||
|
window.addEventListener('load', scrollFunction);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to handle the accordion behavior
|
||||||
|
* for the FAQ section
|
||||||
|
*/
|
||||||
|
|
||||||
const accTitles = document.querySelectorAll('.accordion-title');
|
const accTitles = document.querySelectorAll('.accordion-title');
|
||||||
|
|
||||||
|
function closeAllAccordions(exceptThis = null) {
|
||||||
|
accTitles.forEach(title => {
|
||||||
|
if (title !== exceptThis) {
|
||||||
|
title.classList.remove('active');
|
||||||
|
const content = title.nextElementSibling;
|
||||||
|
content.style.maxHeight = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAccordion(title) {
|
||||||
|
const content = title.nextElementSibling;
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
content.style.maxHeight = content.scrollHeight + 'px';
|
||||||
|
});
|
||||||
|
title.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
accTitles.forEach(title => {
|
accTitles.forEach(title => {
|
||||||
title.addEventListener('click', () => {
|
title.addEventListener('click', () => {
|
||||||
accTitles.forEach(otherTitle => {
|
|
||||||
if (otherTitle !== title) {
|
|
||||||
otherTitle.classList.remove('active');
|
|
||||||
otherTitle.nextElementSibling.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const content = title.nextElementSibling;
|
const content = title.nextElementSibling;
|
||||||
const isOpen = content.style.display === 'block';
|
const isOpen = title.classList.contains('active');
|
||||||
title.classList.toggle('active');
|
|
||||||
content.style.display = isOpen ? 'none' : 'block';
|
if (isOpen) {
|
||||||
|
// Close current
|
||||||
|
title.classList.remove('active');
|
||||||
|
content.style.maxHeight = null;
|
||||||
|
} else {
|
||||||
|
// Close others, open this
|
||||||
|
closeAllAccordions(title);
|
||||||
|
openAccordion(title);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Adjust height on resize (especially for images inside content)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
accTitles.forEach(title => {
|
||||||
|
if (title.classList.contains('active')) {
|
||||||
|
const content = title.nextElementSibling;
|
||||||
|
content.style.maxHeight = content.scrollHeight + 'px';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to handle team section slider
|
||||||
|
*/
|
||||||
|
|
||||||
const slides = document.querySelectorAll('.slide');
|
const slides = document.querySelectorAll('.slide');
|
||||||
let currentIndex = 0;
|
let currentIndex = 0;
|
||||||
|
|
||||||
@@ -32,16 +93,40 @@ if (slides.length > 0) {
|
|||||||
setInterval(nextSlide, 10000);
|
setInterval(nextSlide, 10000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to handle the blog teaser toggle
|
||||||
|
* for showing full content
|
||||||
|
*/
|
||||||
|
|
||||||
function toggleContent(button) {
|
function toggleContent(button) {
|
||||||
const teaser = button.parentElement;
|
const teaser = button.parentElement;
|
||||||
const fullContent = teaser.querySelector('.blog-full-content');
|
const fullContent = teaser.querySelector('.blog-full-content');
|
||||||
if (fullContent.style.display === 'none') {
|
if (fullContent.style.display === 'none') {
|
||||||
fullContent.style.display = 'block';
|
fullContent.style.display = 'block';
|
||||||
button.textContent = 'Read Less';
|
button.innerHTML = 'Read Less <span class="read-less-btn-icon"><i class="fa-solid fa-angle-up"></i></span>';
|
||||||
|
button.classList.add('read-less-btn');
|
||||||
} else {
|
} else {
|
||||||
fullContent.style.display = 'none';
|
fullContent.style.display = 'none';
|
||||||
button.textContent = 'Read More';
|
button.innerHTML = 'Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function to handle the mobile menu toggle
|
||||||
|
*/
|
||||||
|
|
||||||
|
const mobMenu = () => {
|
||||||
|
for (let i = 0; i < links.length; i++) {
|
||||||
|
links[i].addEventListener('click', mobMenu)
|
||||||
|
}
|
||||||
|
if (nav.classList.contains('responsive')) {
|
||||||
|
nav.classList.remove('responsive');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
|
||||||
|
} else {
|
||||||
|
nav.classList.add('responsive');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
buttonMobile.addEventListener('click', mobMenu);
|
||||||
6
public/icons/logo-white.svg
Normal file
6
public/icons/logo-white.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg width="150" height="49" viewBox="0 0 150 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M16.4955 15.3691C7.40148 15.3691 0 22.6877 0 31.6972C0 40.7066 7.40148 48.0252 16.4955 48.0252C25.5894 48.0252 32.9909 40.7066 32.9909 31.6972C32.9909 22.6877 25.5894 15.3691 16.4955 15.3691ZM16.4955 42.7508C10.3318 42.7508 5.30482 37.7792 5.30482 31.6719C5.30482 25.5647 10.3318 20.5931 16.4955 20.5931C22.6591 20.5931 27.6861 25.5647 27.6861 31.6719C27.6861 37.7792 22.6591 42.7508 16.4955 42.7508Z" fill="white"/>
|
||||||
|
<path d="M66.487 0C64.8703 0 63.582 1.28707 63.582 2.90221V20.2397C60.8538 17.817 57.3425 15.8486 53.5281 15.8486C49.158 15.8486 45.192 17.6404 42.3375 20.5678C39.4577 23.47 37.6895 27.5079 37.6895 31.9243C37.6895 36.3659 39.4577 40.3786 42.3375 43.2808C45.2172 46.183 49.158 48 53.5281 48C57.8983 48 61.8643 46.2082 64.7188 43.2808C67.4975 40.4543 69.2405 36.6183 69.3415 32.3533C69.3668 32.2271 69.3668 32.1009 69.3668 31.9748V2.90221C69.3921 1.28707 68.0785 0 66.487 0ZM53.5281 42.5237C47.5918 42.5237 42.9943 38.0568 42.9943 31.9243C42.9943 25.7918 47.5918 21.3249 53.5281 21.3249C59.4645 21.3249 63.8094 25.7918 63.8094 31.9243C63.8094 38.0568 59.4645 42.5237 53.5281 42.5237Z" fill="white"/>
|
||||||
|
<path d="M135.323 15.571C127.088 15.571 120.647 22.6877 120.647 31.7729V44.6183C120.647 46.2334 121.682 47.5205 123.299 47.5205C124.916 47.5205 126.204 46.2334 126.204 44.6183V31.7729C126.204 25.9432 130.347 21.3754 135.323 21.3754C140.249 21.3754 144.367 25.8675 144.443 31.6215L144.417 44.6183C144.417 46.2334 145.706 47.5205 147.322 47.5205C148.939 47.5205 149.975 46.2334 149.975 44.6183V32.2019L150 31.9495V31.7981C150 22.6877 143.533 15.571 135.323 15.571Z" fill="white"/>
|
||||||
|
<path d="M102.055 19.2555C103.596 17.5899 104.53 15.3691 104.53 12.9464C104.53 7.7981 100.337 3.60883 95.1836 3.60883C90.0303 3.60883 85.837 7.7981 85.837 12.9464C85.837 15.3691 86.7717 17.5899 88.3126 19.2555C81.9721 21.5268 77.5261 26.8517 77.5261 33.0347C77.5261 41.2871 85.4581 48 95.2088 48C104.96 48 112.892 41.2871 112.892 33.0347C112.841 26.8517 108.395 21.5268 102.055 19.2555ZM95.1583 8.65614C97.5329 8.65614 99.4527 10.5741 99.4527 12.9464C99.4527 15.3186 97.5329 17.2366 95.1583 17.2366C92.7838 17.2366 90.864 15.3186 90.864 12.9464C90.864 10.5741 92.7838 8.65614 95.1583 8.65614ZM95.1583 41.9937C88.742 41.9937 83.5383 37.9811 83.5383 33.0347C83.5383 28.0883 88.742 23.3186 95.1583 23.3186C101.575 23.3186 106.778 28.0883 106.778 33.0347C106.778 37.9811 101.575 41.9937 95.1583 41.9937Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -140,26 +140,45 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<header class="hero">
|
<header class="hero" id="home">
|
||||||
<div class="hero-content">
|
<div class="navbar-main">
|
||||||
<h1>OD8N - Odoo & n8n Automation Experts</h1>
|
<div class="logo">
|
||||||
|
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||||
|
<img src="./icons/logo-white.svg" alt="OD8N Logo" class="logo-icon">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<button id="Burger-menu">
|
||||||
|
<i class="fa-solid fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#packages">packages</a></li>
|
||||||
|
<li><a href="#team">Team</a></li>
|
||||||
|
<li><a href="#blog">Blog</a></li>
|
||||||
|
<li><a href="#story">Story</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<section class="hero-content">
|
||||||
|
<h1>Odoo & n8n Automation Experts</h1>
|
||||||
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
||||||
<ul class="hero-list">
|
<ul class="hero-list">
|
||||||
<li>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</span></li>
|
||||||
<li>Experts in Odoo and n8n — no outsourcing, no fluff</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Experts in Odoo and n8n — no outsourcing, no fluff</span></li>
|
||||||
<li>Hosting solutions for Odoo & n8n available</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Hosting solutions for Odoo & n8n available</span></li>
|
||||||
<li>Custom development tailored to your workflows</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Custom development tailored to your workflows</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">Explore packages</button>
|
||||||
</div>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Product Packages -->
|
<!-- Product Packages -->
|
||||||
<section id="packages" class="packages">
|
<section id="packages" class="packages">
|
||||||
<h2>Our OD8N Service Packs for Odoo & n8n Automation</h2>
|
<h2 class="section-header">Service Packs</h2>
|
||||||
<div class="package-list">
|
<div class="package-list container">
|
||||||
<div class="package">
|
<div class="package">
|
||||||
<h3>3 Hours</h3>
|
<h3>3 Hours<span class="asteric-icon">*</span></h3>
|
||||||
<p>Quick fixes and small automation improvements.</p>
|
<p>Quick fixes and small automation improvements.</p>
|
||||||
<span class="price">$450</span>
|
<span class="price">$450</span>
|
||||||
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
|
||||||
@@ -168,17 +187,18 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="package featured">
|
<div class="package featured">
|
||||||
<h3>5 Hours</h3>
|
<div class="badge">Most popular</div>
|
||||||
|
<h3>5 Hours<span class="asteric-icon">*</span></h3>
|
||||||
<p>Ideal for mid-level integrations and custom workflows.</p>
|
<p>Ideal for mid-level integrations and custom workflows.</p>
|
||||||
<span class="price">$675</span>
|
<span class="price">$675</span>
|
||||||
|
|
||||||
<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
|
<button class="btn-secondary btn-featured" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
|
||||||
Choose Plan
|
Choose Plan
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="package">
|
<div class="package">
|
||||||
<h3>10 Hours</h3>
|
<h3>10 Hours<span class="asteric-icon">*</span></h3>
|
||||||
<p>Perfect for large projects and advanced automation.</p>
|
<p>Perfect for large projects and advanced automation.</p>
|
||||||
<span class="price">$1.200</span>
|
<span class="price">$1.200</span>
|
||||||
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
|
||||||
@@ -190,11 +210,11 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="package">
|
<div class="package">
|
||||||
<h3>N8N Installation and Maintainance</h3>
|
<h3>N8N Installation and Maintainance<span class="asteric-icon">*</span></h3>
|
||||||
<p>We install N8N on your Container and maintain it for one year.</p>
|
<p>We install N8N on your Container and maintain it for one year.</p>
|
||||||
<span class="price">$75 per Year</span>
|
<span class="price">$75/Year</span>
|
||||||
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
|
||||||
Choose Plan
|
Subscribe
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -205,14 +225,14 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<p class="free-offer">All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
|
<p class="free-offer"><span class="asteric-icon">*</span> All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Image Slider -->
|
<!-- Image Slider -->
|
||||||
<section class="slider-section">
|
<section id="team" class="slider-section">
|
||||||
|
<h2 class="section-header">Meet Our Team</h2>
|
||||||
|
|
||||||
|
<div class="slide container">
|
||||||
<div class="slide">
|
|
||||||
<div class="slide-content">
|
<div class="slide-content">
|
||||||
<div class="slide-image">
|
<div class="slide-image">
|
||||||
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
|
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
|
||||||
@@ -231,7 +251,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="slide">
|
<div class="slide container">
|
||||||
<div class="slide-content">
|
<div class="slide-content">
|
||||||
<div class="slide-image">
|
<div class="slide-image">
|
||||||
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
|
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
|
||||||
@@ -252,9 +272,48 @@
|
|||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="accordion-section">
|
<section id="blog" class="accordion-section blog-section">
|
||||||
|
<h2 class="section-header">Latest Blog Posts</h2>
|
||||||
<div class="blog-teaser">
|
<div class="blog-list container">
|
||||||
|
|
||||||
|
<!-- 1. Example HTML to use badge in blog post -->
|
||||||
|
|
||||||
|
<!-- <div class="blog-teaser blog-badge-green">
|
||||||
|
<div class="blog-badge-green-tag">Company</div>
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 2. Example HTML to skip badge in blog post -->
|
||||||
|
|
||||||
|
<!-- <div class="blog-teaser">
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 3. Uncomment this to get one blog post ready with blue badge -->
|
||||||
|
|
||||||
|
<!-- <div class="blog-teaser blog-badge-blue">
|
||||||
|
<div class="blog-badge-blue-tag">Most popular</div>
|
||||||
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
<small class="blog-date">30.07.2025</small>
|
<small class="blog-date">30.07.2025</small>
|
||||||
<div class="blog-snippet">
|
<div class="blog-snippet">
|
||||||
@@ -270,7 +329,7 @@ So you've wired up a chat with your AI agent and it responds nicely — but what
|
|||||||
In this tutorial, we’ll walk through the key steps we used to build a <strong>dynamic chat widget</strong> using <code>n8n</code>, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
In this tutorial, we’ll walk through the key steps we used to build a <strong>dynamic chat widget</strong> using <code>n8n</code>, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>💡 The Real Magic: State-Aware Chat Responses</h2>
|
<h2 class="blog-content-section-title">💡 The Real Magic: State-Aware Chat Responses</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic <strong>state object</strong> that tracks context and next steps.
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic <strong>state object</strong> that tracks context and next steps.
|
||||||
@@ -289,7 +348,7 @@ The key innovation here lies in how we return the agent’s response to the fron
|
|||||||
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>🛒 Embedding the Product ID in State</h2>
|
<h2 class="blog-content-section-title">🛒 Embedding the Product ID in State</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to <strong>embed the product ID directly into the state object</strong>.
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to <strong>embed the product ID directly into the state object</strong>.
|
||||||
@@ -303,7 +362,7 @@ This ID is then parsed by the frontend to dynamically display the appropriate <s
|
|||||||
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>🔧 Under the Hood: What We Used</h2>
|
<h2 class="blog-content-section-title">🔧 Under the Hood: What We Used</h2>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>n8n</strong> for workflow logic and webhook handling</li>
|
<li><strong>n8n</strong> for workflow logic and webhook handling</li>
|
||||||
@@ -312,13 +371,13 @@ It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts base
|
|||||||
<li><strong>PayPal API</strong> for seamless payment integration</li>
|
<li><strong>PayPal API</strong> for seamless payment integration</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>✨ Bonus: A Process Wizard</h2>
|
<h2 class="blog-content-section-title">✨ Bonus: A Process Wizard</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2>📚 Want to Try This Yourself?</h2>
|
<h2 class="blog-content-section-title">📚 Want to Try This Yourself?</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Head over to our <a href="/">homepage</a> to read more blog posts like this and explore our implementation in detail.
|
Head over to our <a href="/">homepage</a> to read more blog posts like this and explore our implementation in detail.
|
||||||
@@ -329,6 +388,7 @@ Or, if you'd like to help us out with a little SEO love, just Google <strong>"N8
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Here’s a full video walkthrough of the dynamic chat widget in action:</p>
|
<p>Here’s a full video walkthrough of the dynamic chat widget in action:</p>
|
||||||
|
<span class="blog-video-description">
|
||||||
In this tutorial, we’ll walk through the key steps we used to build a dynamic chat widget using n8n, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
In this tutorial, we’ll walk through the key steps we used to build a dynamic chat widget using n8n, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
|
||||||
💡 The Real Magic: State-Aware Chat Responses
|
💡 The Real Magic: State-Aware Chat Responses
|
||||||
@@ -365,13 +425,134 @@ Head over to our homepage to read more blog posts like this and explore our impl
|
|||||||
Or, if you'd like to help us out with a little SEO love, just Google "N8N ODOO API" and click on our homepage: OD8N. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
Or, if you'd like to help us out with a little SEO love, just Google "N8N ODOO API" and click on our homepage: OD8N. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
|
||||||
Here’s a full video walkthrough of the dynamic chat widget in action:
|
Here’s a full video walkthrough of the dynamic chat widget in action:
|
||||||
|
</span>
|
||||||
<iframe width="560" height="315" class="ytvideo" src="https://youtu.be/4BPLTfeQfHE" title="Video" frameborder="0"
|
<iframe width="560" height="315" class="ytvideo" src="https://youtu.be/4BPLTfeQfHE" title="Video" frameborder="0"
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
allowfullscreen>
|
allowfullscreen>
|
||||||
</iframe>
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More</button>
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="blog-teaser">
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In this tutorial, we’ll walk through the key steps we used to build a <strong>dynamic chat widget</strong> using <code>n8n</code>, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">💡 The Real Magic: State-Aware Chat Responses</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic <strong>state object</strong> that tracks context and next steps.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Here’s what our return looks like from the backend:</p>
|
||||||
|
|
||||||
|
<pre><code>return {
|
||||||
|
json: {
|
||||||
|
output: output_,
|
||||||
|
state: state_
|
||||||
|
}
|
||||||
|
};</code></pre>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">🛒 Embedding the Product ID in State</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to <strong>embed the product ID directly into the state object</strong>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This ID is then parsed by the frontend to dynamically display the appropriate <strong>PayPal payment button</strong>, configured for the selected product and amount.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">🔧 Under the Hood: What We Used</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>n8n</strong> for workflow logic and webhook handling</li>
|
||||||
|
<li><strong>Custom HTML + JS widget</strong> to handle frontend interaction</li>
|
||||||
|
<li><strong>OpenAI Agent</strong> with system prompts to guide the process</li>
|
||||||
|
<li><strong>PayPal API</strong> for seamless payment integration</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">✨ Bonus: A Process Wizard</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">📚 Want to Try This Yourself?</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Head over to our <a href="/">homepage</a> to read more blog posts like this and explore our implementation in detail.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Or, if you'd like to help us out with a little SEO love, just Google <strong>"N8N ODOO API"</strong> and click on our homepage: <strong>OD8N</strong>. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Here’s a full video walkthrough of the dynamic chat widget in action:</p>
|
||||||
|
<span class="blog-video-description">
|
||||||
|
In this tutorial, we’ll walk through the key steps we used to build a dynamic chat widget using n8n, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
|
||||||
|
💡 The Real Magic: State-Aware Chat Responses
|
||||||
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic state object that tracks context and next steps.
|
||||||
|
|
||||||
|
Here’s what our return looks like from the backend:
|
||||||
|
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
output: output_,
|
||||||
|
state: state_
|
||||||
|
}
|
||||||
|
};
|
||||||
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
|
|
||||||
|
🛒 Embedding the Product ID in State
|
||||||
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to embed the product ID directly into the state object.
|
||||||
|
|
||||||
|
This ID is then parsed by the frontend to dynamically display the appropriate PayPal payment button, configured for the selected product and amount.
|
||||||
|
|
||||||
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
|
|
||||||
|
🔧 Under the Hood: What We Used
|
||||||
|
n8n for workflow logic and webhook handling
|
||||||
|
Custom HTML + JS widget to handle frontend interaction
|
||||||
|
OpenAI Agent with system prompts to guide the process
|
||||||
|
PayPal API for seamless payment integration
|
||||||
|
✨ Bonus: A Process Wizard
|
||||||
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
|
|
||||||
|
📚 Want to Try This Yourself?
|
||||||
|
Head over to our homepage to read more blog posts like this and explore our implementation in detail.
|
||||||
|
|
||||||
|
Or, if you'd like to help us out with a little SEO love, just Google "N8N ODOO API" and click on our homepage: OD8N. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
|
||||||
|
Here’s a full video walkthrough of the dynamic chat widget in action:
|
||||||
|
</span>
|
||||||
|
<iframe width="560" height="315" class="ytvideo" src="https://youtu.be/4BPLTfeQfHE" title="Video" frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="blog-teaser">
|
<div class="blog-teaser">
|
||||||
@@ -383,7 +564,7 @@ Here’s a full video walkthrough of the dynamic chat widget in action:
|
|||||||
<div class="blog-full-content" style="display:none;">
|
<div class="blog-full-content" style="display:none;">
|
||||||
<p>At the heart of every modern enterprise lies the need to balance two forces: stability and agility. Our approach harnesses the best of both worlds—leveraging the proven foundation of <strong>ODOO</strong> while embracing the innovation engine of <strong>N8N</strong>.</p>
|
<p>At the heart of every modern enterprise lies the need to balance two forces: stability and agility. Our approach harnesses the best of both worlds—leveraging the proven foundation of <strong>ODOO</strong> while embracing the innovation engine of <strong>N8N</strong>.</p>
|
||||||
|
|
||||||
<h2>ODOO: The Rock-Solid ERP Foundation</h2>
|
<h2 class="blog-content-section-title">ODOO: The Rock-Solid ERP Foundation</h2>
|
||||||
|
|
||||||
<p>We’ve seen countless ERP systems come and go. But <strong>ODOO</strong> stands tall—a battle-hardened suite refined over years of real-world application. From <strong>Accounting</strong> to <strong>CRM</strong>, <strong>Invoicing</strong>, <strong>Production</strong>, and <strong>Logistics</strong>, ODOO delivers reliable, scalable modules that form the digital spine of any serious company.</p>
|
<p>We’ve seen countless ERP systems come and go. But <strong>ODOO</strong> stands tall—a battle-hardened suite refined over years of real-world application. From <strong>Accounting</strong> to <strong>CRM</strong>, <strong>Invoicing</strong>, <strong>Production</strong>, and <strong>Logistics</strong>, ODOO delivers reliable, scalable modules that form the digital spine of any serious company.</p>
|
||||||
|
|
||||||
@@ -391,7 +572,7 @@ Here’s a full video walkthrough of the dynamic chat widget in action:
|
|||||||
Still awesome after all these years: ODOO continues to evolve while staying true to its mission—powering real businesses with real needs.
|
Still awesome after all these years: ODOO continues to evolve while staying true to its mission—powering real businesses with real needs.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>N8N: The Agile Integrator for the AI Era</h2>
|
<h2 class="blog-content-section-title">N8N: The Agile Integrator for the AI Era</h2>
|
||||||
|
|
||||||
<p>But the world is changing. Fast. AI tools are evolving weekly. APIs are everywhere. Customers demand speed and personalization like never before.</p>
|
<p>But the world is changing. Fast. AI tools are evolving weekly. APIs are everywhere. Customers demand speed and personalization like never before.</p>
|
||||||
|
|
||||||
@@ -399,12 +580,12 @@ Here’s a full video walkthrough of the dynamic chat widget in action:
|
|||||||
|
|
||||||
<p>While ODOO keeps your core business running like a well-oiled machine, N8N lets us bolt on new AI-driven capabilities almost instantly—without waiting for the next ERP update cycle.</p>
|
<p>While ODOO keeps your core business running like a well-oiled machine, N8N lets us bolt on new AI-driven capabilities almost instantly—without waiting for the next ERP update cycle.</p>
|
||||||
|
|
||||||
<h2>Together: The Future of Digital Operations</h2>
|
<h2 class="blog-content-section-title">Together: The Future of Digital Operations</h2>
|
||||||
|
|
||||||
<p>By combining ODOO and N8N, we create a powerful synergy. One gives you reliable structure. The other, unmatched flexibility. This strategy enables us to build systems that are not only stable—but also smart, adaptive, and future-ready.</p>
|
<p>By combining ODOO and N8N, we create a powerful synergy. One gives you reliable structure. The other, unmatched flexibility. This strategy enables us to build systems that are not only stable—but also smart, adaptive, and future-ready.</p>
|
||||||
|
|
||||||
<div class="highlight">
|
<div class="highlight">
|
||||||
💡 <strong>Smart Strategy = ODOO as the backbone + N8N as the nervous system.</strong>
|
💡 <strong class="blog-content-section-highlight">Smart Strategy = ODOO as the backbone + N8N as the nervous system.</strong>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cta">
|
<div class="cta">
|
||||||
@@ -413,93 +594,93 @@ Here’s a full video walkthrough of the dynamic chat widget in action:
|
|||||||
</div>
|
</div>
|
||||||
<img src="https://OD8N.com/images/server.webp" class="image" width="560">
|
<img src="https://OD8N.com/images/server.webp" class="image" width="560">
|
||||||
</div>
|
</div>
|
||||||
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More</button>
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!-- Success Stories Accordion -->
|
<!-- Success Stories Accordion -->
|
||||||
<section class="accordion-section">
|
<section id="story" class="accordion-section success-stories">
|
||||||
<h2>OD8N Success Stories in Automation</h2>
|
<h2 class="section-header">Success Stories in Automation</h2>
|
||||||
<div class="accordion">
|
<div class="accordion container">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story</button>
|
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: No API, No Problem.</h2>
|
<h2 class="panel-bar-content-title">The Challenge: No API, No Problem.</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
|
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
|
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
|
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Automate Your Repetitive Tasks</a>
|
<a href="#packages" class="btn-text">Automate Your Repetitive Tasks <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management</button>
|
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Global Scale, Local Management</h2>
|
<h2 class="panel-bar-content-title">The Challenge: Global Scale, Local Management</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
|
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
|
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
|
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Scale Your Operations with Automation</a>
|
<a href="#packages" class="btn-text">Scale Your Operations with Automation <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent</button>
|
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Unlocking the Power of Conversational AI</h2>
|
<h2 class="panel-bar-content-title">The Challenge: Unlocking the Power of Conversational AI</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
|
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
|
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
|
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Integrate AI into Your Workflows</a>
|
<a href="#packages" class="btn-text">Integrate AI into Your Workflows <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox</button>
|
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Reinventing the Sales Funnel</h2>
|
<h2 class="panel-bar-content-title">The Challenge: Reinventing the Sales Funnel</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
|
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
|
<p class="panel-bar-content-text">
|
||||||
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
|
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
|
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Experience the Future of Sales</a>
|
<a href="#packages" class="btn-text">Experience the Future of Sales <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
701
public/index.html.design
Normal file
701
public/index.html.design
Normal file
@@ -0,0 +1,701 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<script defer data-domain="od8n.com" src="https://plausible.odoo4projects.com/js/script.tagged-events.js"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Unlock your business potential with OD8N, your expert partners in Odoo and n8n automation. Get a free 1-hour consultation with our automation engineers. Risk-free guarantee!">
|
||||||
|
<meta name="keywords" content="OD8N, Odoo, n8n, automation, business automation, consulting, integration, service packs, Odoo development, n8n workflows">
|
||||||
|
<meta name="author" content="OD8N">
|
||||||
|
<title>OD8N - Odoo & n8n Automation Experts</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
<script>const configUrl = `https://od8n.com/widget/custom/od8n.json`;</script>
|
||||||
|
<script src="widget/widget.js"></script>
|
||||||
|
<link rel="stylesheet" href="widget/custom/od8n.css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N",
|
||||||
|
"url": "https://www.od8n.com/",
|
||||||
|
"logo": "https://www.od8n.com/logo.svg",
|
||||||
|
"description": "OD8N are experts in Odoo and n8n automation, offering flexible man-hour service packs with a free 1-hour consultation.",
|
||||||
|
"contactPoint": {
|
||||||
|
"@type": "ContactPoint",
|
||||||
|
"telephone": "",
|
||||||
|
"contactType": "customer service"
|
||||||
|
},
|
||||||
|
"sameAs": []
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Service",
|
||||||
|
"serviceType": "Odoo & n8n Automation Consulting",
|
||||||
|
"provider": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N"
|
||||||
|
},
|
||||||
|
"name": "3 Hours Service Pack",
|
||||||
|
"description": "Quick fixes and small automation improvements.",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "450",
|
||||||
|
"priceCurrency": "USD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Service",
|
||||||
|
"serviceType": "Odoo & n8n Automation Consulting",
|
||||||
|
"provider": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N"
|
||||||
|
},
|
||||||
|
"name": "5 Hours Service Pack",
|
||||||
|
"description": "Ideal for mid-level integrations and custom workflows.",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "675",
|
||||||
|
"priceCurrency": "USD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Service",
|
||||||
|
"serviceType": "Odoo & n8n Automation Consulting",
|
||||||
|
"provider": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N"
|
||||||
|
},
|
||||||
|
"name": "10 Hours Service Pack",
|
||||||
|
"description": "Perfect for large projects and advanced automation.",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "1200",
|
||||||
|
"priceCurrency": "USD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Service",
|
||||||
|
"serviceType": "Odoo & n8n Automation Consulting",
|
||||||
|
"provider": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N"
|
||||||
|
},
|
||||||
|
"name": "ODOO & N8N Bundle",
|
||||||
|
"description": "Perfect for taking conrtol over your company automation installation.",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "395",
|
||||||
|
"priceCurrency": "USD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Person",
|
||||||
|
"name": "Oliver Arnold",
|
||||||
|
"jobTitle": "Expert in Odoo & System Design",
|
||||||
|
"worksFor": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "Person",
|
||||||
|
"name": "Mark Gutmann",
|
||||||
|
"jobTitle": "Expert in AI and Process Consulting",
|
||||||
|
"worksFor": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "OD8N"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header Section -->
|
||||||
|
<header class="hero" id="home">
|
||||||
|
<div class="navbar-main">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||||
|
<img src="./icons/logo-white.svg" alt="OD8N Logo" class="logo-icon">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<button id="Burger-menu">
|
||||||
|
<i class="fa-solid fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#packages">packages</a></li>
|
||||||
|
<li><a href="#team">Team</a></li>
|
||||||
|
<li><a href="#blog">Blog</a></li>
|
||||||
|
<li><a href="#story">Story</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<section class="hero-content">
|
||||||
|
<h1>Odoo & n8n Automation Experts</h1>
|
||||||
|
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
||||||
|
<ul class="hero-list">
|
||||||
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</span></li>
|
||||||
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Experts in Odoo and n8n — no outsourcing, no fluff</span></li>
|
||||||
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Hosting solutions for Odoo & n8n available</span></li>
|
||||||
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Custom development tailored to your workflows</span></li>
|
||||||
|
</ul>
|
||||||
|
<button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">Explore packages</button>
|
||||||
|
</section>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Product Packages -->
|
||||||
|
<section id="packages" class="packages">
|
||||||
|
<h2 class="section-header">Service Packs</h2>
|
||||||
|
<div class="package-list container">
|
||||||
|
<div class="package">
|
||||||
|
<h3>3 Hours<span class="asteric-icon">*</span></h3>
|
||||||
|
<p>Quick fixes and small automation improvements.</p>
|
||||||
|
<span class="price">$450</span>
|
||||||
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
|
||||||
|
Choose Plan
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="package featured">
|
||||||
|
<div class="badge">Most popular</div>
|
||||||
|
<h3>5 Hours<span class="asteric-icon">*</span></h3>
|
||||||
|
<p>Ideal for mid-level integrations and custom workflows.</p>
|
||||||
|
<span class="price">$675</span>
|
||||||
|
|
||||||
|
<button class="btn-secondary btn-featured" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
|
||||||
|
Choose Plan
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="package">
|
||||||
|
<h3>10 Hours<span class="asteric-icon">*</span></h3>
|
||||||
|
<p>Perfect for large projects and advanced automation.</p>
|
||||||
|
<span class="price">$1.200</span>
|
||||||
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
|
||||||
|
Choose Plan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="package">
|
||||||
|
<h3>N8N Installation and Maintainance<span class="asteric-icon">*</span></h3>
|
||||||
|
<p>We install N8N on your Container and maintain it for one year.</p>
|
||||||
|
<span class="price">$75/Year</span>
|
||||||
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
|
||||||
|
Subscribe
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="free-offer"><span class="asteric-icon">*</span> All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Image Slider -->
|
||||||
|
<section id="team" class="slider-section">
|
||||||
|
<h2 class="section-header">Meet Our Team</h2>
|
||||||
|
|
||||||
|
<div class="slide container">
|
||||||
|
<div class="slide-content">
|
||||||
|
<div class="slide-image">
|
||||||
|
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
|
||||||
|
</div>
|
||||||
|
<div class="slide-text">
|
||||||
|
<h2>Oliver Arnold</h2>
|
||||||
|
<h4>Expert in Odoo & System Design</h4>
|
||||||
|
<p>I am an expert in Odoo and system design with years of experience in consulting.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Odoo functional consulting & development</li>
|
||||||
|
<li>N8N workflow design & custom nodes</li>
|
||||||
|
<li>System integration & architecture design</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="slide container">
|
||||||
|
<div class="slide-content">
|
||||||
|
<div class="slide-image">
|
||||||
|
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
|
||||||
|
</div>
|
||||||
|
<div class="slide-text">
|
||||||
|
<h2>Mark Gutmann</h2>
|
||||||
|
<h4>Expert in AI and Process Consulting</h4>
|
||||||
|
<p>I am an expert in Odoo and system design with years of experience in consulting.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Odoo functional consulting & development</li>
|
||||||
|
<li>N8N workflow design & custom nodes</li>
|
||||||
|
<li>System integration & architecture design</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="blog" class="accordion-section blog-section">
|
||||||
|
<h2 class="section-header">Latest Blog Posts</h2>
|
||||||
|
<div class="blog-list container">
|
||||||
|
|
||||||
|
<!-- 1. Example HTML to use badge in blog post -->
|
||||||
|
|
||||||
|
<!-- <div class="blog-teaser blog-badge-green">
|
||||||
|
<div class="blog-badge-green-tag">Company</div>
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 2. Example HTML to skip badge in blog post -->
|
||||||
|
|
||||||
|
<!-- <div class="blog-teaser">
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!-- 3. Uncomment this to get one blog post ready with blue badge -->
|
||||||
|
|
||||||
|
<!-- <div class="blog-teaser blog-badge-blue">
|
||||||
|
<div class="blog-badge-blue-tag">Most popular</div>
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In this tutorial, we’ll walk through the key steps we used to build a <strong>dynamic chat widget</strong> using <code>n8n</code>, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">💡 The Real Magic: State-Aware Chat Responses</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic <strong>state object</strong> that tracks context and next steps.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Here’s what our return looks like from the backend:</p>
|
||||||
|
|
||||||
|
<pre><code>return {
|
||||||
|
json: {
|
||||||
|
output: output_,
|
||||||
|
state: state_
|
||||||
|
}
|
||||||
|
};</code></pre>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">🛒 Embedding the Product ID in State</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to <strong>embed the product ID directly into the state object</strong>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This ID is then parsed by the frontend to dynamically display the appropriate <strong>PayPal payment button</strong>, configured for the selected product and amount.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">🔧 Under the Hood: What We Used</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>n8n</strong> for workflow logic and webhook handling</li>
|
||||||
|
<li><strong>Custom HTML + JS widget</strong> to handle frontend interaction</li>
|
||||||
|
<li><strong>OpenAI Agent</strong> with system prompts to guide the process</li>
|
||||||
|
<li><strong>PayPal API</strong> for seamless payment integration</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">✨ Bonus: A Process Wizard</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">📚 Want to Try This Yourself?</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Head over to our <a href="/">homepage</a> to read more blog posts like this and explore our implementation in detail.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Or, if you'd like to help us out with a little SEO love, just Google <strong>"N8N ODOO API"</strong> and click on our homepage: <strong>OD8N</strong>. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Here’s a full video walkthrough of the dynamic chat widget in action:</p>
|
||||||
|
<span class="blog-video-description">
|
||||||
|
In this tutorial, we’ll walk through the key steps we used to build a dynamic chat widget using n8n, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
|
||||||
|
💡 The Real Magic: State-Aware Chat Responses
|
||||||
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic state object that tracks context and next steps.
|
||||||
|
|
||||||
|
Here’s what our return looks like from the backend:
|
||||||
|
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
output: output_,
|
||||||
|
state: state_
|
||||||
|
}
|
||||||
|
};
|
||||||
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
|
|
||||||
|
🛒 Embedding the Product ID in State
|
||||||
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to embed the product ID directly into the state object.
|
||||||
|
|
||||||
|
This ID is then parsed by the frontend to dynamically display the appropriate PayPal payment button, configured for the selected product and amount.
|
||||||
|
|
||||||
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
|
|
||||||
|
🔧 Under the Hood: What We Used
|
||||||
|
n8n for workflow logic and webhook handling
|
||||||
|
Custom HTML + JS widget to handle frontend interaction
|
||||||
|
OpenAI Agent with system prompts to guide the process
|
||||||
|
PayPal API for seamless payment integration
|
||||||
|
✨ Bonus: A Process Wizard
|
||||||
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
|
|
||||||
|
📚 Want to Try This Yourself?
|
||||||
|
Head over to our homepage to read more blog posts like this and explore our implementation in detail.
|
||||||
|
|
||||||
|
Or, if you'd like to help us out with a little SEO love, just Google "N8N ODOO API" and click on our homepage: OD8N. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
|
||||||
|
Here’s a full video walkthrough of the dynamic chat widget in action:
|
||||||
|
</span>
|
||||||
|
<iframe width="560" height="315" class="ytvideo" src="https://youtu.be/4BPLTfeQfHE" title="Video" frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="blog-teaser">
|
||||||
|
<h3 class="blog-title tutorial"> From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
|
||||||
|
<small class="blog-date">30.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go?
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could <strong>guide users through an entire procurement flow</strong> and end with a PayPal payment button, ready to go?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In this tutorial, we’ll walk through the key steps we used to build a <strong>dynamic chat widget</strong> using <code>n8n</code>, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">💡 The Real Magic: State-Aware Chat Responses</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic <strong>state object</strong> that tracks context and next steps.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Here’s what our return looks like from the backend:</p>
|
||||||
|
|
||||||
|
<pre><code>return {
|
||||||
|
json: {
|
||||||
|
output: output_,
|
||||||
|
state: state_
|
||||||
|
}
|
||||||
|
};</code></pre>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">🛒 Embedding the Product ID in State</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to <strong>embed the product ID directly into the state object</strong>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This ID is then parsed by the frontend to dynamically display the appropriate <strong>PayPal payment button</strong>, configured for the selected product and amount.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">🔧 Under the Hood: What We Used</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><strong>n8n</strong> for workflow logic and webhook handling</li>
|
||||||
|
<li><strong>Custom HTML + JS widget</strong> to handle frontend interaction</li>
|
||||||
|
<li><strong>OpenAI Agent</strong> with system prompts to guide the process</li>
|
||||||
|
<li><strong>PayPal API</strong> for seamless payment integration</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">✨ Bonus: A Process Wizard</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">📚 Want to Try This Yourself?</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Head over to our <a href="/">homepage</a> to read more blog posts like this and explore our implementation in detail.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Or, if you'd like to help us out with a little SEO love, just Google <strong>"N8N ODOO API"</strong> and click on our homepage: <strong>OD8N</strong>. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>Here’s a full video walkthrough of the dynamic chat widget in action:</p>
|
||||||
|
<span class="blog-video-description">
|
||||||
|
In this tutorial, we’ll walk through the key steps we used to build a dynamic chat widget using n8n, an AI agent, and a smart process flow that finishes in PayPal. We won’t cover the basics of implementing an AI chat agent — we’ll assume you’ve got that part covered.
|
||||||
|
|
||||||
|
💡 The Real Magic: State-Aware Chat Responses
|
||||||
|
The key innovation here lies in how we return the agent’s response to the frontend. Instead of sending back a simple string, we return a rich object that contains not just the output text, but also a dynamic state object that tracks context and next steps.
|
||||||
|
|
||||||
|
Here’s what our return looks like from the backend:
|
||||||
|
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
output: output_,
|
||||||
|
state: state_
|
||||||
|
}
|
||||||
|
};
|
||||||
|
This small design decision opens up a world of flexibility. The frontend can now dynamically react to the current state of the conversation — whether it’s collecting user details, offering product options, or finalizing a purchase.
|
||||||
|
|
||||||
|
🛒 Embedding the Product ID in State
|
||||||
|
Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to embed the product ID directly into the state object.
|
||||||
|
|
||||||
|
This ID is then parsed by the frontend to dynamically display the appropriate PayPal payment button, configured for the selected product and amount.
|
||||||
|
|
||||||
|
It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
|
||||||
|
|
||||||
|
🔧 Under the Hood: What We Used
|
||||||
|
n8n for workflow logic and webhook handling
|
||||||
|
Custom HTML + JS widget to handle frontend interaction
|
||||||
|
OpenAI Agent with system prompts to guide the process
|
||||||
|
PayPal API for seamless payment integration
|
||||||
|
✨ Bonus: A Process Wizard
|
||||||
|
We also built a simple process wizard UI that activates when certain states are reached. This provides users with an optional visual flow, letting them see how far along they are in the checkout process — especially useful when the chat is collecting structured information.
|
||||||
|
|
||||||
|
📚 Want to Try This Yourself?
|
||||||
|
Head over to our homepage to read more blog posts like this and explore our implementation in detail.
|
||||||
|
|
||||||
|
Or, if you'd like to help us out with a little SEO love, just Google "N8N ODOO API" and click on our homepage: OD8N. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
|
||||||
|
|
||||||
|
Here’s a full video walkthrough of the dynamic chat widget in action:
|
||||||
|
</span>
|
||||||
|
<iframe width="560" height="315" class="ytvideo" src="https://youtu.be/4BPLTfeQfHE" title="Video" frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="blog-teaser">
|
||||||
|
<h3 class="blog-title company"> ODOO & N8N: Our Strategy</h3>
|
||||||
|
<small class="blog-date">31.07.2025</small>
|
||||||
|
<div class="blog-snippet">
|
||||||
|
<p>At the heart of every modern enterprise lies the need to balance two forces: stability and agility. Our approach harnesses the best of both worlds—leveraging the proven foundation of <strong>ODOO</strong> while embracing the innovation engine of <strong>N8N</strong>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="blog-full-content" style="display:none;">
|
||||||
|
<p>At the heart of every modern enterprise lies the need to balance two forces: stability and agility. Our approach harnesses the best of both worlds—leveraging the proven foundation of <strong>ODOO</strong> while embracing the innovation engine of <strong>N8N</strong>.</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">ODOO: The Rock-Solid ERP Foundation</h2>
|
||||||
|
|
||||||
|
<p>We’ve seen countless ERP systems come and go. But <strong>ODOO</strong> stands tall—a battle-hardened suite refined over years of real-world application. From <strong>Accounting</strong> to <strong>CRM</strong>, <strong>Invoicing</strong>, <strong>Production</strong>, and <strong>Logistics</strong>, ODOO delivers reliable, scalable modules that form the digital spine of any serious company.</p>
|
||||||
|
|
||||||
|
<div class="highlight">
|
||||||
|
Still awesome after all these years: ODOO continues to evolve while staying true to its mission—powering real businesses with real needs.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">N8N: The Agile Integrator for the AI Era</h2>
|
||||||
|
|
||||||
|
<p>But the world is changing. Fast. AI tools are evolving weekly. APIs are everywhere. Customers demand speed and personalization like never before.</p>
|
||||||
|
|
||||||
|
<p>Enter <strong>N8N</strong>—our weapon of choice for agile automation, AI integration, and rapid deployment. Whether it's triggering actions from an AI model, syncing tools across platforms, or automating multi-step workflows, N8N gives us the power to move as fast as your market does.</p>
|
||||||
|
|
||||||
|
<p>While ODOO keeps your core business running like a well-oiled machine, N8N lets us bolt on new AI-driven capabilities almost instantly—without waiting for the next ERP update cycle.</p>
|
||||||
|
|
||||||
|
<h2 class="blog-content-section-title">Together: The Future of Digital Operations</h2>
|
||||||
|
|
||||||
|
<p>By combining ODOO and N8N, we create a powerful synergy. One gives you reliable structure. The other, unmatched flexibility. This strategy enables us to build systems that are not only stable—but also smart, adaptive, and future-ready.</p>
|
||||||
|
|
||||||
|
<div class="highlight">
|
||||||
|
💡 <strong class="blog-content-section-highlight">Smart Strategy = ODOO as the backbone + N8N as the nervous system.</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cta">
|
||||||
|
Ready to take your business operations to the next level?<br>
|
||||||
|
Let’s talk ODOO. Let’s talk N8N. Let’s build your future—today.
|
||||||
|
</div>
|
||||||
|
<img src="https://OD8N.com/images/server.webp" class="image" width="560">
|
||||||
|
</div>
|
||||||
|
<button class="read-more-btn plausible-event-name=ReadPost" onclick="toggleContent(this)">Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Success Stories Accordion -->
|
||||||
|
<section id="story" class="accordion-section success-stories">
|
||||||
|
<h2 class="section-header">Success Stories in Automation</h2>
|
||||||
|
<div class="accordion container">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<section class="panel-bar-content">
|
||||||
|
<h2 class="panel-bar-content-title">The Challenge: No API, No Problem.</h2>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
|
||||||
|
</p>
|
||||||
|
<div style="margin-top: 2em;">
|
||||||
|
<a href="#packages" class="btn-text">Automate Your Repetitive Tasks <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<section class="panel-bar-content">
|
||||||
|
<h2 class="panel-bar-content-title">The Challenge: Global Scale, Local Management</h2>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
|
||||||
|
</p>
|
||||||
|
<div style="margin-top: 2em;">
|
||||||
|
<a href="#packages" class="btn-text">Scale Your Operations with Automation <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<section class="panel-bar-content">
|
||||||
|
<h2 class="panel-bar-content-title">The Challenge: Unlocking the Power of Conversational AI</h2>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
|
||||||
|
</p>
|
||||||
|
<div style="margin-top: 2em;">
|
||||||
|
<a href="#packages" class="btn-text">Integrate AI into Your Workflows <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<section class="panel-bar-content">
|
||||||
|
<h2 class="panel-bar-content-title">The Challenge: Reinventing the Sales Funnel</h2>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
|
||||||
|
</p>
|
||||||
|
<p class="panel-bar-content-text">
|
||||||
|
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
|
||||||
|
</p>
|
||||||
|
<div style="margin-top: 2em;">
|
||||||
|
<a href="#packages" class="btn-text">Experience the Future of Sales <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>For ODOO and N8N tips and tricks and news follow us on
|
||||||
|
<a href="https://www.linkedin.com/company/od8n" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
|
||||||
|
</p>
|
||||||
|
<p>© 2025 OD8N. All Rights Reserved. Service provided by ASC Consultatores Paraguay</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script defer src="./app.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -140,26 +140,45 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Header Section -->
|
<!-- Header Section -->
|
||||||
<header class="hero">
|
<header class="hero" id="home">
|
||||||
<div class="hero-content">
|
<div class="navbar-main">
|
||||||
<h1>OD8N - Odoo & n8n Automation Experts</h1>
|
<div class="logo">
|
||||||
|
<a href="/" class="logo-link" aria-label="Go to homepage">
|
||||||
|
<img src="./icons/logo-white.svg" alt="OD8N Logo" class="logo-icon">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<button id="Burger-menu">
|
||||||
|
<i class="fa-solid fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#packages">packages</a></li>
|
||||||
|
<li><a href="#team">Team</a></li>
|
||||||
|
<li><a href="#blog">Blog</a></li>
|
||||||
|
<li><a href="#story">Story</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<section class="hero-content">
|
||||||
|
<h1>Odoo & n8n Automation Experts</h1>
|
||||||
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
||||||
<ul class="hero-list">
|
<ul class="hero-list">
|
||||||
<li>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</span></li>
|
||||||
<li>Experts in Odoo and n8n — no outsourcing, no fluff</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Experts in Odoo and n8n — no outsourcing, no fluff</span></li>
|
||||||
<li>Hosting solutions for Odoo & n8n available</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Hosting solutions for Odoo & n8n available</span></li>
|
||||||
<li>Custom development tailored to your workflows</li>
|
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Custom development tailored to your workflows</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">Explore packages</button>
|
||||||
</div>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Product Packages -->
|
<!-- Product Packages -->
|
||||||
<section id="packages" class="packages">
|
<section id="packages" class="packages">
|
||||||
<h2>Our OD8N Service Packs for Odoo & n8n Automation</h2>
|
<h2 class="section-header">Service Packs</h2>
|
||||||
<div class="package-list">
|
<div class="package-list container">
|
||||||
<div class="package">
|
<div class="package">
|
||||||
<h3>3 Hours</h3>
|
<h3>3 Hours<span class="asteric-icon">*</span></h3>
|
||||||
<p>Quick fixes and small automation improvements.</p>
|
<p>Quick fixes and small automation improvements.</p>
|
||||||
<span class="price">$450</span>
|
<span class="price">$450</span>
|
||||||
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
|
||||||
@@ -168,17 +187,18 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="package featured">
|
<div class="package featured">
|
||||||
<h3>5 Hours</h3>
|
<div class="badge">Most popular</div>
|
||||||
|
<h3>5 Hours<span class="asteric-icon">*</span></h3>
|
||||||
<p>Ideal for mid-level integrations and custom workflows.</p>
|
<p>Ideal for mid-level integrations and custom workflows.</p>
|
||||||
<span class="price">$675</span>
|
<span class="price">$675</span>
|
||||||
|
|
||||||
<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
|
<button class="btn-secondary btn-featured" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
|
||||||
Choose Plan
|
Choose Plan
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="package">
|
<div class="package">
|
||||||
<h3>10 Hours</h3>
|
<h3>10 Hours<span class="asteric-icon">*</span></h3>
|
||||||
<p>Perfect for large projects and advanced automation.</p>
|
<p>Perfect for large projects and advanced automation.</p>
|
||||||
<span class="price">$1.200</span>
|
<span class="price">$1.200</span>
|
||||||
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
|
||||||
@@ -190,11 +210,11 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="package">
|
<div class="package">
|
||||||
<h3>N8N Installation and Maintainance</h3>
|
<h3>N8N Installation and Maintainance<span class="asteric-icon">*</span></h3>
|
||||||
<p>We install N8N on your Container and maintain it for one year.</p>
|
<p>We install N8N on your Container and maintain it for one year.</p>
|
||||||
<span class="price">$75 per Year</span>
|
<span class="price">$75/Year</span>
|
||||||
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
|
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
|
||||||
Choose Plan
|
Subscribe
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -205,14 +225,14 @@
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<p class="free-offer">All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
|
<p class="free-offer"><span class="asteric-icon">*</span> All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Image Slider -->
|
<!-- Image Slider -->
|
||||||
<section class="slider-section">
|
<section id="team" class="slider-section">
|
||||||
|
<h2 class="section-header">Meet Our Team</h2>
|
||||||
|
|
||||||
|
<div class="slide container">
|
||||||
<div class="slide">
|
|
||||||
<div class="slide-content">
|
<div class="slide-content">
|
||||||
<div class="slide-image">
|
<div class="slide-image">
|
||||||
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
|
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
|
||||||
@@ -231,7 +251,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="slide">
|
<div class="slide container">
|
||||||
<div class="slide-content">
|
<div class="slide-content">
|
||||||
<div class="slide-image">
|
<div class="slide-image">
|
||||||
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
|
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
|
||||||
@@ -258,86 +278,86 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Success Stories Accordion -->
|
<!-- Success Stories Accordion -->
|
||||||
<section class="accordion-section">
|
<section id="story" class="accordion-section success-stories">
|
||||||
<h2>OD8N Success Stories in Automation</h2>
|
<h2 class="section-header">Success Stories in Automation</h2>
|
||||||
<div class="accordion">
|
<div class="accordion container">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story</button>
|
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: No API, No Problem.</h2>
|
<h2 class="panel-bar-content-title">The Challenge: No API, No Problem.</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
|
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
|
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
|
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Automate Your Repetitive Tasks</a>
|
<a href="#packages" class="btn-text">Automate Your Repetitive Tasks <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management</button>
|
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Global Scale, Local Management</h2>
|
<h2 class="panel-bar-content-title">The Challenge: Global Scale, Local Management</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
|
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
|
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
|
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Scale Your Operations with Automation</a>
|
<a href="#packages" class="btn-text">Scale Your Operations with Automation <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent</button>
|
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Unlocking the Power of Conversational AI</h2>
|
<h2 class="panel-bar-content-title">The Challenge: Unlocking the Power of Conversational AI</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
|
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
|
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
|
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Integrate AI into Your Workflows</a>
|
<a href="#packages" class="btn-text">Integrate AI into Your Workflows <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox</button>
|
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
|
||||||
<div class="accordion-content">
|
<div class="accordion-content">
|
||||||
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
|
<section class="panel-bar-content">
|
||||||
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Reinventing the Sales Funnel</h2>
|
<h2 class="panel-bar-content-title">The Challenge: Reinventing the Sales Funnel</h2>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6;">
|
<p class="panel-bar-content-text">
|
||||||
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
|
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
|
<p class="panel-bar-content-text">
|
||||||
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
|
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
|
||||||
</p>
|
</p>
|
||||||
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
|
<p class="panel-bar-content-text">
|
||||||
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
|
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 2em;">
|
<div style="margin-top: 2em;">
|
||||||
<a href="#packages" class="btn-secondary">Experience the Future of Sales</a>
|
<a href="#packages" class="btn-text">Experience the Future of Sales <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
1085
public/style.css
1085
public/style.css
File diff suppressed because it is too large
Load Diff
@@ -18,6 +18,9 @@
|
|||||||
border: none;
|
border: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
|
width: 100px;
|
||||||
|
height: 50px;
|
||||||
|
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
||||||
}
|
}
|
||||||
#cw-chatToggle:hover {
|
#cw-chatToggle:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
|
|||||||
Reference in New Issue
Block a user