Files
od8n_homepage/public/index.html
2025-08-07 18:54:16 +00:00

587 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 youre 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 class="accordion-section">
<div class="blog-teaser blog-badge-red">
<div class="blog-badge-red-tag">Tutorial</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, well 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 wont cover the basics of implementing an AI chat agent — well assume youve got that part covered.
</p>
<h2>💡 The Real Magic: State-Aware Chat Responses</h2>
<p>
The key innovation here lies in how we return the agents 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>Heres 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 its collecting user details, offering product options, or finalizing a purchase.
</p>
<h2>🛒 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>
Its a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
</p>
<h2>🔧 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>✨ 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>📚 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, weve got an in-depth breakdown of the full implementation waiting for you!
</p>
<p>Heres a full video walkthrough of the dynamic chat widget in action:</p>
In this tutorial, well 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 wont cover the basics of implementing an AI chat agent — well assume youve got that part covered.
💡 The Real Magic: State-Aware Chat Responses
The key innovation here lies in how we return the agents 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.
Heres 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 its 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.
Its 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, weve got an in-depth breakdown of the full implementation waiting for you!
Heres a full video walkthrough of the dynamic chat widget in action:
<iframe width="98%" src="https://www.youtube.com/embed/4BPLTfeQfHE" title="n8n Dynamic Chat Widget Demo PayPal Procurement + Process Wizard Integration" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 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 blog-badge-green">
<div class="blog-badge-green-tag">Company</div>
<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>ODOO: The Rock-Solid ERP Foundation</h2>
<p>Weve 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>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>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>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>
Lets talk ODOO. Lets talk N8N. Lets 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></span></button>
</div>
<div class="blog-teaser blog-badge-red">
<div class="blog-badge-red-tag">Tutorial</div>
<h3 class="blog-title Tutorial">N8N: Manage your VPS and Domains</h3>
<small class="blog-date">04.08.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>
When you build your own SAAS company, you will come to the point that you need to manage your VPS and Domains. This can be quite challanging especially, when you admister a lot of subdomains for your clients.
Having the experience with ODOO4projects where we use bind to manage our subdomains, working with the Hostinger Node was super easy and transparent.
As you can see in the screenshot, everything Domain related can be managed with the Hostinger node, you do not even need to fiddle with the API and HTTP requests. Nice and easy.
in order to create a new subdomain, you simply need to create e new A record for this domain. this can be done with this JSON.
{
overwrite: true,
zone: [
{
name: "{{ $('Code').item.json.uuid }}",
records: [
{
content: "{{ $('Code').item.json.ip }}"
}
],
ttl: 14400,
type: "A"
}
]
}
This sets the A record to the given IP for the given subdomain. Easy
If you want to spin up your own N8N container, you can use the below link to Hostinger VPS. Since it is an affiliate link, you help us creating free content like this post
https://www.hostinger.de/cart?product=vps%3Avps_kvm_4&period=12&referral_type=cart_link&REFERRALCODE=ON8OLIVERFYA&referral_id=01986f3b-e7f5-73e7-a8cf-2b210f485c0d
<img src="https://OD8N.com/images/hostinger.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></span></button>
</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>