From 098e2758711f757ab8bd21df95e335f3496064d7 Mon Sep 17 00:00:00 2001
From: hil <hil@OD8N.com>
Date: Wed, 1 Oct 2025 10:35:32 +0000
Subject: [PATCH] Update Posts

---
 public/index.html | 771 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 771 insertions(+)

diff --git a/public/index.html b/public/index.html
index b357c34..c9bdd71 100644
--- a/public/index.html
+++ b/public/index.html
@@ -276,6 +276,777 @@
     <h2 class="section-header">Latest Blog Posts</h2>
   <div class="blog-list container">
   
+    <div class="blog-teaser blog-badge-red">
+      <div class="blog-badge-red-tag">Tutorial</div>
+      <h3 class="blog-title">From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n</h3>
+      <small class="blog-date">2025-07-30</small>
+      <div class="blog-snippet">
+        
+      </div>
+      <div class="blog-full-content" style="display:none;">
+        <table class="table table-bordered" data-oe-version="2.0" data-last-history-steps="3287089116777752"><tbody><tr><td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could &lt;strong&gt;guide users through an entire procurement flow&lt;/strong&gt; and end with a PayPal payment button, ready to go?
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>In this tutorial, we’ll walk through the key steps we used to build a &lt;strong&gt;dynamic chat widget&lt;/strong&gt; using &lt;code&gt;n8n&lt;/code&gt;, 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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;h2&gt;💡 The Real Magic: State-Aware Chat Responses&lt;/h2&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>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 &lt;strong&gt;state object&lt;/strong&gt; that tracks context and next steps.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>&lt;p&gt;Here’s what our return looks like from the backend:&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;pre&gt;&lt;code&gt;return {
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  json: {
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>    output: output_,
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>    state: state_
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  }
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>};&lt;/code&gt;&lt;/pre&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;h2&gt;🛒 Embedding the Product ID in State&lt;/h2&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>Once the conversation has gathered enough information from the user (product type, quantity, shipping address, etc.), we instruct the AI agent to &lt;strong&gt;embed the product ID directly into the state object&lt;/strong&gt;.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>This ID is then parsed by the frontend to dynamically display the appropriate &lt;strong&gt;PayPal payment button&lt;/strong&gt;, configured for the selected product and amount.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;h2&gt;🔧 Under the Hood: What We Used&lt;/h2&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;ul&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  &lt;li&gt;&lt;strong&gt;n8n&lt;/strong&gt; for workflow logic and webhook handling&lt;/li&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  &lt;li&gt;&lt;strong&gt;Custom HTML + JS widget&lt;/strong&gt; to handle frontend interaction&lt;/li&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  &lt;li&gt;&lt;strong&gt;OpenAI Agent&lt;/strong&gt; with system prompts to guide the process&lt;/li&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  &lt;li&gt;&lt;strong&gt;PayPal API&lt;/strong&gt; for seamless payment integration&lt;/li&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/ul&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;h2&gt;✨ Bonus: A Process Wizard&lt;/h2&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;h2&gt;📚 Want to Try This Yourself?&lt;/h2&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>Head over to our &lt;a href="/"&gt;homepage&lt;/a&gt; to read more blog posts like this and explore our implementation in detail.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>Or, if you'd like to help us out with a little SEO love, just Google &lt;strong&gt;"N8N ODOO API"&lt;/strong&gt; and click on our homepage: &lt;strong&gt;OD8N&lt;/strong&gt;. As a reward, we’ve got an in-depth breakdown of the full implementation waiting for you!
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>&lt;p&gt;Here’s a full video walkthrough of the dynamic chat widget in action:&lt;/p&gt;
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>💡 The Real Magic: State-Aware Chat Responses
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>Here’s what our return looks like from the backend:
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>return {
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  json: {
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>    output: output_,
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>    state: state_
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>  }
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>};
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>🛒 Embedding the Product ID in State
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>This ID is then parsed by the frontend to dynamically display the appropriate PayPal payment button, configured for the selected product and amount.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>It’s a smooth handoff: the chat does the heavy lifting, and the UI reacts based on structured, predictable metadata.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>🔧 Under the Hood: What We Used
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>n8n for workflow logic and webhook handling
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>Custom HTML + JS widget to handle frontend interaction
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>OpenAI Agent with system prompts to guide the process
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>PayPal API for seamless payment integration
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>✨ Bonus: A Process Wizard
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>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.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>📚 Want to Try This Yourself?
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td>Head over to our homepage to read more blog posts like this and explore our implementation in detail.
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td>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!
+</td>
+						</tr>
+						
+						
+						<tr>
+							</tr></tbody></table><table class="table table-bordered"><tbody><tr><td><div><br></div></td>
+							
+							<td><div><br></div></td></tr></tbody></table><div><br></div>
+        
+      </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">Exciting News: Our ODOO4projects Hosting is Now Upgraded to Odoo V19!</h3>