rivia 0.0.33 → 0.0.35

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);
@@ -181,7 +178,8 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
         backendUrl,
         progressData,
         visitedPages,
-        cleanUrlItems
+        cleanUrlItems,
+        customCSS
       );
     });
   } else {
@@ -240,77 +238,240 @@ 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>
-`;
+/* 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");
+  }
   const label = document.createElement("div");
   label.id = "route-label";
   label.innerHTML = labelHTML;
@@ -329,10 +490,12 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     const confirmDiv = document.createElement("div");
     confirmDiv.innerHTML = `
 <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: flex-end; justify-content: flex-start;">
-  <div style="background: white; padding: 20px; border-radius: 10px; text-align: center; margin: 20px;">
-    <p>Are you sure you want to dismiss this checklist?</p>
-    <button id="confirmYes" style="margin: 10px; padding: 10px 20px; background: green; color: white; border: none; border-radius: 5px; cursor: pointer;">\u2713</button>
-    <button id="confirmNo" style="margin: 10px; padding: 10px 20px; background: red; color: white; border: none; border-radius: 5px; cursor: pointer;">\u2717</button>
+  <div style="background: white;width: 250px;  border-radius: 10px; text-align: center; margin: 20px;">
+    <p style="padding: 15px;">Are you sure you want to dismiss this checklist?</p>
+    <hr style="border-top: 2px solid #f33f27ff; margin-left: 10px; margin-right: 10px;">
+    <button id="confirmNo" style="margin: 10px; padding: 4px 8px;color: #f33f27ff; border: none;  cursor: pointer;">No</button>
+    <span style="border-left: 2px solid #f33f27ff;color:#eda600ff; height: 52px; margin: 0 10px; display: inline-block; vertical-align: top;"></span>
+    <button id="confirmYes" style="margin: 10px; padding: 4px 8px;  color: #f33f27ff; border: none; cursor: pointer;">Yes</button>
   </div>
 </div>
 `;
@@ -354,39 +517,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);
@@ -402,7 +567,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",
@@ -435,108 +600,91 @@ 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 */
   });
+  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();
   document.body.appendChild(showBtn);
+  console.log("after applyChecklistTheme");
+  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";
@@ -1184,7 +1332,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...",
@@ -1192,6 +1340,186 @@ 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
       );
@@ -1219,7 +1547,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)
@@ -1231,6 +1739,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.33",
+  "version": "0.0.35",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",