new chat url

public/buyModal.js

@@ -0,0 +1,220 @@
+const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3";
+
+function createModal() {
+    const modal = document.createElement("div");
+    modal.id = "buyNowModal";
+    modal.style.position = "fixed";
+    modal.style.top = "0";
+    modal.style.left = "0";
+    modal.style.width = "100%";
+    modal.style.height = "100%";
+    modal.style.backgroundColor = "rgba(0,0,0,0.6)";
+    modal.style.display = "none";
+    modal.style.justifyContent = "center";
+    modal.style.alignItems = "center";
+    modal.style.zIndex = "1000";
+
+    modal.innerHTML = `
+        <div style="
+            background: #ffffff; 
+            padding: 40px 30px; 
+            border-radius: 16px; 
+            max-width: 500px; 
+            width: 90%; 
+            position: relative; 
+            font-family: 'Arial', sans-serif; 
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        ">
+            <span id="closeModal" style="
+                position: absolute; 
+                top: 15px; 
+                right: 20px; 
+                cursor: pointer; 
+                font-weight: bold; 
+                font-size: 24px;
+                color: #555;
+            ">&times;</span>
+            
+            <h2 style="margin-bottom: 15px; font-size: 24px; color: #333;">Order Details</h2>
+            <p id="productText" style="margin-bottom: 25px; font-weight: 500; color: #555;"></p>
+
+            <form id="buyForm" style="display: flex; flex-direction: column; gap: 15px;">
+                
+                <!-- Hidden select, shown only if product starts with "_" -->
+                <select name="location" id="locationSelect" required style="
+                    display: none;
+                    padding: 12px 15px; 
+                    font-size: 16px; 
+                    border: 1px solid #ccc; 
+                    border-radius: 8px; 
+                    outline: none;
+                ">
+                    <option value="">Select Location</option>
+                    <option value="Boston">US, Boston</option>
+                    <option value="Manchester">UK, Manchester</option>
+                    <option value="Mumbai">IN, Mumbai</option>
+                    <option value="Saopaulo">BR, Sao Paulo</option>
+                    <option value="meppel">NL, Meppel</option>
+
+                </select>
+
+                <input type="text" name="name" placeholder="Name" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                <input type="text" name="company" placeholder="Company" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                <input type="text" name="country" placeholder="Country" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                <input type="text" name="street" placeholder="Street" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+               <div style="display: flex; gap: 10px;">
+                  <input type="text" name="zip" placeholder="ZIP" required style="max-width: 100px; flex: 1 1 0; padding: 12px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px;">
+                  <input type="text" name="town" placeholder="Town" required style="flex: 2 1 0; padding: 12px 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px;">
+                </div>
+                
+                <input type="email" name="email" placeholder="Email" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                
+                <input type="hidden" name="product">
+                <input type="hidden" name="price">
+
+                <button id="submitBuy" type="submit" style="
+                    padding: 14px; 
+                    background: #007BFF; 
+                    color: #fff; 
+                    border: none; 
+                    border-radius: 8px; 
+                    cursor: pointer; 
+                    font-size: 18px; 
+                    font-weight: bold;
+                    transition: background 0.3s;
+                ">Send Order</button>
+            </form>
+
+            <div id="confirmation" style="
+                display: none;
+                margin-top: 20px;
+                padding: 20px;
+                background-color: #e6ffed;
+                color: #056608;
+                border-radius: 12px;
+                text-align: center;
+                font-weight: 500;
+            ">
+                <p>Thank you for your purchase! 🎉</p>
+                <button id="closeConfirmation" style="
+                    margin-top: 10px;
+                    padding: 10px 20px;
+                    background: #007BFF;
+                    color: #fff;
+                    border: none;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background 0.3s;
+                ">Close</button>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    // Close modal
+    document.getElementById("closeModal").onclick = () => { document.getElementById("buyNowModal").style.display = "none"; };
+    document.getElementById("closeConfirmation").onclick = () => { 
+      document.getElementById("confirmation").style.display = "none"; 
+      document.getElementById("buyNowModal").style.display = "none"; 
+    };
+    modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
+
+    return modal;
+}
+
+function openModal(productHref) {
+    const modal = document.getElementById("buyNowModal");
+    modal.style.display = "flex";
+
+    // Reset form display for repeated orders
+    const form = modal.querySelector("#buyForm");
+    const confirmation = modal.querySelector("#confirmation");
+    form.style.display = "flex";       // show form
+    confirmation.style.display = "none"; // hide confirmation
+
+
+
+    let product = productHref;
+    let price = "";
+    if (productHref.includes("/")) {
+        const parts = productHref.split("/").filter(Boolean);
+        product = parts[parts.length - 2] || "Product";
+        price = parts[parts.length - 1] || "0";
+    }
+    // Show/hide location select
+    const locationSelect = document.getElementById("locationSelect");
+    if (product.startsWith("_")) {
+        locationSelect.style.display = "block";
+        locationSelect.setAttribute("required", "true");
+    } else {
+        locationSelect.style.display = "none";
+        locationSelect.removeAttribute("required");
+        locationSelect.value = ""; // reset
+    }
+    product = product.replace(/_/g, ""); // This needs to be after the locationSelect show ;)
+
+    modal.querySelector('input[name="product"]').value = product;
+    modal.querySelector('input[name="price"]').value = price;
+    modal.querySelector("#productText").textContent = `You will buy ${product} for $${price}.`;
+}
+
+
+function handleFormSubmit() {
+    const form = document.getElementById("buyForm");
+    const confirmation = document.getElementById("confirmation");
+
+    if (!form) {
+        console.error("Form not found!");
+        return;
+    }
+
+    form.addEventListener("submit", async (e) => {
+        console.log("handler");
+        e.preventDefault();
+
+        const data = {};
+        new FormData(form).forEach((value, key) => (data[key] = value));
+
+        try {
+            const res = await fetch(WEBHOOK_URL, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            });
+
+            if (res.ok) {
+                form.style.display = "none";
+                confirmation.style.display = "block";
+                form.reset();
+            } else {
+                alert("Failed to submit form.");
+            }
+        } catch (err) {
+            console.error(err);
+            alert("Error submitting form.");
+        }
+    });
+}
+
+function attachButtons() {
+    const buttons = Array.from(document.querySelectorAll("button, a"));
+    buttons.forEach(btn => {
+        const text = btn.textContent.trim();
+        if (text === "Buy Now" || text === "Book Now") {
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                const href = btn.getAttribute("href") || btn.dataset.product || "Unknown/0";
+                openModal(href);
+            });
+        }
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    createModal();
+    handleFormSubmit();
+    attachButtons();
+});
+

public/index.html.template

@@ -12,6 +12,9 @@
 
   <script>const configUrl = `https://od8n.com/widget/custom/od8n.json`;</script>
   <script src="widget/widget.js"></script>
+  <script src="buyModal.js"></script>
+
+
   <link rel="stylesheet" href="widget/custom/od8n.css">
 
 
@@ -153,26 +156,133 @@
         </button>
         <ul>
           <li><a href="#home">Home</a></li>
-          <li><a href="#packages">packages</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">
+  <div class="hero-left">
     <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 — you will get 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>
+    <button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">
+      Explore packages
+    </button>
+  </div>
+
+  <div class="hero-right">
+    <div id="my-signup-widget"></div>
+    <script src="https://od8n.com/widget-signup/widget.js" 
+            data-affiliate="od8n"></script>
+  </div>
 </section>
+
+
+
   </header>
 
+
+ 	<section id="workshops" class="workshops">
+	  <h2 class="section-header">Startup Workshops</h2>
+	<p class="section-subtitle">
+	  We bring your business from zero to ERP and AI in just three months:
+	</p>
+	<ul class="workshop-highlights">
+	  <li><strong>6 interactive 2-hour sessions</strong> with our expert instructors</li>
+	  <li><strong>Hands-on topics:</strong> "First Configuration ODOO", "Sales Module", "Build your Website with ODOO", "CRM", "Automations with AI and N8N"</li>
+	  <li><strong>Practical system setup:</strong> Work directly on your ERP so you see real results immediately</li>
+	  <li><strong>Free tools included:</strong> ODOO and N8N for one year</li>
+	  <li><strong>Exclusive alumni chat group:</strong> Stay connected, share tips, and get support</li>
+	</ul>
+	
+	  <div class="workshop-list container">
+	
+	    <div class="workshop">
+	      <div class="badge next">Next</div>
+	      <h3>Class Q1/2026</h3>
+	      <p><strong>Language:</strong> German</p>
+	      <p><strong>Places available:</strong> 4</p>
+	      <a href="/agenda/q1-2026.pdf" class="agenda-link">Download Agenda</a>
+	        <div class="workshop-action">
+	          <span class="price">$790.00 <br> per Person</span>
+	          <a href="https://Q1-2026/790.00" 
+	            target="_blank" 
+	            class="btn-secondary">
+	            Book Now
+	          </a>
+	
+	        </div>
+	    </div>
+	
+	    <div class="workshop">
+	      <h3>Class Q2/2026</h3>
+	      <p><strong>Language:</strong> English</p>
+	      <p><strong>Places available:</strong> 5</p>
+	      <a href="/agenda/q2-2026.pdf" class="agenda-link">Download Agenda</a>
+	      <div class="workshop-action">
+	        <span class="price">$790.00 <br> per Person</span>
+	          <a href="https://Q2-2026/790.00" 
+	            target="_blank" 
+	            class="btn-secondary">
+	            Book Now
+	          </a>
+	
+	
+	
+	      </div>
+	    </div>
+	
+	    <div class="workshop">
+	      <h3>Class Q3/2026</h3>
+	      <p><strong>Language:</strong> German</p>
+	      <p><strong>Places available:</strong> 6</p>
+	      <a href="/agenda/q3-2026.pdf" class="agenda-link">Download Agenda</a>
+	      <div class="workshop-action">
+	        <span class="price">$790.00 <br> per Person</span>
+	         <a href="https://Q3-2026/790.00" 
+	            target="_blank" 
+	            class="btn-secondary">
+	            Book Now
+	          </a>
+	
+	
+	      </div>
+	    </div>
+	
+	    <div class="workshop">
+	      <h3>Class Q4/2026</h3>
+	      <p><strong>Language:</strong> English</p>
+	      <p><strong>Places available:</strong> 6</p>
+	      <a href="/agenda/q4-2026.pdf" class="agenda-link">Download Agenda</a>
+	      <div class="workshop-action">
+	        <span class="price">$790.00 <br> per Person</span>
+	          <a href="https://Q4-2026/790.00" 
+	            target="_blank" 
+	            class="btn-secondary">
+	            Book Now
+	          </a>
+	
+	
+	      </div>
+	    </div>
+	
+	  </div>
+	</section>
+
+
+
+
+
   <!-- Product Packages -->
   <section id="packages" class="packages">
     <h2 class="section-header">Service Packs</h2>

public/style.css

@@ -114,12 +114,22 @@ header.hero {
 }
 
 .hero-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 40px; /* space between text and widget */
   max-width: 80%;
   margin: 0 auto;
   padding-top: 200px;
   padding-bottom: 150px;
 }
+.hero-left {
+  flex: 1; /* text column grows */
+}
 
+.hero-right {
+  flex: 0 0 420px; /* fixed width for widget */
+}
 header.hero h1 {
   font-size: 3rem;
   margin-bottom: 20px;
@@ -891,3 +901,156 @@ footer a:hover {
 .blog-teaser > [class*="-tag"]:hover {
   opacity: 0.9;
 }
+
+/* Workshops */
+.workshops {
+  text-align: center;
+  margin-top: 50px;
+}
+.workshops .section-subtitle {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 1rem;
+}
+
+.workshop-highlights {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  color: #7a5a40; /* warm tone for consistency with workshop theme */
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.workshop-highlights li {
+  position: relative;
+  padding-left: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.workshop-highlights li::before {
+  content: "✓"; /* checkmark for a positive, actionable feel */
+  position: absolute;
+  left: 0;
+  color: #ff7a00; /* warm accent matching Buy Now button */
+  font-weight: bold;
+}
+
+
+.workshops .workshop-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  gap: 15px;
+}
+
+.workshops .workshop {
+  background: #fff8f0; /* soft peach background */
+  border: 1px solid #ffd8b5; /* warm border */
+  border-radius: 8px;
+  padding: var(--spacing-lg) var(--spacing-md);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 20%;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  transition: transform 0.3s;
+  margin-bottom: 10px;
+  text-align: left;
+}
+
+.workshops .workshop:hover {
+  transform: translateY(-5px);
+  box-shadow: rgba(255, 165, 50, 0.25) 0px 20px 40px -10px,
+              rgba(0, 0, 0, 0.15) 0px 10px 20px -10px;
+}
+
+.workshops .workshop h3 {
+  font-size: 1.25rem;
+  margin-bottom: var(--spacing-sm);
+  color: #ff7a00; /* warm heading color */
+}
+
+.workshops .workshop p {
+  color: #7a5a40; /* dark warm tone for text */
+  font-size: 0.95rem;
+  margin-bottom: var(--spacing-md);
+  line-height: 1.5;
+}
+
+.workshops .btn-secondary {
+  margin-top: 1rem;
+  align-self: start;
+  background-color: #ff7a00; /* button warm accent */
+  color: #fff;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.workshops .btn-secondary:hover {
+  background-color: #e56a00;
+}
+
+/* Optional: Featured Workshop Styling */
+.workshops .workshop.featured {
+  border: 1px solid #ff7a00;
+  background-color: #fff0e0;
+}
+
+.workshops .workshop .badge {
+  position: absolute;
+  top: -12px;
+  left: 16px;
+  background-color: #ff7a00;
+  color: #fff;
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 12px;
+}
+/* Workshop Download Agenda Link */
+.workshops .agenda-link {
+  display: inline-block;
+  margin-bottom: 1rem;
+  color: #ff7a00;          /* warm accent color */
+  text-decoration: none;    /* remove default underline */
+  font-weight: 600;         /* slightly bold */
+  font-size: 0.95rem;
+  transition: color 0.3s, text-decoration 0.3s;
+  cursor: pointer;
+}
+
+.workshops .agenda-link:hover {
+  color: #e56a00;           /* darker warm tone on hover */
+  text-decoration: underline; /* add underline on hover */
+}
+/* Workshop Action Area */
+.workshops .workshop-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1rem;
+  gap: 1rem;
+}
+
+.workshops .workshop-action .price {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #ff7a00; /* warm accent to match workshop theme */
+}
+
+.workshops .workshop-action .btn-secondary {
+  flex-shrink: 0;
+}
+a.btn-secondary {
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+

public/tryNow.js

@@ -0,0 +1,167 @@
+const TRYNOW_WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
+
+function tryNow_createModal() {
+    const modal = document.createElement("div");
+    modal.id = "trynowModal";
+    modal.style.position = "fixed";
+    modal.style.top = "0";
+    modal.style.left = "0";
+    modal.style.width = "100%";
+    modal.style.height = "100%";
+    modal.style.backgroundColor = "rgba(0,0,0,0.6)";
+    modal.style.display = "none";
+    modal.style.justifyContent = "center";
+    modal.style.alignItems = "center";
+    modal.style.zIndex = "1000";
+
+    modal.innerHTML = `
+        <div style="
+            background: #ffffff; 
+            padding: 40px 30px; 
+            border-radius: 16px; 
+            max-width: 400px; 
+            width: 90%; 
+            position: relative; 
+            font-family: 'Arial', sans-serif; 
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        ">
+            <span id="trynowCloseModal" style="
+                position: absolute; 
+                top: 15px; 
+                right: 20px; 
+                cursor: pointer; 
+                font-weight: bold; 
+                font-size: 24px;
+                color: #555;
+            ">&times;</span>
+            
+            <h2 style="margin-bottom: 20px; font-size: 24px; color: #333;">Order Details</h2>
+
+            <form id="trynowForm" style="display: flex; flex-direction: column; gap: 15px;">
+                <input type="email" name="email" placeholder="Email" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+
+                <select name="location" id="trynowLocationSelect" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                    <option value="">Select Location</option>
+                    <option value="Boston">Boston</option>
+                    <option value="Manchester">Manchester</option>
+                    <option value="Mumbai">Mumbai</option>
+                    <option value="Saopaulo">Sao Paulo</option>
+                </select>
+
+                <select name="product" required style="padding: 12px 15px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;">
+                    <option value="odoo_19" selected>ODOO</option>
+                    <option value="N8N">n8n</option>
+                </select>
+
+                <button type="submit" style="
+                    padding: 14px; 
+                    background: #007BFF; 
+                    color: #fff; 
+                    border: none; 
+                    border-radius: 8px; 
+                    cursor: pointer; 
+                    font-size: 18px; 
+                    font-weight: bold;
+                    transition: background 0.3s;
+                ">Start free Trial</button>
+            </form>
+
+            <div id="trynowConfirmation" style="
+                display: none;
+                margin-top: 20px;
+                padding: 20px;
+                background-color: #e6ffed;
+                color: #056608;
+                border-radius: 12px;
+                text-align: center;
+                font-weight: 500;
+            ">
+                <p>Thank you for your submission! 🎉</p>
+                <button id="trynowCloseConfirmation" style="
+                    margin-top: 10px;
+                    padding: 10px 20px;
+                    background: #007BFF;
+                    color: #fff;
+                    border: none;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    font-size: 16px;
+                    transition: background 0.3s;
+                ">Close</button>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    // Close modal handlers
+    document.getElementById("trynowCloseModal").onclick = () => { modal.style.display = "none"; };
+    document.getElementById("trynowCloseConfirmation").onclick = () => { 
+        document.getElementById("trynowConfirmation").style.display = "none"; 
+        modal.style.display = "none"; 
+    };
+    modal.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
+
+    return modal;
+}
+
+function tryNow_handleFormSubmit() {
+    const form = document.getElementById("trynowForm");
+    const confirmation = document.getElementById("trynowConfirmation");
+
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const data = {};
+        new FormData(form).forEach((value, key) => (data[key] = value));
+
+        try {
+            const res = await fetch(TRYNOW_WEBHOOK_URL, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(data)
+            });
+
+            if (res.ok) {
+                form.style.display = "none";
+                confirmation.style.display = "block";
+                form.reset();
+            } else {
+                alert("Failed to submit form.");
+            }
+        } catch (err) {
+            console.error(err);
+            alert("Error submitting form.");
+        }
+    });
+}
+
+function tryNow_attachButtons() {
+    const buttons = Array.from(document.querySelectorAll("a, button"));
+    buttons.forEach(btn => {
+        if (btn.textContent && btn.textContent.trim() === "Try Now") {
+            btn.addEventListener("click", (e) => {
+                e.preventDefault();
+                const modal = document.getElementById("trynowModal");
+                if (modal) {
+                    modal.style.display = "flex";
+                    // Reset modal state
+                    const form = document.getElementById("trynowForm");
+                    const confirmation = document.getElementById("trynowConfirmation");
+                    if (form && confirmation) {
+                        form.style.display = "flex";
+                        confirmation.style.display = "none";
+                    }
+                }
+            });
+        }
+    });
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    tryNow_createModal();
+    tryNow_handleFormSubmit();
+    tryNow_attachButtons();
+});
+
+

public/widget-signup/widget.js

@@ -0,0 +1,171 @@
+(function() {
+  console.log("WIDGET COOL")
+  const currentScript = document.currentScript;
+  const affiliateFromAttr = currentScript.getAttribute("data-affiliate");
+
+  const params = new URLSearchParams(window.location.search);
+  const affiliateFromURL = params.get("affiliate");
+
+  const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";
+
+  const container = document.getElementById("my-signup-widget");
+  if (!container) return;
+
+  const shadow = container.attachShadow({ mode: "open" });
+
+  const styles = `
+    :host {
+      all: initial;
+      font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
+      display: block;
+      max-width: 420px;
+      margin: 0 auto;
+    }
+
+    .card {
+      background: linear-gradient(135deg,#ffffff 0%,#f7fafc 60%);
+      border: 1px solid #e6e8eb;
+      border-radius: 16px;
+      box-shadow: 0 6px 20px rgba(16,24,40,.08);
+      padding: 20px;
+    }
+
+
+    .header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+    .icon { width: 36px; height: 36px; border-radius: 12px;
+      display: flex; align-items: center; justify-content: center;
+      font-weight: 700; color: #fff;
+    }
+    .title { font-size: 18px; line-height: 1.2; font-weight: 800; color: #0f172a; }
+    .subtitle { font-size: 13px; color: #475569; }
+    label, .label { display: block; font-size: 12px; color: #334155; font-weight: 600; margin: 12px 0 6px; }
+
+    .options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
+    .option { flex: 1; display: flex; align-items: center; gap: 8px;
+      border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px;
+      cursor: pointer; background: #fff;
+    }
+    input[type="radio"] { accent-color: #3b82f6; margin: 0; }
+
+    select, input[type="email"], .affiliate-display {
+      width: 100%;
+      background: #fff;
+      border: 1px solid #cbd5e1;
+      border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 14px;
+      color: #0f172a;
+      outline: none;
+      box-sizing: border-box;
+    }
+    .affiliate-display { background: #f8fafc; }
+
+    button {
+      margin-top: 16px;
+      width: 100%;
+      border: none;
+      border-radius: 12px;
+      padding: 12px 14px;
+      font-size: 15px;
+      font-weight: 800;
+      background: linear-gradient(135deg,#22c55e,#3b82f6);
+      color: #fff;
+      cursor: pointer;
+      box-shadow: 0 8px 18px rgba(37,99,235,.25);
+    }
+
+    .footnote { margin-top: 10px; font-size: 11px; color: #64748b; text-align: center; }
+
+    .status {
+      padding: 20px;
+      font-size: 15px;
+      color: #0f172a;
+      background: linear-gradient(135deg,#f0f9ff,#e0f2fe);
+      border: 1px solid #cbd5e1;
+      border-radius: 12px;
+      text-align: center;
+      box-shadow: 0 4px 12px rgba(16,24,40,.08);
+      word-break: break-word;
+    }
+    .status.success { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #065f46; }
+    .status.error { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #991b1b; }
+  `;
+
+  const html = `
+    <form class="card">
+      <div class="header">
+        <img class="icon" src="https://sp01.odoo4projects.com/hugo/live/4.svg">
+        <div>
+          <div class="title">Try Managed ODOO or n8n - 4 weeks Free</div>
+          <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
+        </div>
+      </div>
+      <div class="label">Product</div>
+      <div class="options">
+        <label class="option">
+          <input type="radio" name="product" value="odoo_19" required checked>
+          <span>ODOO</span>
+        </label>
+        <label class="option">
+          <input type="radio" name="product" value="N8N" required>
+          <span>N8N</span>
+        </label>
+      </div>
+      <label for="location">Location</label>
+      <select id="location" name="location" required>
+        <option value="" disabled>Select a region</option>
+        <option value="manchester">UK, Manchester</option>
+        <option value="boston">US, Boston</option>
+        <option value="mumbai">IN, Mumbai</option>
+        <option value="saopaulo">BR, Sao Paulo</option>
+        <option value="Meppel">NL, Meppel</option>
+      </select>
+
+      <label for="email">Work Email</label>
+      <input id="email" name="email" type="email" required placeholder="you@company.com">
+
+      <input type="hidden" name="affiliate_code" value="${affiliateCode}">
+
+      <button type="submit" class="plausible-event-name=Trial">Start 4-Week Free Trial</button>
+
+      <div class="footnote">
+        By submitting, you agree to the T&C of ODOO4projects.
+      </div>
+    </form>
+
+    <div id="status" class="status" style="display:none;"></div>
+  `;
+
+  shadow.innerHTML = `<style>${styles}</style>${html}`;
+
+  const form = shadow.querySelector("form");
+  const statusEl = shadow.getElementById("status");
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    statusEl.style.display = "block";
+    statusEl.textContent = "Submitting...";
+    statusEl.className = "status";
+
+    try {
+      const formData = new FormData(form);
+      const res = await fetch("https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a", {
+        method: "POST",
+        body: formData,
+      });
+
+      const text = await res.text();
+
+      // Hide the form
+      form.style.display = "none";
+
+      // Show the webhook response nicely
+      statusEl.textContent = text;
+      statusEl.className = "status success";
+    } catch (err) {
+      statusEl.textContent = "❌ Failed to submit. Please try again.";
+      statusEl.className = "status error";
+    }
+  });
+})();
+

public/widget/custom/brandize.json

@@ -1,5 +1,5 @@
 {
-  "api": "https://brandize.n8n.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat",
+  "api": "https://002-001-433cd554-0d64-4834-8500-3aebea781003.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat",
   "preamble": "Welcome to Brandize",
   "widgetHTML": "<button id='cw-chatToggle' aria-label='Toggle chat widget' type='button'>\n  <img height='50px' src='widget/custom/brandize.svg' alt='Logo'></button>\n<div id='cw-chatWidget' style='display: none;' role='region' aria-live='polite' aria-label='Chat widget'>\n  <div class='logo-container'><img src='widget/custom/brandize.svg' alt='Logo' /><button id='callBtn' class='button'>📞</button></div>\n  <div class='header'>Support</div>\n  <div id='cw-status' style='transition: all 0.3s ease; overflow: hidden;'></div>\n  <div id='cw-chatMessages' style='max-height: 200px; overflow-y: auto; padding: 10px;'></div>\n  <form id='cw-chatForm' autocomplete='off'>\n    <input type='text' id='cw-chatInput' placeholder='Type your message...' required autocomplete='off' />\n    <button type='submit'>Send</button>\n  </form>\n</div>"
 }

serve

@@ -1,4 +1,5 @@
 #!/bin/bash
 
 pip install livereload
+cd public
 python ../serve.py public/