rivia 0.0.34 → 0.0.36

package/dist/index.js

@@ -2,12 +2,9 @@
 function slugify(text) {
   return "/" + String(text || "").trim().toLowerCase().replace(/[^a-z0-9\-_\s]/g, "").replace(/\s+/g, "-");
 }
-function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id) {
+function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, customCSS = "", user_var, checklist_id) {
   let usrn = targetingData?.targeting_data?.usernames ?? "Not Set";
   let inc = targetingData?.targeting_data?.inclusion ?? "Not Set";
-  if (sessionStorage.getItem("dismissedChecklist") == "true") {
-    return;
-  }
   const mymap = /* @__PURE__ */ new Map();
   for (let i2 = 0; i2 < usrn.length; i2++) {
     mymap.set(usrn[i2], true);
@@ -82,9 +79,9 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
     user_var1 = "User_" + Math.random().toString(36).substring(2, 8);
     sessionStorage.setItem(user_var, user_var1);
   }
-  const backendUrl = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+  const backendUrl = `http://localhost:5000/clients/${checklist_id}/${user_var1}`;
   async function getUserProgress22() {
-    const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+    const backendUrl2 = `http://localhost:5000/clients/${checklist_id}/${user_var1}`;
     try {
       const res = await fetch(backendUrl2, { credentials: "include" });
       if (!res.ok) console.warn(`GET failed: ${res.status}`);
@@ -122,7 +119,7 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
   }
   storedVisited = sessionStorage.getItem("onboardingVisited");
   async function getUserProgress22() {
-    const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+    const backendUrl2 = `http://localhost:5000/clients/${checklist_id}/${user_var1}`;
     try {
       const res = await fetch(backendUrl2, { credentials: "include" });
       if (!res.ok) console.warn(`GET failed: ${res.status}`);
@@ -181,7 +178,8 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
         backendUrl,
         progressData,
         visitedPages,
-        cleanUrlItems
+        cleanUrlItems,
+        customCSS
       );
     });
   } else {
@@ -240,85 +238,252 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       backendUrl,
       [],
       visitedPages,
-      cleanUrlItems
+      cleanUrlItems,
+      customCSS
     );
   }
 }
-async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id, cssConfig = {}, items = [], storedVisited = [], backendUrl = "", progressData = {}, visitedPages = {}, cleanUrlItems = []) {
+async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id, cssConfig = {}, items = [], storedVisited = [], backendUrl = "", progressData = {}, visitedPages = {}, cleanUrlItems = [], custom_css = "") {
   console.log("inside fetchWithTimeout", user_var);
   if (!user_var)
     return;
   let i = 0;
   const stepsHTML = items.map((it) => {
-    const border = it.color || cssConfig.borderColor1;
-    const bg = it.color || cssConfig.lowerBackgroundColor;
     return `
-  <div id="${it.id}"
-  class="onboard-step"
-  style="position: relative; margin-bottom:16px; display:flex; align-items:flex-start; cursor:pointer; background-color:${bg}; padding:8px; border-radius:6px;">
-  
-  <!-- left vertical selector bar -->
-  <div class="start-select"
-  style="position:absolute; top:0; left:-18px; width:10px; height:120%; background:rgba(247,143,7,0.9); border-radius:4px 0 0 4px; display:none;">
-  </div>
-  
-  <div class="onboard-circle"
-  style="min-width:16px; min-height:16px; width:16px; height:16px; border-radius:50%;
-  border:2px solid ${cssConfig.lowerCheckboxColor}; margin-right:10px; box-sizing:border-box;"></div>
+  <div id="${it.id}" class="onboard-step">
+  <div class="start-select"></div>
+
+  <div class="onboard-circle"></div>
   
-  <div class="onboard-text"
-  style=" font-family:${cssConfig.fontFamily}; font-size:${cssConfig.fontSize};">
-    <strong style="color:${cssConfig.lowerHeadingColor};">${it.title}</strong><br>
-    <small style="color:${cssConfig.lowerBodyColor};">${it.description || ""}</small>
+  <div class="onboard-text">
+  <strong class="onboard-title">${it.title}</strong><br />
+  <small class="onboard-desc">${it.description || ""}</small>
       </div>
       </div>
-      ${i++ < items.length - 1 ? '<hr style="color: #9d9d9dff">' : ""}
-      `;
+    ${i++ < items.length - 1 ? '<hr class="onboard-divider" />' : ""}
+    `;
   }).join("");
   const labelHTML = `
-    <div id="checklistRoot" 
-    style="max-width:500px; margin:auto; font-family:${cssConfig.fontFamily}; font-size:${cssConfig.fontSize}; color:${cssConfig.textColor}; position: relative;">
-
-    <!-- Close button -->
-    <button id="checklistCloseBtn" 
-      style="
-      position: absolute;
-      top: 8px;
-      left: 370px;
-      background: transparent;
-      border: none;
-      font-size: 28px;
-      cursor: pointer;
-      color: ${cssConfig.textColor};
-      line-height: 1;
-    ">
-    &times;
-    </button>
-
-    <div style="background-color:${cssConfig.backgroundColor}; padding:16px; border-radius:8px 8px 0 0;">
-    <h3 style="margin:0;">${topTitle}</h3>
-    <p style="margin-top:8px;color: ${cssConfig.subtitleColor};">${subtitle}</p>
-    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
-    <div id="progressContainer" style="display: flex; gap: 4px; width: 300%; width: 800px; height: 10px;"></div>
+  <div id="checklistRoot" class="checklist-root">
+  <button id="checklistCloseBtn" class="checklist-close">&times;</button>
+  
+  <div class="checklist-header">
+  <h3 class="checklist-title">${topTitle}</h3>
+  <p class="checklist-subtitle">${subtitle}</p>
+  
+  <div class="checklist-progress">
+  <div id="progressContainer" style="display: flex; gap: 4px; width: 300px;  height: 10px;"></div>
     <span id="progressFraction" style="margin-left: 0px; font-size: 13px; color: ${cssConfig.textColor}; min-width: 20px; text-align: right;">0/0 </span>
+    
+        </div>
+        
+        </div>
+        
+        <div class="checklist-body">
+        ${stepsHTML}
+        <div style="text-align: right; margin-top: 10px; cursor: pointer; color: black; font-size: 12px;" id="dismissChecklist">Dismiss this checklist</div>
+        </div>
     </div>
+    `;
+  function injectChecklistBaseCSS() {
+    if (document.getElementById("rivia-checklist-css")) return;
+    const style2 = document.createElement("style");
+    style2.id = "rivia-checklist-css";
+    style2.textContent = custom_css || `/* Root */
+.checklist-root {
+  max-width: 500px;
+  margin: auto;
+  position: relative;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+}
 
-    </div>
+/* Close button */
+.checklist-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: var(--text-color);
+}
 
-    <div style="border-top:none; border-radius:0 0 8px 8px; padding:16px; background-color:${cssConfig.lowerBackgroundColor}; max-height:340px; overflow:auto;">
-    ${stepsHTML}
-    <div style="text-align: right; margin-top: 10px; cursor: pointer; color: black; font-size: 12px;" id="dismissChecklist">Dismiss this checklist</div>
-    </div>
-    </div>
-`;
-  const label = document.createElement("div");
-  label.id = "route-label";
-  label.innerHTML = labelHTML;
+/* Header */
+.checklist-header {
+  background: var(--header-bg);
+  padding: 16px;
+  border-radius: 8px 8px 0 0;
+}
+
+.checklist-subtitle {
+  margin-top: 8px;
+  color: var(--subtitle-color);
+}
+
+/* Progress */
+.checklist-progress {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.progress-fraction {
+  font-size: 13px;
+}
+
+/* Body */
+.checklist-body {
+  padding: 16px;
+  background: var(--lower-bg);
+  max-height: 340px;
+  overflow: auto;
+  border-radius: 0 0 8px 8px;
+}
+
+/* Steps */
+.onboard-step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--step-bg);
+  margin-bottom: 16px;
+}
+
+.start-select {
+  position: absolute;
+  top: 0;
+  left: -18px;
+  width: 10px;
+  height: 120%;
+  background: rgba(247,143,7,0.9);
+  border-radius: 4px 0 0 4px;
+  display: none;
+}
+
+.onboard-circle {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--checkbox-color, #f78f07);
+  background: transparent;
+  margin-right: 10px;
+  box-sizing: border-box;
+  display: block;
+}
+
+.onboard-title {
+  color: var(--heading-color);
+}
+
+.onboard-desc {
+  color: var(--body-color);
+}
+
+.onboard-divider {
+  border: none;
+  border-top: 1px solid #9d9d9d;
+}
+
+.rivia-launcher {
+  position: fixed;
+  display: block;
+  z-index: 9999;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2);
+  background: var(--launcher-bg);
+  color: var(--launcher-text);
+  font-weight: bold;
+  border-radius: 20px;
+}
+
+.rivia-launcher .launcher-root {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rivia-launcher .launcher-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.rivia-launcher .launcher-title {
+transform: translateY(-20%);
+  position: relative;
+  margin: 0;
+  line-height: 1;
+  text-align: center;
+  padding-left: 28px;
+}
+
+.rivia-launcher .launcher-icon {
+  position: absolute;
+  left: 10px;
+  
+}
+
+.rivia-launcher .launcher-text { font-size:var(--font-size);
+  display: block;
+  width: 100%;
+  padding-left: 5%;
+  text-align: center;
+  pointer-events: none;
+}
+
+.rivia-launcher .launcher-progress-wrap {
+  margin-top: 4px;
+  padding-left: 32px;
+}
+
+/* Text adjustment when progress bar is hidden */
+.rivia-launcher.no-progress .launcher-text {
+  transform: translateY(50%);
+}
+
+.rivia-launcher .launcher-progress {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  padding: 5px;
+  height: 6px;
+  box-sizing: border-box;
+}
+
+.rivia-launcher .launcher-right {
+  flex-shrink: 0;
+  padding-right: 8px;
+}
+
+.rivia-launcher .launcher-fraction {
+  font-size: 13px;
+  white-space: nowrap;
+}`;
+    document.head.appendChild(style2);
+    console.log("inside injectChecklistBaseCSS");
+  }
+  let label = document.getElementById("route-label");
+  if (!label) {
+    label = document.createElement("div");
+    label.id = "route-label";
+    label.innerHTML = labelHTML;
+  }
   const closeElement = label.querySelector(`#checklistCloseBtn`);
   closeElement.addEventListener("click", (e) => {
     e.stopPropagation();
     label.style.opacity = "0";
     label.style.pointerEvents = "none";
+    sessionStorage.setItem("onboardingVisible", "false");
     closeBtn.style.display = "none";
     showBtn.style.display = "block";
   });
@@ -356,39 +521,41 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   });
   function createSlabs(n) {
     const container = label.querySelector("#progressContainer");
+    if (!container) return;
     container.innerHTML = "";
     for (let i2 = 0; i2 < n; i2++) {
       const slab = document.createElement("div");
-      slab.classList.add("slab");
+      slab.className = "slab";
       container.appendChild(slab);
     }
   }
   const style = document.createElement("style");
   style.textContent = `
-.slab {
-  flex: 1;
+  .slab {
+  flex: 1 0 0%;      /* \u{1F512} important */
+  min-width: 5px;
   height: 8px;
   background-color: #ccc;
   border-radius: 4px;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s ease;
   }
   .slab.active {
     background-color: #4caf50;
-    }
-    #progressContainerBtn .slab {
-      height: 5px;
-      }
-      `;
+  }
+  #progressContainerBtn .slab {
+    height: 5px;
+  }
+  `;
   label.appendChild(style);
   function updateProgress(completed) {
     const slabs = label.querySelectorAll(".slab");
     slabs.forEach((slab, index) => {
-      if (index < completed) {
-        slab.classList.add("active");
-      } else {
-        slab.classList.remove("active");
-      }
+      slab.classList.toggle("active", index < completed);
     });
+    const fraction = label.querySelector("#progressFraction");
+    if (fraction) {
+      fraction.textContent = `${completed}/${slabs.length}`;
+    }
   }
   createSlabs(items.length);
   if (storedVisited) updateProgress(storedVisited.length);
@@ -404,7 +571,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     fontSize: cssConfig.fontSize,
     fontFamily: cssConfig.fontFamily,
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
-    width: "90%",
+    width: "400px",
     maxWidth: "400px",
     maxHeight: "500px",
     lineHeight: "1.5",
@@ -415,7 +582,11 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     display: "none",
     pointerEvents: "none"
   });
-  const showBtn = document.createElement("button");
+  let showBtn = document.getElementById("show-tooltip-btn");
+  if (!showBtn) {
+    showBtn = document.createElement("button");
+    showBtn.id = "show-tooltip-btn";
+  }
   function createS(n) {
     const container2 = showBtn.querySelector("#progressContainerBtn");
     if (!container2) return;
@@ -437,108 +608,93 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     });
   }
   showBtn.id = "show-tooltip-btn";
+  showBtn.className = "rivia-launcher";
   const translateStyle = cssConfig.launcherProgressBar ? 'style="transform: translateY(10px);"' : "";
-  const iconHTML = cssConfig.launcherShowIcon ? `<svg width="24" height="24"   ${translateStyle} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  const isRight = cssConfig.launcherPosition === "right";
+  const iconHTML = cssConfig.launcherShowIcon ? `<svg class="launcher-icon" width="24" height="24"   ${translateStyle} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8 10.167L12.123 6.043C13.248 4.919 13.811 4.356 14.431 3.903C15.7049 2.97403 17.1822 2.36274 18.74 2.12C19.499 2 20.293 2 21.885 2C21.968 2 22 2.038 22 2.115C22 3.705 22 4.501 21.881 5.26C21.638 6.81791 21.0263 8.29523 20.097 9.569C19.644 10.189 19.081 10.752 17.957 11.877L13.833 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M10.341 8.098C8.638 8.098 6.498 7.738 4.904 8.398C3.737 8.88 2.878 10 2 10.878L5.306 12.296C6.182 12.671 5.646 13.776 5.501 14.502C5.34 15.31 5.349 15.34 5.931 15.922L8.078 18.068C8.66 18.651 8.69 18.66 9.498 18.498C10.223 18.353 11.329 17.818 11.704 18.694L13.121 22C13.999 21.122 15.119 20.263 15.602 19.096C16.262 17.502 15.902 15.362 15.902 13.659" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
 <path d="M12 20L11 21M4 12L3 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M15 4.08008C16.2 4.26008 17.46 4.74008 18.161 5.46008C19.058 6.25208 19.68 7.32008 19.92 9.00008" stroke="white" stroke-width="1.5" stroke-linecap="square"/>
 <path d="M17.94 6.05957L16.5 7.49957" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 </svg>` : "";
-  const progressPaddingLeft = cssConfig.launcherShowIcon ? "28px" : "0px";
   const textTranslateStyle = !cssConfig.launcherProgressBar ? " translateY(50%);" : "";
+  if (!cssConfig.launcherProgressBar) {
+    showBtn.classList.add("no-progress");
+  }
   showBtn.innerHTML = `
-  <div style="display:flex; align-items:center; gap:0px; width:100%;">
-    
-    <!-- LEFT COLUMN -->
-    <div style="flex:1; display:flex; flex-direction:column; box-sizing:border-box; padding-left:${progressPaddingLeft};">
-
-      <!-- TITLE ROW -->
-      <h3 style="
-        margin:0;
-        position:relative;
-        line-height:1;
-      ">
-        <!-- ICON: fixed original position -->
-        <span style="
-          position:absolute;
-          left:-20px;
-          transform:translateY(-50%);
-          display:flex;
-          align-items:center;
-        ">
-          ${iconHTML}
-        </span>
-
-        <!-- TEXT: centered over progress bar -->
-        <span style="
-          display:block;
-          width:100%;
-          padding-left:5%;
-          text-align:center;
-          margin-top:-10%;
-          transform: ${textTranslateStyle};
-          pointer-events:none;
-          font-size: ${cssConfig.fontSize};
-        ">
-          ${cssConfig.launcher_text}
-        </span>
+  <div class="launcher-root">
+    <div class="launcher-left">
+
+      <h3 class="launcher-title">
+        ${iconHTML}
+        <span class="launcher-text">${cssConfig.launcher_text}</span>
       </h3>
 
-      <!-- PROGRESS BAR -->
-      <div style="width:100%; margin-top:-2px; padding-left:4%;">
-        <div id="progressContainerBtn" style="
-          display:flex;
-          gap:4px;
-          width:100%;
-          padding:5px;
-          height:3px;
-          box-sizing:border-box;
-        "></div>
+      <div class="launcher-progress-wrap">
+        <div id="progressContainerBtn" class="launcher-progress"></div>
       </div>
+
     </div>
 
-    <!-- RIGHT COLUMN: fraction -->
-    <div style="flex-shrink:0; display:flex; align-items:center;">
-      <span id="progressFraction" style="
-        font-size:13px;
-        white-space:nowrap;
-        color:${cssConfig.launcherTextColor};
-        padding-right:7px;
-        min-width:10px;
-        text-align:right;
-        margin-top:50%;
-      ">
-        0/0
-      </span>
+    <div class="launcher-right">
+      <span id="progressFraction" class="launcher-fraction">0/0</span>
     </div>
   </div>
 `;
-  const isRight = cssConfig.launcherPosition === "right";
+  function injectLauncherCSS() {
+    if (document.getElementById("rivia-launcher-css")) return;
+    const style2 = document.createElement("style");
+    style2.id = "rivia-launcher-css";
+    style2.textContent = `
+    /* Root */ .checklist-root { max-width: 500px; margin: auto; position: relative; font-family: var(--font-family); font-size: var(--font-size); color: var(--text-color); } /* Close button */ .checklist-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 28px; cursor: pointer; color: var(--text-color); } /* Header */ .checklist-header { background: var(--header-bg); padding: 16px; border-radius: 8px 8px 0 0; } .checklist-subtitle { margin-top: 8px; color: var(--subtitle-color); } /* Progress */ .checklist-progress { display: flex; align-items: center; justify-content: space-between; } .progress-fraction { font-size: 13px; } /* Body */ .checklist-body { padding: 16px; background: var(--lower-bg); max-height: 340px; overflow: auto; border-radius: 0 0 8px 8px; } /* Steps */ .onboard-step { position: relative; display: flex; align-items: flex-start; cursor: pointer; padding: 8px; border-radius: 6px; background: var(--step-bg); margin-bottom: 16px; } .start-select { position: absolute; top: 0; left: -18px; width: 10px; height: 120%; background: rgba(247,143,7,0.9); border-radius: 4px 0 0 4px; display: none; } .onboard-circle { width: 16px; height: 16px; min-width: 16px; min-height: 16px; border-radius: 50%; border: 2px solid var(--checkbox-color, #f78f07); /* hardcoded for test */ background: transparent; margin-right: 10px; box-sizing: border-box; display: block; } .onboard-title { color: var(--heading-color); } .onboard-desc { color: var(--body-color); } .onboard-divider { border: none; border-top: 1px solid #9d9d9d; } .rivia-launcher { position: fixed; display: block; z-index: 9999; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2); background: var(--launcher-bg); color: var(--launcher-text); font-weight: bold; } .rivia-launcher .launcher-root { display: flex; align-items: center; width: 100%; height: 100%; } .rivia-launcher .launcher-left { flex: 1; display: flex; flex-direction: column; } .rivia-launcher .launcher-title { position: relative; margin: 0; line-height: 1; text-align: center; padding-left: 28px; } .rivia-launcher .launcher-icon { position: absolute; left: 10px; transform: translateY(50%); }
+     .rivia-launcher .launcher-text {font-size:var(--font-size); display: block; width: 100%; padding-left: 5%; text-align: center; pointer-events: none; } 
+     .rivia-launcher .launcher-progress-wrap { margin-top: 4px; padding-left: 32px; } /* Text adjustment when progress bar is hidden */ .rivia-launcher.no-progress .launcher-text { transform: translateY(50%);font-size:var(--font-size); } .rivia-launcher .launcher-progress { display:flex; gap:4px; width:100%; padding:5px; height:3px; box-sizing:border-box; } .rivia-launcher .launcher-right { flex-shrink: 0; padding-right: 8px; } .rivia-launcher .launcher-fraction { font-size: 13px; white-space: nowrap; } /* Customer CSS */ .rivia-launcher { border-radius: 20px; } .rivia-launcher .launcher-progress { height: 6px; }
+    `;
+    document.head.appendChild(style2);
+  }
+  function applyChecklistTheme(root, cssConfig2) {
+    root.style.setProperty("--font-family", cssConfig2.fontFamily);
+    root.style.setProperty("--font-size", cssConfig2.fontSize);
+    root.style.setProperty("--text-color", cssConfig2.textColor);
+    root.style.setProperty("--subtitle-color", cssConfig2.subtitleColor);
+    root.style.setProperty("--header-bg", cssConfig2.backgroundColor);
+    root.style.setProperty("--lower-bg", cssConfig2.lowerBackgroundColor);
+    root.style.setProperty("--step-bg", cssConfig2.lowerBackgroundColor);
+    root.style.setProperty("--checkbox-color", cssConfig2.lowerCheckboxColor);
+    root.style.setProperty("--heading-color", cssConfig2.lowerHeadingColor);
+    root.style.setProperty("--body-color", cssConfig2.lowerBodyColor);
+  }
+  injectChecklistBaseCSS();
   Object.assign(showBtn.style, {
-    position: "fixed",
     bottom: cssConfig.launcherSpacingBottom || "20px",
-    // Horizontal positioning
     left: isRight ? "auto" : cssConfig.launcherSpacingLeft || "20px",
     right: isRight ? cssConfig.launcherSpacingRight || "20px" : "auto",
     width: cssConfig.launcherWidth ? `${cssConfig.launcherWidth}px` : "150px",
     height: cssConfig.launcherHeight ? `${cssConfig.launcherHeight}px` : "78px",
-    fontSize: cssConfig.fontSize,
-    fontWeight: "bold",
-    backgroundColor: cssConfig.launcherBackgroundColor,
-    color: cssConfig.launcherTextColor,
-    border: "none",
-    borderRadius: `${cssConfig.launcherBorderRadius}px` || "6px",
-    cursor: "pointer",
-    zIndex: 9999,
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)"
+    borderRadius: `${cssConfig.launcherBorderRadius || 6}px`
+    /* CSS variables */
   });
-  document.body.appendChild(showBtn);
+  showBtn.style.setProperty("--launcher-bg", cssConfig.launcherBackgroundColor || "#f78f07");
+  showBtn.style.setProperty("--launcher-text", cssConfig.launcherTextColor || "#ffffff");
+  showBtn.style.setProperty("--font-size", cssConfig.fontSize || "14px");
+  applyChecklistTheme(label, cssConfig);
+  injectChecklistBaseCSS();
+  if (!document.contains(showBtn))
+    document.body.appendChild(showBtn);
+  console.log("after applyChecklistTheme");
+  if (!document.contains(label))
+    document.body.appendChild(label);
   if (!cssConfig.launcherProgressBar) {
-    document.getElementById("progressContainerBtn").style.display = "none";
-    document.getElementById("progressFraction").style.display = "none";
+    const progressContainerBtn = document.getElementById("progressContainerBtn");
+    if (progressContainerBtn) {
+      progressContainerBtn.style.display = "none";
+    }
+    const progressFraction = document.getElementById("progressFraction");
+    if (progressFraction) {
+      progressFraction.style.display = "none";
+    }
   }
-  document.body.appendChild(label);
   createS(items.length);
   const closeBtn = document.createElement("button");
   closeBtn.id = "tooltip-close-btn";
@@ -566,11 +722,6 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   }
   let check = 0;
   console.log("before");
-  const EVENT_SRC_URL = "https://demoapi.rivia.ai/events";
-  if (!window._onboardingEventSource) {
-    window._onboardingEventSource = new EventSource(EVENT_SRC_URL);
-  }
-  const eventSource = window._onboardingEventSource;
   const STORAGE_KEY = "onboardingVisited";
   const visitedSet = new Set(
     JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "[]")
@@ -605,70 +756,6 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     }
     return true;
   }
-  eventSource.onopen = () => console.log("SSE connected");
-  eventSource.onerror = (err) => console.log("SSE connection error:", err);
-  eventSource.onmessage = (event) => {
-    if (!event || !event.data) return;
-    check = 1;
-    let data;
-    try {
-      data = JSON.parse(event.data);
-    } catch (err) {
-      console.warn("Invalid SSE JSON:", event.data, err);
-      return;
-    }
-    if (data.ping) {
-      return;
-    }
-    const msg = data.message;
-    if (!msg) return;
-    if (processedMessages.has(msg)) {
-      return;
-    }
-    processedMessages.add(msg);
-    const it = items.find((i2) => i2.event_name && i2.event_name === msg);
-    if (!it) {
-      console.log("SSE message doesn't match any item:", msg);
-      return;
-    }
-    try {
-      const stepEl = label ? label.querySelector(`#${it.id}`) : null;
-      if (stepEl) {
-        const startSelect = stepEl.querySelector(".start-select");
-        if (startSelect) startSelect.style.display = "none";
-      }
-    } catch (err) {
-    }
-    const path = it.url || "";
-    const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
-    handleVisit(cleanUrl, { source: "sse" });
-    if (storedVisited.length >= checklistItems.length) {
-      console.log("All items completed via SSE");
-      if (label && label.parentNode) label.remove();
-      if (showBtn && showBtn.parentNode) showBtn.remove();
-      const label3 = document.createElement("div");
-      label3.id = "route-label";
-      label3.innerText = "\u{1F389} Congrats! You've completed all items!";
-      Object.assign(label3.style, {
-        position: "fixed",
-        bottom: "20px",
-        left: "20px",
-        backgroundColor: "#4CAF50",
-        color: "white",
-        padding: "10px 20px",
-        borderRadius: "10px",
-        boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
-        fontSize: "16px",
-        fontWeight: "bold",
-        zIndex: 9999,
-        opacity: 0,
-        transition: "opacity 0.5s ease"
-      });
-      document.body.appendChild(label3);
-    }
-    console.log("Received event (SSE):", msg);
-  };
-  console.log("after");
   function findButtonByText(buttonText) {
     if (!buttonText) return null;
     const needle = buttonText.trim().toLowerCase();
@@ -760,91 +847,11 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
       updateProgress2(visitedSet.size);
     }
   });
-  if (!window._onboardingEventSource) {
-    window._onboardingEventSource = new EventSource(EVENT_SRC_URL);
-  }
-  eventSource.onopen = () => console.log("SSE connected");
-  eventSource.onerror = (err) => console.log("SSE connection error:", err);
-  eventSource.onmessage = (event) => {
-    if (!event || !event.data) return;
-    check = 1;
-    let data;
-    try {
-      data = JSON.parse(event.data);
-    } catch (err) {
-      console.warn("Invalid SSE JSON:", event.data, err);
-      return;
-    }
-    if (data.ping) {
-      return;
-    }
-    const msg = data.message;
-    console.log("SSE message received:", msg);
-    if (!msg) return;
-    if (processedMessages.has(msg)) {
-      return;
-    }
-    processedMessages.add(msg);
-    const it = items.find((i2) => i2.event_name && i2.event_name === msg);
-    if (!it) {
-      console.log("SSE message doesn't match any item:", msg);
-      return;
-    }
-    const eventId = data.event_id;
-    try {
-      fetch("https://demoapi.rivia.ai/ack-event", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ event_id: eventId })
-      });
-      console.log("ACK sent for", eventId);
-    } catch (err) {
-      console.warn("Failed to ACK", eventId, err);
-    }
-    try {
-      const stepEl = label ? label.querySelector(`#${it.id}`) : null;
-      if (stepEl) {
-        const startSelect = stepEl.querySelector(".start-select");
-        if (startSelect) startSelect.style.display = "none";
-      }
-    } catch (err) {
-    }
-    const path = it.url || "";
-    const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
-    handleVisit(cleanUrl, { source: "sse" });
-    if (storedVisited.length >= checklistItems.length) {
-      console.log("All items completed via SSE");
-      (() => {
-        if (label && label.parentNode) label.remove();
-        if (showBtn && showBtn.parentNode) showBtn.remove();
-        const label3 = document.createElement("div");
-        label3.id = "route-label";
-        label3.innerText = "\u{1F389} Congrats! You've completed all items!";
-        Object.assign(label3.style, {
-          position: "fixed",
-          bottom: "20px",
-          left: "20px",
-          backgroundColor: "#4CAF50",
-          color: "white",
-          padding: "10px 20px",
-          borderRadius: "10px",
-          boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
-          fontSize: "16px",
-          fontWeight: "bold",
-          zIndex: 9999,
-          opacity: 0,
-          transition: "opacity 0.5s ease"
-        });
-        document.body.appendChild(label3);
-      })();
-    }
-    console.log("Received event (SSE):", msg);
-  };
   let user_var2 = user_var;
   function uploadVisitedPagesInBackground(completed2, touched = false) {
     let activeStepId2 = sessionStorage.getItem("activeStepId") || null;
     let user_var22 = user_var;
-    const backendUrl22 = `https://demoapi.rivia.ai/clients/${checklist_id}`;
+    const backendUrl22 = `http://localhost:5000/clients/${checklist_id}`;
     try {
       const payload = {
         name: user_var22,
@@ -866,7 +873,6 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
       console.warn("\u274C Error preparing background upload:", err);
     }
   }
-  if (check == 0) uploadVisitedPagesInBackground(storedVisited, false);
   let activeStepId = sessionStorage.getItem("activeStepId") || null;
   function updateUIFromVisited() {
     storedVisited = JSON.parse(
@@ -876,7 +882,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     storedVisited = sessionStorage.getItem("onboardingVisited");
     if (!storedVisited || storedVisited == "[]") {
       async function getUserProgress22() {
-        const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var}`;
+        const backendUrl2 = `http://localhost:5000/clients/${checklist_id}/${user_var}`;
         try {
           const res = await fetch(backendUrl2, { credentials: "include" });
           if (!res.ok) console.warn(`GET failed: ${res.status}`);
@@ -1150,6 +1156,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     label.style.pointerEvents = "auto";
     closeBtn.style.display = "flex";
     showBtn.style.display = "none";
+    sessionStorage.setItem("onboardingVisible", "true");
     positionCloseBtn();
     requestAnimationFrame(() => {
       label.style.opacity = "1";
@@ -1174,9 +1181,18 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     const getStarted = document.querySelector("button#get-started");
     if (getStarted) getStarted.click();
   });
-  showBtn.style.display = "block";
-  label.style.display = "none";
-  label.style.opacity = "0";
+  if (sessionStorage.getItem("onboardingVisible") === "true") {
+    label.style.display = "block";
+    label.style.pointerEvents = "auto";
+    closeBtn.style.display = "flex";
+    showBtn.style.display = "none";
+    sessionStorage.setItem("onboardingVisible", "true");
+    positionCloseBtn();
+  } else {
+    showBtn.style.display = "block";
+    label.style.display = "none";
+  }
+  label.style.opacity = "1";
   updateUIFromVisited();
   window.addEventListener("resize", () => {
     if (label.style.display !== "none") positionCloseBtn();
@@ -1186,7 +1202,7 @@ async function Checklist(checklist_id, user_var) {
   try {
     const cachedData = sessionStorage.getItem(`checklist_${checklist_id}`);
     if (cachedData) {
-      const { checklist: checklist2, cssConfig: cssConfig2, targetingData: targetingData2 } = JSON.parse(cachedData);
+      const { checklist: checklist2, cssConfig: cssConfig2, targetingData: targetingData2, customCSS: customCSS2 } = JSON.parse(cachedData);
       Onboarding(
         checklist2.title || "Untitled Checklist",
         checklist2.subtitle || "Describe the purpose of this checklist...",
@@ -1194,13 +1210,193 @@ async function Checklist(checklist_id, user_var) {
         checklist2.items || [],
         cssConfig2 || {},
         targetingData2 || {},
+        customCSS2 || `/* Root */
+.checklist-root {
+  max-width: 500px;
+  margin: auto;
+  position: relative;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+}
+
+/* Close button */
+.checklist-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: var(--text-color);
+}
+
+/* Header */
+.checklist-header {
+  background: var(--header-bg);
+  padding: 16px;
+  border-radius: 8px 8px 0 0;
+}
+
+.checklist-subtitle {
+  margin-top: 8px;
+  color: var(--subtitle-color);
+}
+
+/* Progress */
+.checklist-progress {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.progress-fraction {
+  font-size: 13px;
+}
+
+/* Body */
+.checklist-body {
+  padding: 16px;
+  background: var(--lower-bg);
+  max-height: 340px;
+  overflow: auto;
+  border-radius: 0 0 8px 8px;
+}
+
+/* Steps */
+.onboard-step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--step-bg);
+  margin-bottom: 16px;
+}
+
+.start-select {
+  position: absolute;
+  top: 0;
+  left: -18px;
+  width: 10px;
+  height: 120%;
+  background: rgba(247,143,7,0.9);
+  border-radius: 4px 0 0 4px;
+  display: none;
+}
+
+.onboard-circle {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--checkbox-color, #f78f07);
+  background: transparent;
+  margin-right: 10px;
+  box-sizing: border-box;
+  display: block;
+}
+
+.onboard-title {
+  color: var(--heading-color);
+}
+
+.onboard-desc {
+  color: var(--body-color);
+}
+
+.onboard-divider {
+  border: none;
+  border-top: 1px solid #9d9d9d;
+}
+
+.rivia-launcher {
+  position: fixed;
+  display: block;
+  z-index: 9999;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2);
+  background: var(--launcher-bg);
+  color: var(--launcher-text);
+  font-weight: bold;
+  border-radius: 20px;
+}
+
+.rivia-launcher .launcher-root {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rivia-launcher .launcher-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.rivia-launcher .launcher-title {
+transform: translateY(-20%);
+  position: relative;
+  margin: 0;
+  line-height: 1;
+  text-align: center;
+  padding-left: 28px;
+}
+
+.rivia-launcher .launcher-icon {
+  position: absolute;
+  left: 10px;
+  
+}
+
+.rivia-launcher .launcher-text { font-size:var(--font-size);
+  display: block;
+  width: 100%;
+  padding-left: 5%;
+  text-align: center;
+  pointer-events: none;
+}
+
+.rivia-launcher .launcher-progress-wrap {
+  margin-top: 4px;
+  padding-left: 32px;
+}
+
+/* Text adjustment when progress bar is hidden */
+.rivia-launcher.no-progress .launcher-text {
+  transform: translateY(50%);
+}
+
+.rivia-launcher .launcher-progress {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  padding: 5px;
+  height: 6px;
+  box-sizing: border-box;
+}
+
+.rivia-launcher .launcher-right {
+  flex-shrink: 0;
+  padding-right: 8px;
+}
+
+.rivia-launcher .launcher-fraction {
+  font-size: 13px;
+  white-space: nowrap;
+}`,
         user_var,
         checklist_id
       );
       return checklist2;
     }
     const res = await fetch(
-      `https://demoapi.rivia.ai/checklists2/${checklist_id}`,
+      `http://localhost:5000/checklists2/${checklist_id}`,
       {
         method: "GET",
         headers: { "Content-Type": "application/json" }
@@ -1221,7 +1417,187 @@ async function Checklist(checklist_id, user_var) {
     const completion = checklist.completion || 0;
     const cssConfig = checklist.branding_data || {};
     const targetingData = checklist.targeting_data || {};
-    const fullData = { checklist, cssConfig, targetingData };
+    const customCSS = checklist.customCSS || `/* Root */
+.checklist-root {
+  max-width: 500px;
+  margin: auto;
+  position: relative;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+}
+
+/* Close button */
+.checklist-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: var(--text-color);
+}
+
+/* Header */
+.checklist-header {
+  background: var(--header-bg);
+  padding: 16px;
+  border-radius: 8px 8px 0 0;
+}
+
+.checklist-subtitle {
+  margin-top: 8px;
+  color: var(--subtitle-color);
+}
+
+/* Progress */
+.checklist-progress {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.progress-fraction {
+  font-size: 13px;
+}
+
+/* Body */
+.checklist-body {
+  padding: 16px;
+  background: var(--lower-bg);
+  max-height: 340px;
+  overflow: auto;
+  border-radius: 0 0 8px 8px;
+}
+
+/* Steps */
+.onboard-step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--step-bg);
+  margin-bottom: 16px;
+}
+
+.start-select {
+  position: absolute;
+  top: 0;
+  left: -18px;
+  width: 10px;
+  height: 120%;
+  background: rgba(247,143,7,0.9);
+  border-radius: 4px 0 0 4px;
+  display: none;
+}
+
+.onboard-circle {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--checkbox-color, #f78f07);
+  background: transparent;
+  margin-right: 10px;
+  box-sizing: border-box;
+  display: block;
+}
+
+.onboard-title {
+  color: var(--heading-color);
+}
+
+.onboard-desc {
+  color: var(--body-color);
+}
+
+.onboard-divider {
+  border: none;
+  border-top: 1px solid #9d9d9d;
+}
+
+.rivia-launcher {
+  position: fixed;
+  display: block;
+  z-index: 9999;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2);
+  background: var(--launcher-bg);
+  color: var(--launcher-text);
+  font-weight: bold;
+  border-radius: 20px;
+}
+
+.rivia-launcher .launcher-root {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rivia-launcher .launcher-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.rivia-launcher .launcher-title {
+transform: translateY(-20%);
+  position: relative;
+  margin: 0;
+  line-height: 1;
+  text-align: center;
+  padding-left: 28px;
+}
+
+.rivia-launcher .launcher-icon {
+  position: absolute;
+  left: 10px;
+  
+}
+
+.rivia-launcher .launcher-text { font-size:var(--font-size);
+  display: block;
+  width: 100%;
+  padding-left: 5%;
+  text-align: center;
+  pointer-events: none;
+}
+
+.rivia-launcher .launcher-progress-wrap {
+  margin-top: 4px;
+  padding-left: 32px;
+}
+
+/* Text adjustment when progress bar is hidden */
+.rivia-launcher.no-progress .launcher-text {
+  transform: translateY(50%);
+}
+
+.rivia-launcher .launcher-progress {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  padding: 5px;
+  height: 6px;
+  box-sizing: border-box;
+}
+
+.rivia-launcher .launcher-right {
+  flex-shrink: 0;
+  padding-right: 8px;
+}
+
+.rivia-launcher .launcher-fraction {
+  font-size: 13px;
+  white-space: nowrap;
+}`;
+    const fullData = { checklist, cssConfig, targetingData, customCSS };
     sessionStorage.setItem(
       `checklist_${checklist_id}`,
       JSON.stringify(fullData)
@@ -1233,6 +1609,7 @@ async function Checklist(checklist_id, user_var) {
       items,
       cssConfig,
       targetingData,
+      customCSS,
       user_var,
       checklist_id
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rivia",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",