utm

public/tryModal.js

@@ -1,5 +1,44 @@
 const TRYNOW_WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
 
+// --- Helper: Get URL parameters ---
+function getUrlParams() {
+    const params = {};
+    window.location.search
+        .substring(1)
+        .split("&")
+        .forEach(pair => {
+            if (pair) {
+                const [key, value] = pair.split("=");
+                params[decodeURIComponent(key)] = decodeURIComponent(value || "");
+            }
+        });
+    return params;
+}
+
+// --- Add UTM fields to form ---
+function addUtmFields(form) {
+    const utmParams = ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"];
+    const urlParams = getUrlParams();
+
+    const defaults = {
+        utm_source: "homepage",
+        utm_medium: "direct",
+        utm_campaign: "none"
+    };
+
+    utmParams.forEach(param => {
+        let input = form.querySelector(`input[name="${param}"]`);
+        if (!input) {
+            input = document.createElement("input");
+            input.type = "hidden";
+            input.name = param;
+            form.appendChild(input);
+        }
+        input.value = urlParams[param] || defaults[param] || "";
+    });
+}
+
+// --- Create modal ---
 function tryNow_createModal() {
     const modal = document.createElement("div");
     modal.id = "trynowModal";
@@ -92,6 +131,10 @@ function tryNow_createModal() {
 
     document.body.appendChild(modal);
 
+    // Add UTM fields after form exists
+    const form = modal.querySelector("#trynowForm");
+    addUtmFields(form);
+
     // Close modal handlers
     document.getElementById("trynowCloseModal").onclick = () => { modal.style.display = "none"; };
     document.getElementById("trynowCloseConfirmation").onclick = () => { 
@@ -103,12 +146,17 @@ function tryNow_createModal() {
     return modal;
 }
 
+// --- Handle form submission ---
 function tryNow_handleFormSubmit() {
     const form = document.getElementById("trynowForm");
     const confirmation = document.getElementById("trynowConfirmation");
 
     form.addEventListener("submit", async (e) => {
         e.preventDefault();
+
+        // Update UTM fields in case URL changed
+        addUtmFields(form);
+
         const data = {};
         new FormData(form).forEach((value, key) => (data[key] = value));
 
@@ -133,6 +181,7 @@ function tryNow_handleFormSubmit() {
     });
 }
 
+// --- Attach "Try Now" buttons ---
 function tryNow_attachButtons() {
     const buttons = Array.from(document.querySelectorAll("a, button"));
     buttons.forEach(btn => {
@@ -142,12 +191,14 @@ function tryNow_attachButtons() {
                 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";
+                        addUtmFields(form); // refresh UTM fields each open
                     }
                 }
             });
@@ -155,11 +206,10 @@ function tryNow_attachButtons() {
     });
 }
 
-
+// --- Initialize ---
 document.addEventListener("DOMContentLoaded", () => {
     tryNow_createModal();
     tryNow_handleFormSubmit();
     tryNow_attachButtons();
 });
 
-

public/tryModal.min.js

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