rivia 0.0.108 → 0.0.110

package/dist/index.js

@@ -2,7 +2,7 @@
 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 = {}, customCSS = "", user_var, checklist_id) {
+function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, customCSS = "", user_var, checklist_id, congratulatory_message, button_text = "Get Started", redirect_url = "", button_present = false) {
   if (sessionStorage.getItem(`dismissedChecklist${checklist_id}`) == "true")
     return;
   let usrn = targetingData?.targeting_data?.usernames ?? "Not Set";
@@ -62,6 +62,132 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
     lowerHeadingColor: "#111827"
   };
   const cssConfig = Object.assign({}, defaultTheme, cssText || {});
+  const completionButtonPresent = button_present;
+  const completionCssConfig = cssConfig;
+  const completionTopTitle = topTitle;
+  const completionCongratulatoryMessage = congratulatory_message;
+  const completionButtonText = button_text;
+  const completionRedirectUrl = redirect_url;
+  window.renderCompletionCard = (config = {}) => {
+    const completionConfig = {
+      button_present,
+      cssConfig,
+      topTitle,
+      congratulatory_message,
+      button_text,
+      redirect_url,
+      ...config
+    };
+    const completionTheme = completionConfig.cssConfig || {};
+    const shouldShowGoButton = completionConfig.button_present === true || completionConfig.button_present === "true" || completionConfig.button_present === 1 || completionConfig.button_present === "1";
+    const {
+      completion_height = "auto",
+      completion_width = "300px",
+      completion_background_color = "#ffffff",
+      completion_text_color = completion_background_color === "#ffffff" ? completionTheme.textColor || "#111827" : "#000000",
+      completion_font_size = completionTheme.fontSize || "16px",
+      completion_subtitle_color = completionTheme.subtitleColor || completion_text_color,
+      completion_title_font_family = completionTheme.fontFamily || "Arial, sans-serif",
+      completion_title_font_size = "18px",
+      completion_button_bg_color = completionTheme.button_background_color || "#ffffff",
+      completion_button_text_color = completionTheme.button_text_color || "#4CAF50",
+      completion_button_font_family = completionTheme.fontFamily || "Arial, sans-serif",
+      completion_button_font_size = completionTheme.button_font_size || "14px",
+      completion_dismiss_background_color = "#f44336",
+      completion_dismiss_text_color = "#ffffff"
+    } = completionTheme;
+    const completionTitle = completionConfig.topTitle || "Checklist Complete";
+    const completionSubtitle = completionConfig.congratulatory_message || "\u{1F389}Congratulations! You have completed the checklist.";
+    const label = document.createElement("div");
+    label.id = "route-label";
+    Object.assign(label.style, {
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      alignItems: "center",
+      width: completion_width,
+      height: completion_height,
+      backgroundColor: completion_background_color,
+      color: completion_text_color,
+      padding: "15px",
+      borderRadius: "12px",
+      boxShadow: "0 6px 12px rgba(0,0,0,0.2)",
+      fontSize: completion_font_size,
+      fontFamily: completionTheme.fontFamily || "Arial, sans-serif",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      gap: "10px"
+    });
+    const title = document.createElement("div");
+    title.innerText = completionTitle;
+    Object.assign(title.style, {
+      color: completion_text_color,
+      fontFamily: completion_title_font_family,
+      fontSize: completion_title_font_size,
+      fontWeight: "bold",
+      lineHeight: "1.3"
+    });
+    const message = document.createElement("div");
+    message.innerText = completionSubtitle;
+    Object.assign(message.style, {
+      color: completion_subtitle_color,
+      fontSize: completion_font_size,
+      lineHeight: "1.5",
+      textAlign: "center"
+    });
+    const btnContainer = document.createElement("div");
+    Object.assign(btnContainer.style, {
+      display: "flex",
+      justifyContent: shouldShowGoButton ? "space-between" : "flex-end",
+      gap: "10px",
+      marginTop: "4px"
+    });
+    const goBtn = document.createElement("button");
+    goBtn.innerText = completionConfig.button_text || "Get Started";
+    Object.assign(goBtn.style, {
+      padding: "8px 12px",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      backgroundColor: completion_button_bg_color,
+      color: completion_button_text_color,
+      fontFamily: completion_button_font_family,
+      fontSize: completion_button_font_size,
+      fontWeight: "bold"
+    });
+    goBtn.onclick = () => {
+      sessionStorage.setItem("CompletedAll", "false");
+      window.open(completionConfig.redirect_url || "/dashboard", "_blank");
+    };
+    const closeBtn = document.createElement("button");
+    closeBtn.innerText = "Dismiss";
+    Object.assign(closeBtn.style, {
+      padding: "8px 12px",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      backgroundColor: completion_dismiss_background_color,
+      color: completion_dismiss_text_color,
+      fontFamily: completion_button_font_family,
+      fontSize: completion_button_font_size
+    });
+    closeBtn.onclick = () => {
+      label.style.opacity = 0;
+      sessionStorage.setItem("CompletedAll", "false");
+      setTimeout(() => label.remove(), 500);
+    };
+    if (shouldShowGoButton) {
+      btnContainer.appendChild(goBtn);
+    }
+    btnContainer.appendChild(closeBtn);
+    if (completionSubtitle) {
+      label.appendChild(message);
+    }
+    label.appendChild(btnContainer);
+    document.body.appendChild(label);
+  };
   if (!items.length) return;
   ["route-label", "show-tooltip-btn", "tooltip-close-btn"].forEach((id) => {
     const el = document.getElementById(id);
@@ -75,10 +201,10 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       visitedPages[it.event_name] = it.id;
     }
   });
-  let storedVisited2 = JSON.parse(
+  let storedVisited = JSON.parse(
     sessionStorage.getItem("onboardingVisited") || "[]"
   );
-  if (!Array.isArray(storedVisited2)) storedVisited2 = [];
+  if (!Array.isArray(storedVisited)) storedVisited = [];
   let user_var1 = user_var;
   if (!user_var1) {
     user_var1 = "User_" + Math.random().toString(36).substring(2, 8);
@@ -93,16 +219,16 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       const data2 = await res.json();
       let userData = data2[user_var1];
       if (Array.isArray(userData)) {
-        storedVisited2 = userData;
+        storedVisited = userData;
       } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
-        storedVisited2 = userData.completed_items;
+        storedVisited = userData.completed_items;
       } else {
-        storedVisited2 = [];
+        storedVisited = [];
       }
       let path;
       return {
-        completedPages: storedVisited2,
-        progress: storedVisited2.length,
+        completedPages: storedVisited,
+        progress: storedVisited.length,
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
         start_date: userData?.start_date || "",
         end_date: userData?.end_date || userData?.end_data || ""
@@ -112,7 +238,7 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
         "\u26A0\uFE0F Invalid checklist Id",
         err
       );
-      const storedVisited22 = [];
+      const storedVisited2 = [];
       return {
         completedPages: [],
         progress: 0,
@@ -122,7 +248,7 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       };
     }
   }
-  storedVisited2 = sessionStorage.getItem("onboardingVisited");
+  storedVisited = sessionStorage.getItem("onboardingVisited");
   async function getUserProgress22() {
     const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
     try {
@@ -131,16 +257,16 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       const data2 = await res.json();
       let userData = data2[user_var1];
       if (Array.isArray(userData)) {
-        storedVisited2 = userData;
+        storedVisited = userData;
       } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
-        storedVisited2 = userData.completed_items;
+        storedVisited = userData.completed_items;
       } else {
-        storedVisited2 = [];
+        storedVisited = [];
       }
       let path;
       return {
-        completedPages: storedVisited2,
-        progress: storedVisited2.length,
+        completedPages: storedVisited,
+        progress: storedVisited.length,
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
         start_date: userData?.start_date || "",
         end_date: userData?.end_date || userData?.end_data || ""
@@ -186,9 +312,11 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       };
     }
   }
-  if (!storedVisited2 || storedVisited2 == "[]") {
+  if (!storedVisited || storedVisited == "[]") {
     getUserProgress22().then((progressData) => {
-      if (storedVisited2 && storedVisited2.length >= checklistItems.length) {
+      if (storedVisited && storedVisited.length >= checklistItems.length) {
+        if (sessionStorage.getItem("CompletedAll") != "true") return;
+        window.renderCompletionCard();
         return;
       }
       sessionStorage.setItem(
@@ -206,53 +334,31 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
         checklist_id,
         cssConfig,
         items,
-        storedVisited2,
+        storedVisited,
         backendUrl,
         progressData,
         visitedPages,
         cleanUrlItems,
-        customCSS
+        customCSS,
+        congratulatory_message,
+        button_text,
+        completionRedirectUrl,
+        button_present
       );
     });
   } else {
     try {
-      storedVisited2 = storedVisited2 ? JSON.parse(storedVisited2) : [];
+      storedVisited = storedVisited ? JSON.parse(storedVisited) : [];
     } catch (e) {
       console.warn(
         "Invalid onboardingVisited data, resetting cache:",
-        storedVisited2
+        storedVisited
       );
-      storedVisited2 = [];
+      storedVisited = [];
     }
-    if (storedVisited2 && storedVisited2.length >= checklistItems.length) {
+    if (storedVisited && storedVisited.length >= checklistItems.length) {
       if (sessionStorage.getItem("CompletedAll") != "true") return;
-      const label = document.createElement("div");
-      label.id = "route-label";
-      label.innerText = "\u{1F389} Congrats! You've completed all items!";
-      Object.assign(label.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(label);
-      requestAnimationFrame(() => {
-        label.style.opacity = 1;
-      });
-      setTimeout(() => {
-        label.style.opacity = 0;
-        setTimeout(() => label.remove(), 500);
-      }, 3e3);
-      sessionStorage.setItem("CompletedAll", "false ");
+      window.renderCompletionCard();
       return;
     }
     fetchWithTimeout(
@@ -266,16 +372,20 @@ function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklis
       checklist_id,
       cssConfig,
       items,
-      storedVisited2,
+      storedVisited,
       backendUrl,
       [],
       visitedPages,
       cleanUrlItems,
-      customCSS
+      customCSS,
+      congratulatory_message,
+      button_text,
+      completionRedirectUrl,
+      button_present
     );
   }
 }
-async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id, cssConfig = {}, items = [], storedVisited2 = [], backendUrl = "", progressData = {}, visitedPages = {}, cleanUrlItems = [], custom_css = "") {
+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 = "", congratulatory_message = "", button_text = "Get Started", redirect_url = "", button_present = false) {
   console.log("inside fetchWithTimeout", user_var);
   if (!user_var)
     return;
@@ -660,7 +770,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
     }
   }
   createSlabs(items.length);
-  if (storedVisited2) updateProgress(storedVisited2.length);
+  if (storedVisited) updateProgress(storedVisited.length);
   Object.assign(label.style, {
     position: "fixed",
     bottom: "80px",
@@ -782,8 +892,16 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   window.updateUIFromVisited = updateUIFromVisited;
   window.updateProgress = updateProgress;
   window.updateProgress2 = updateProgress2;
-  window.storedVisited = storedVisited2;
+  window.storedVisited = storedVisited;
   window.uploadVisitedPagesInBackground = uploadVisitedPagesInBackground;
+  window.completionCardConfig = {
+    button_present,
+    cssConfig,
+    topTitle,
+    congratulatory_message,
+    button_text,
+    redirect_url
+  };
   window.items = items;
   window.label = label;
   window.showBtn = showBtn;
@@ -842,7 +960,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
       return false;
     }
     visitedSet.add(cleanUrl);
-    storedVisited2 = [...visitedSet];
+    storedVisited = [...visitedSet];
     persistVisited();
     try {
       uploadVisitedPagesInBackground([...visitedSet], true);
@@ -881,7 +999,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
       check = 1;
       const path = it.url || "";
       const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
-      if (storedVisited2.length >= checklistItems.length) {
+      if (storedVisited.length >= checklistItems.length) {
         (() => {
           if (label2 && label2.parentNode) label2.remove();
           if (showBtn && showBtn.parentNode) showBtn.remove();
@@ -907,7 +1025,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
         })();
       }
       handleVisit(cleanUrl, { source: "click" });
-      if (storedVisited2.length >= checklistItems.length) {
+      if (storedVisited.length >= checklistItems.length) {
         (() => {
           if (label && label.parentNode) label.remove();
           if (showBtn && showBtn.parentNode) showBtn.remove();
@@ -977,12 +1095,12 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
   }
   let activeStepId = sessionStorage.getItem("activeStepId") || null;
   function updateUIFromVisited() {
-    storedVisited2 = JSON.parse(
+    storedVisited = JSON.parse(
       sessionStorage.getItem("onboardingVisited") || "[]"
     );
     let path;
-    storedVisited2 = sessionStorage.getItem("onboardingVisited");
-    if (!storedVisited2 || storedVisited2 == "[]") {
+    storedVisited = sessionStorage.getItem("onboardingVisited");
+    if (!storedVisited || storedVisited == "[]") {
       async function getUserProgress22() {
         const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var}`;
         try {
@@ -991,16 +1109,16 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
           const data2 = await res.json();
           let userData = data2[user_var];
           if (Array.isArray(userData)) {
-            storedVisited2 = userData;
+            storedVisited = userData;
           } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
-            storedVisited2 = userData.completed_items;
+            storedVisited = userData.completed_items;
           } else {
-            storedVisited2 = [];
+            storedVisited = [];
           }
           let path2;
           return {
-            completedPages: storedVisited2,
-            progress: storedVisited2.length,
+            completedPages: storedVisited,
+            progress: storedVisited.length,
             timestamp: (/* @__PURE__ */ new Date()).toISOString(),
             start_date: userData?.start_date || "",
             end_date: userData?.end_date || userData?.end_data || ""
@@ -1011,7 +1129,7 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
             err
           );
           uploadVisitedPagesInBackground([], false);
-          const storedVisited22 = [];
+          const storedVisited2 = [];
           return {
             completedPages: [],
             progress: 0,
@@ -1075,12 +1193,12 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
         if (btnFraction2) {
           btnFraction2.textContent = `${completed2.length}/${items.length}`;
         }
-        storedVisited2 = completed2;
+        storedVisited = completed2;
         updateProgress(completed2.length);
         updateProgress2(completed2.length);
       });
     } else {
-      let completed2 = storedVisited2;
+      let completed2 = storedVisited;
       if (completed2) {
         try {
           completed2 = JSON.parse(completed2);
@@ -1144,11 +1262,11 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
       if (btnFraction2) {
         btnFraction2.textContent = `${completed2.length}/${items.length} `;
       }
-      storedVisited2 = completed2;
+      storedVisited = completed2;
       updateProgress(completed2.length);
       updateProgress2(completed2.length);
     }
-    let completed = storedVisited2;
+    let completed = storedVisited;
   }
   if (completion == 0) {
     items.forEach((it) => {
@@ -1168,10 +1286,10 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
           startSelect.style.display = "block";
           activeStepId = it.id;
           sessionStorage.setItem("activeStepId", activeStepId);
-          storedVisited2 = JSON.parse(
+          storedVisited = JSON.parse(
             sessionStorage.getItem("onboardingVisited") || "[]"
           );
-          if (!storedVisited2 || storedVisited2 == "[]") {
+          if (!storedVisited || storedVisited == "[]") {
             getUserProgress2().then((progressData2) => {
               sessionStorage.setItem(
                 "onboardingVisited",
@@ -1179,26 +1297,26 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
               );
             });
           }
-          storedVisited2 = JSON.parse(
+          storedVisited = JSON.parse(
             sessionStorage.getItem("onboardingVisited") || "[]"
           );
           let path = it.url;
           let cleanUrl = path.startsWith("/") ? path.slice(1) : path;
-          if (!storedVisited2.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
-            storedVisited2.push(cleanUrl);
+          if (!storedVisited.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
+            storedVisited.push(cleanUrl);
             sessionStorage.setItem(
               "onboardingVisited",
-              JSON.stringify(storedVisited2)
+              JSON.stringify(storedVisited)
             );
           }
-          if (storedVisited2.length >= checklistItems.length) {
+          if (storedVisited.length >= checklistItems.length) {
             sessionStorage.setItem("CompletedAll", "true");
           }
-          uploadVisitedPagesInBackground(storedVisited2, true);
-          updateProgress(storedVisited2.length);
-          updateProgress2(storedVisited2.length);
+          uploadVisitedPagesInBackground(storedVisited, true);
+          updateProgress(storedVisited.length);
+          updateProgress2(storedVisited.length);
           updateUIFromVisited();
-          if (storedVisited2.length >= checklistItems.length) {
+          if (storedVisited.length >= checklistItems.length) {
             sessionStorage.setItem("CompletedAll", "true");
           }
         }
@@ -1235,18 +1353,18 @@ async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion =
         sessionStorage.setItem("activeStepId", activeStepId);
         let path = it.url;
         let cleanUrl = path.startsWith("/") ? path.slice(1) : path;
-        if (!storedVisited2.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
-          storedVisited2.push(cleanUrl);
+        if (!storedVisited.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
+          storedVisited.push(cleanUrl);
           sessionStorage.setItem(
             "onboardingVisited",
-            JSON.stringify(storedVisited2)
+            JSON.stringify(storedVisited)
           );
         }
-        uploadVisitedPagesInBackground(storedVisited2, true);
-        updateProgress(storedVisited2.length);
-        updateProgress2(storedVisited2.length);
+        uploadVisitedPagesInBackground(storedVisited, true);
+        updateProgress(storedVisited.length);
+        updateProgress2(storedVisited.length);
         updateUIFromVisited();
-        if (storedVisited2.length >= checklistItems.length) {
+        if (storedVisited.length >= checklistItems.length) {
           sessionStorage.setItem("CompletedAll", "true");
         }
         window.location.href = it.url;
@@ -1454,9 +1572,13 @@ async function Checklist(workspace_id, obj) {
         subtitle = "Describe the purpose of this checklist...",
         items = [],
         completion = 0,
+        congratulatory_message = "Congrats! You've completed all items!",
+        button_text = "Get Started",
         branding_data: cssConfig = {},
         targeting_data: targetingData = {},
-        customCSS = ""
+        url = "",
+        customCSS = "",
+        button_present = false
       } = matchedChecklist;
       const fullData = {
         checklist: matchedChecklist,
@@ -1464,6 +1586,7 @@ async function Checklist(workspace_id, obj) {
         targetingData,
         customCSS
       };
+      const redirectUrl = url;
       sessionStorage.removeItem("onboardingVisited");
       Onboarding(
         title,
@@ -1474,7 +1597,11 @@ async function Checklist(workspace_id, obj) {
         targetingData,
         customCSS,
         user_var,
-        checklist_id
+        checklist_id,
+        congratulatory_message,
+        button_text,
+        redirectUrl,
+        button_present
       );
       return matchedChecklist;
     } catch (err) {
@@ -1573,17 +1700,25 @@ var RIVIA_TOUR = function() {
     card_footer = true,
     card_back_button = false,
     card_next_button = true,
-    card_skip_button = false
+    card_skip_button = false,
+    preview_width = null,
+    preview_height = null,
+    buttons = [],
+    stepIndex = null
   }) {
     const anchor = await findBySelector(selector);
     if (!anchor) return null;
     const tip = document.createElement("div");
     tip.dataset.riviaTipId = id;
+    const parsedPreviewWidth = Number.parseInt(preview_width, 10);
+    const parsedPreviewHeight = Number.parseInt(preview_height, 10);
+    const resolvedPreviewWidth = Number.isInteger(parsedPreviewWidth) && parsedPreviewWidth > 0 ? parsedPreviewWidth : null;
+    const resolvedPreviewHeight = Number.isInteger(parsedPreviewHeight) && parsedPreviewHeight > 0 ? parsedPreviewHeight : null;
     const tipStyle = isPreview ? `
     position: absolute;
-    min-width: 360px;
+    ${resolvedPreviewWidth ? `width: ${resolvedPreviewWidth}px;` : "min-width: 360px;"}
     max-width: 420px;
-    min-height: 120px;
+    ${resolvedPreviewHeight ? `height: ${resolvedPreviewHeight}px;` : "min-height: 120px;"}
     padding: 18px 20px;
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     color: #1a202c;
@@ -1697,6 +1832,10 @@ var RIVIA_TOUR = function() {
     }
     tip.appendChild(contentWrapper);
     tip.appendChild(controls);
+    if (Array.isArray(buttons) && buttons.length > 0) {
+      const buttonsSection = createCardButtonsSection({ buttons }, stepIndex ?? STATE.tourIndex, tip);
+      tip.appendChild(buttonsSection);
+    }
     tip.appendChild(arrow);
     document.body.appendChild(tip);
     positionTooltip(anchor, tip, arrow, placement);
@@ -1843,6 +1982,119 @@ var RIVIA_TOUR = function() {
       displayText: isAvailable ? "\u2713 On this page" : `\u{1F4CD} Go to: ${targetUrl}`
     };
   }
+  function resolveConfiguredStepIndex(rawValue, fallbackIndex = null) {
+    const parsed = Number.parseInt(rawValue, 10);
+    if (Number.isInteger(parsed) && parsed >= 0 && parsed < STATE.tips.length) {
+      return parsed;
+    }
+    if (Number.isInteger(fallbackIndex) && fallbackIndex >= 0 && fallbackIndex < STATE.tips.length) {
+      return fallbackIndex;
+    }
+    return null;
+  }
+  async function goToStepIndex(targetIndex, isPreviewMode = STATE.isPreviewMode) {
+    const resolvedIndex = resolveConfiguredStepIndex(targetIndex);
+    if (resolvedIndex === null) {
+      return false;
+    }
+    const targetStep = STATE.tips[resolvedIndex];
+    if (!targetStep) {
+      return false;
+    }
+    const targetUrlInfo = getStepUrlInfo(targetStep);
+    if (targetUrlInfo && !targetUrlInfo.isAvailable && targetStep.targetUrl) {
+      STATE.tourIndex = resolvedIndex;
+      sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+        tourIndex: resolvedIndex,
+        tourId: STATE.tour_id,
+        user_var1,
+        isPreviewMode,
+        tips: STATE.tips,
+        title: STATE.title || "Untitled Tour",
+        publish: STATE.publish
+      }));
+      const navUrl = addTourParamsToUrl(targetStep.targetUrl, STATE.tour_id);
+      window.location.href = navUrl;
+      return true;
+    }
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((node) => node.remove());
+    STATE.tourIndex = resolvedIndex;
+    cleanupAllOverlays();
+    await showStep(resolvedIndex, isPreviewMode);
+    return true;
+  }
+  function createCardButtonsSection(step, stepIndex, hostElement = null) {
+    const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+    const buttons = Array.isArray(step?.buttons) ? step.buttons.slice().sort((a, b) => (a.position ?? 0) - (b.position ?? 0)) : [];
+    const buttonsSection = document.createElement("div");
+    buttonsSection.className = "rivia-step-buttons-section";
+    buttonsSection.style.cssText = `
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 30;
+    `;
+    if (!buttons.length) {
+      return buttonsSection;
+    }
+    const buttonsList = document.createElement("div");
+    buttonsList.style.cssText = `
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    `;
+    buttonsSection.appendChild(buttonsList);
+    const hostRect = hostElement?.getBoundingClientRect() || buttonsSection.getBoundingClientRect();
+    const width = Math.max(1, hostRect.width);
+    const height = Math.max(1, hostRect.height);
+    buttons.forEach((buttonData) => {
+      const hasExplicitWidth = Number.isInteger(buttonData.width) && buttonData.width > 0;
+      const hasExplicitHeight = Number.isInteger(buttonData.height) && buttonData.height > 0;
+      const xPercentRaw = Number.parseFloat(buttonData.x_percent);
+      const yPercentRaw = Number.parseFloat(buttonData.y_percent);
+      const fallbackX = Number.parseFloat(buttonData.x);
+      const fallbackY = Number.parseFloat(buttonData.y);
+      const normalizedX = Number.isFinite(xPercentRaw) ? xPercentRaw : Number.isFinite(fallbackX) ? fallbackX / width * 100 : 50;
+      const normalizedY = Number.isFinite(yPercentRaw) ? yPercentRaw : Number.isFinite(fallbackY) ? fallbackY / height * 100 : 50;
+      const clampedX = clamp(normalizedX, 4, 96);
+      const clampedY = clamp(normalizedY, 6, 94);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = buttonData.text || buttonData.name || "Button";
+      button.style.cssText = `
+        position: absolute;
+        left: ${clampedX}%;
+        top: ${clampedY}%;
+        transform: translate(-50%, -50%);
+        pointer-events: auto;
+        z-index: 31;
+        ${hasExplicitWidth ? `width: ${buttonData.width}px;` : "padding: 8px 16px;"}
+        ${hasExplicitHeight ? `height: ${buttonData.height}px;` : ""}
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 999px;
+        background: ${buttonData.color || "#2563eb"};
+        color: #ffffff;
+        font-size: 13px;
+        font-weight: 600;
+        cursor: pointer;
+        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
+        white-space: nowrap;
+      `;
+      button.onclick = async (event) => {
+        event.stopPropagation();
+        const targetIndex = resolveConfiguredStepIndex(buttonData.go_to_step_index, stepIndex + 1);
+        if (targetIndex !== null) {
+          await goToStepIndex(targetIndex, true);
+        }
+      };
+      buttonsList.appendChild(button);
+    });
+    return buttonsSection;
+  }
   async function showStep(i, isPreview = true) {
     uploadVisitedPagesInBackground(STATE.tour_id, user_var1, i);
     console.log("Showing step", i, "of", STATE.tips.length);
@@ -1984,7 +2236,7 @@ var RIVIA_TOUR = function() {
         }
       }
       setTimeout(async () => {
-        const tip2 = await createTooltip({ ...step, isPreview });
+        const tip2 = await createTooltip({ ...step, isPreview, stepIndex: i });
         if (tip2) {
           await attachNavigationButtons(tip2, i, isPreview);
           try {
@@ -2016,7 +2268,7 @@ var RIVIA_TOUR = function() {
         el.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
       }
     }
-    const tip = await createTooltip({ ...step, isPreview });
+    const tip = await createTooltip({ ...step, isPreview, stepIndex: i });
     console.log("nextUrl for step", step.nextUrl);
     if (!tip) {
       const stepUrlInfo = getStepUrlInfo(step);
@@ -2554,6 +2806,7 @@ var RIVIA_TOUR = function() {
     modal.id = "rivia-welcome-preview-modal";
     const bgColor = step.welcome_bg_color || "#ffffff";
     modal.style.cssText = `
+      position: relative;
       background: ${bgColor};
       border-radius: 12px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -2596,6 +2849,7 @@ var RIVIA_TOUR = function() {
     const footerTextColor = step.welcome_footer_text_color || "#333333";
     const footerHeight = step.welcome_footer_height || 60;
     contentSection.style.cssText = `
+      position: relative;
       padding: ${footerPadding}px 30px;
       text-align: center;
       background: ${footerBgColor};
@@ -2619,6 +2873,8 @@ var RIVIA_TOUR = function() {
     `;
     contentSection.appendChild(descriptionText);
     modal.appendChild(contentSection);
+    const welcomeButtonsSection = createCardButtonsSection(step, stepIndex, contentSection);
+    contentSection.appendChild(welcomeButtonsSection);
     const buttonSection = document.createElement("div");
     buttonSection.style.cssText = `
       display: flex;
@@ -2688,7 +2944,14 @@ var RIVIA_TOUR = function() {
         "rivia-welcome-preview-backdrop"
       );
       if (backdropOverlay) backdropOverlay.remove();
-      if (advanceAction === "next button") {
+      if (advanceAction === "go to step") {
+        const targetIndex = resolveConfiguredStepIndex(step.go_to_step_index, stepIndex + 1);
+        if (targetIndex !== null) {
+          await goToStepIndex(targetIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "next button") {
         STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
         if (STATE.tourIndex < STATE.tips.length) {
           showStep(STATE.tourIndex, true);
@@ -2797,6 +3060,7 @@ var RIVIA_TOUR = function() {
     const accentColor = step.modal_accent_color || "#10b981";
     modal.style.cssText = `
       pointer-events: auto;
+      position: relative;
       background: ${modalBgColor};
       border-radius: 12px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -2819,6 +3083,7 @@ var RIVIA_TOUR = function() {
     const contentSection = document.createElement("div");
     contentSection.style.cssText = `
       flex: 1;
+      position: relative;
       padding: 30px;
       color: ${modalTextColor};
       overflow-y: auto;
@@ -2827,6 +3092,8 @@ var RIVIA_TOUR = function() {
     `;
     contentSection.textContent = step.content || "Type your content here.";
     modal.appendChild(contentSection);
+    const modalButtonsSection = createCardButtonsSection(step, stepIndex, contentSection);
+    contentSection.appendChild(modalButtonsSection);
     const footerSection = document.createElement("div");
     footerSection.style.cssText = `
       background: ${modalFooterBgColor};
@@ -2889,7 +3156,14 @@ var RIVIA_TOUR = function() {
         "rivia-modal-dialog-preview-backdrop"
       );
       if (backdropOverlay) backdropOverlay.remove();
-      if (advanceAction === "next button") {
+      if (advanceAction === "go to step") {
+        const targetIndex = resolveConfiguredStepIndex(step.go_to_step_index, stepIndex + 1);
+        if (targetIndex !== null) {
+          await goToStepIndex(targetIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "next button") {
         STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
         if (STATE.tourIndex < STATE.tips.length) {
           showStep(STATE.tourIndex, true);
@@ -3036,7 +3310,18 @@ var RIVIA_TOUR = function() {
         if (isPreview)
           next.style.background = "linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%)";
       };
-      next.onclick = () => i === STATE.tips.length - 1 ? endTour() : nextStep();
+      next.onclick = async () => {
+        if (advanceAction === "go to step") {
+          const targetIndex = resolveConfiguredStepIndex(step.go_to_step_index, i + 1);
+          if (targetIndex !== null) {
+            await goToStepIndex(targetIndex, isPreview);
+          } else {
+            endTour();
+          }
+        } else {
+          i === STATE.tips.length - 1 ? endTour() : nextStep();
+        }
+      };
       nav.appendChild(next);
     }
     if (card_skip_button) {
@@ -3428,6 +3713,7 @@ var RIVIA_TOUR = function() {
     modal.id = "rivia-feedback-preview-modal";
     const bgColor = step.feedback_bg_color || "#ffffff";
     modal.style.cssText = `
+      position: relative;
       background: ${bgColor};
       border-radius: 12px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -3470,6 +3756,7 @@ var RIVIA_TOUR = function() {
     const footerTextColor = step.feedback_footer_text_color || "#333333";
     const footerHeight = step.feedback_footer_height || 60;
     contentSection.style.cssText = `
+      position: relative;
       padding: ${footerPadding}px 30px;
       text-align: center;
       background: ${footerBgColor};
@@ -3546,6 +3833,8 @@ var RIVIA_TOUR = function() {
     });
     contentSection.appendChild(emojiContainer);
     modal.appendChild(contentSection);
+    const feedbackButtonsSection = createCardButtonsSection(step, stepIndex, contentSection);
+    contentSection.appendChild(feedbackButtonsSection);
     const buttonSection = document.createElement("div");
     buttonSection.style.cssText = `
       display: flex;
@@ -3616,7 +3905,14 @@ var RIVIA_TOUR = function() {
         if (STATE.tour_id) putTips();
         else saveTips();
       }
-      if (advanceAction === "next button") {
+      if (advanceAction === "go to step") {
+        const targetIndex = resolveConfiguredStepIndex(step.go_to_step_index, stepIndex + 1);
+        if (targetIndex !== null) {
+          await goToStepIndex(targetIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "next button") {
         STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
         if (STATE.tourIndex < STATE.tips.length) {
           showStep(STATE.tourIndex, true);
@@ -3750,10 +4046,446 @@ function evaluateRules2(rules, context) {
   }
   return finalResult;
 }
+function findAnchorForParallelStep(selector) {
+  if (!selector || typeof document === "undefined") {
+    return null;
+  }
+  try {
+    const element = document.querySelector(selector);
+    if (element) {
+      return element;
+    }
+  } catch {
+  }
+  const idMatch = selector.match(/#([\w-]+)/);
+  if (idMatch) {
+    const byId = document.getElementById(idMatch[1]);
+    if (byId) {
+      return byId;
+    }
+  }
+  const classMatch = selector.match(/\.([\w-]+)/);
+  if (classMatch) {
+    const byClass = document.querySelector(`.${classMatch[1]}`);
+    if (byClass) {
+      return byClass;
+    }
+  }
+  return null;
+}
+function removeParallelTourUi(tourId) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.querySelectorAll(`[data-rivia-parallel-tour-id="${tourId}"]`).forEach((node) => {
+    node.remove();
+  });
+}
+function positionParallelTooltip(anchor, tooltip, slotIndex = 0) {
+  if (!tooltip || typeof window === "undefined") {
+    return;
+  }
+  if (anchor) {
+    const rect = anchor.getBoundingClientRect();
+    const tipRect = tooltip.getBoundingClientRect();
+    let left = rect.right + 12;
+    let top = rect.top + window.scrollY;
+    if (left + tipRect.width > window.innerWidth - 8) {
+      left = rect.left - tipRect.width - 12;
+    }
+    if (left < 8) {
+      left = 8;
+    }
+    top = Math.max(8 + window.scrollY, Math.min(top, window.scrollY + window.innerHeight - tipRect.height - 8));
+    tooltip.style.left = `${left + window.scrollX}px`;
+    tooltip.style.top = `${top}px`;
+    return;
+  }
+  tooltip.style.left = `${window.scrollX + Math.max(12, window.innerWidth - 350)}px`;
+  tooltip.style.top = `${window.scrollY + 20 + slotIndex * 160}px`;
+}
+function syncParallelTourProgress(tourId, userId, index, isCompleted = false) {
+  if (!tourId || !userId) {
+    return;
+  }
+  fetch(`https://demoapi.rivia.ai/tours_clients/${tourId}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({
+      name: userId,
+      tourIndex: index,
+      is_completed: isCompleted
+    }),
+    keepalive: true
+  }).catch(() => {
+  });
+}
+function applyParallelHighlight(runtime, element) {
+  if (!runtime || !element) {
+    return;
+  }
+  if (runtime.highlightedElement && runtime.highlightedElement !== element) {
+    runtime.highlightedElement.style.outline = runtime.highlightSnapshot?.outline || "";
+    runtime.highlightedElement.style.outlineOffset = runtime.highlightSnapshot?.outlineOffset || "";
+    runtime.highlightedElement.style.backgroundColor = runtime.highlightSnapshot?.backgroundColor || "";
+  }
+  runtime.highlightedElement = element;
+  runtime.highlightSnapshot = {
+    outline: element.style.outline,
+    outlineOffset: element.style.outlineOffset,
+    backgroundColor: element.style.backgroundColor
+  };
+  element.style.outline = "3px solid #2563eb";
+  element.style.outlineOffset = "2px";
+  element.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+}
+function clearParallelHighlight(runtime) {
+  if (!runtime?.highlightedElement) {
+    return;
+  }
+  runtime.highlightedElement.style.outline = runtime.highlightSnapshot?.outline || "";
+  runtime.highlightedElement.style.outlineOffset = runtime.highlightSnapshot?.outlineOffset || "";
+  runtime.highlightedElement.style.backgroundColor = runtime.highlightSnapshot?.backgroundColor || "";
+  runtime.highlightedElement = null;
+  runtime.highlightSnapshot = null;
+}
+function advanceParallelTour(runtime) {
+  const isLastStep = runtime.index >= runtime.steps.length - 1;
+  if (isLastStep) {
+    syncParallelTourProgress(runtime.tourId, runtime.userId, runtime.index, true);
+    clearParallelHighlight(runtime);
+    removeParallelTourUi(runtime.tourId);
+    if (window.__riviaParallelTourRuntimes) {
+      delete window.__riviaParallelTourRuntimes[runtime.tourId];
+    }
+    return;
+  }
+  runtime.index += 1;
+  syncParallelTourProgress(runtime.tourId, runtime.userId, runtime.index, false);
+  renderParallelTourStep(runtime);
+}
+function renderParallelWelcomeCard(runtime, step) {
+  const overlay2 = document.createElement("div");
+  overlay2.dataset.riviaParallelTourId = runtime.tourId;
+  overlay2.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2147483644;
+  `;
+  const modal = document.createElement("div");
+  modal.dataset.riviaParallelTourId = runtime.tourId;
+  modal.style.cssText = `
+    position: relative;
+    background: ${step.welcome_bg_color || "#ffffff"};
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 700px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    padding: 0;
+  `;
+  const header = document.createElement("div");
+  const headerHeight = step.welcome_header_height || 80;
+  header.style.cssText = `
+    background: ${step.welcome_header_bg_color || "#667eea"};
+    padding: ${headerHeight / 2}px 30px;
+    color: ${step.welcome_header_text_color || "#ffffff"};
+    border-radius: 12px 12px 0 0;
+    text-align: center;
+    min-height: ${headerHeight}px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+  const title = document.createElement("h1");
+  title.textContent = step.title || runtime.title || "Welcome!";
+  title.style.cssText = `
+    margin: 0;
+    font-size: 32px;
+    font-weight: bold;
+    color: ${step.welcome_header_text_color || "#ffffff"};
+    font-family: inherit;
+  `;
+  header.appendChild(title);
+  modal.appendChild(header);
+  const content = document.createElement("div");
+  const footerHeight = step.welcome_footer_height || 60;
+  const footerPadding = step.welcome_footer_padding || 20;
+  content.style.cssText = `
+    padding: ${footerPadding}px 30px;
+    text-align: center;
+    background: ${step.welcome_footer_bg_color || "#ffffff"};
+    color: ${step.welcome_footer_text_color || "#333333"};
+    min-height: ${footerHeight}px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+  const description = document.createElement("p");
+  description.textContent = step.content || "Welcome message";
+  description.style.cssText = `
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.6;
+    color: ${step.welcome_footer_text_color || "#333333"};
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-family: inherit;
+  `;
+  content.appendChild(description);
+  modal.appendChild(content);
+  const buttonSection = document.createElement("div");
+  buttonSection.style.cssText = `
+    display: flex;
+    gap: 12px;
+    padding: 20px 30px;
+    border-top: 1px solid #e5e7eb;
+    justify-content: flex-end;
+  `;
+  const skipBtn = document.createElement("button");
+  skipBtn.textContent = step.welcome_skip_label || "Skip";
+  skipBtn.style.cssText = `
+    padding: 8px 16px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background: white;
+    color: #6b7280;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+  `;
+  skipBtn.onclick = () => {
+    syncParallelTourProgress(runtime.tourId, runtime.userId, runtime.index, true);
+    clearParallelHighlight(runtime);
+    removeParallelTourUi(runtime.tourId);
+    if (window.__riviaParallelTourRuntimes) {
+      delete window.__riviaParallelTourRuntimes[runtime.tourId];
+    }
+  };
+  buttonSection.appendChild(skipBtn);
+  const nextBtn = document.createElement("button");
+  nextBtn.textContent = step.welcome_next_label || (runtime.index >= runtime.steps.length - 1 ? "Finish \u2713" : "Next");
+  nextBtn.style.cssText = `
+    padding: 8px 16px;
+    border: none;
+    border-radius: 6px;
+    background: #2563eb;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+  `;
+  nextBtn.onclick = () => {
+    advanceParallelTour(runtime);
+  };
+  buttonSection.appendChild(nextBtn);
+  modal.appendChild(buttonSection);
+  overlay2.appendChild(modal);
+  document.body.appendChild(overlay2);
+  overlay2.onclick = (e) => {
+    if (e.target === overlay2) {
+      removeParallelTourUi(runtime.tourId);
+      renderParallelTourStep(runtime);
+    }
+  };
+}
+function renderParallelTourStep(runtime) {
+  if (!runtime || !runtime.steps?.length || typeof document === "undefined") {
+    return;
+  }
+  removeParallelTourUi(runtime.tourId);
+  const step = runtime.steps[runtime.index];
+  if (!step) {
+    return;
+  }
+  if (step.card_type === "welcome") {
+    renderParallelWelcomeCard(runtime, step);
+    return;
+  }
+  const anchor = findAnchorForParallelStep(step.selector);
+  if (anchor) {
+    applyParallelHighlight(runtime, anchor);
+  }
+  const tooltip = document.createElement("div");
+  tooltip.dataset.riviaParallelTourId = runtime.tourId;
+  tooltip.style.cssText = `
+    position: absolute;
+    min-width: 360px;
+    max-width: 420px;
+    min-height: 120px;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    color: #1a202c;
+    border-radius: 14px;
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
+    z-index: 2147483647;
+    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  `;
+  const title = document.createElement("div");
+  title.style.cssText = "font-weight:700; margin-bottom:10px; font-size:16px; color: #1a202c;";
+  title.textContent = step.title || runtime.title || "Tour Step";
+  tooltip.appendChild(title);
+  const content = document.createElement("div");
+  content.style.cssText = "font-size:13px; line-height:1.6; color: #4a5568; margin-bottom: 10px;";
+  content.textContent = step.content || "";
+  tooltip.appendChild(content);
+  const arrow = document.createElement("div");
+  arrow.style.cssText = `
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    transform: rotate(45deg);
+    left: -6px;
+    top: 18px;
+  `;
+  tooltip.appendChild(arrow);
+  const footer = document.createElement("div");
+  footer.style.cssText = "display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px;";
+  const actions = document.createElement("div");
+  actions.style.cssText = "display: flex; gap: 6px;";
+  const prevBtn = document.createElement("button");
+  prevBtn.type = "button";
+  prevBtn.textContent = "\u2190 Back";
+  prevBtn.disabled = runtime.index === 0;
+  prevBtn.style.cssText = `
+    border: 1px solid rgba(37, 99, 235, 0.3);
+    background: ${runtime.index === 0 ? "rgba(37, 99, 235, 0.08)" : "rgba(37, 99, 235, 0.1)"};
+    color: #2563eb;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: ${runtime.index === 0 ? "not-allowed" : "pointer"};
+  `;
+  prevBtn.onclick = () => {
+    if (runtime.index === 0) {
+      return;
+    }
+    runtime.index -= 1;
+    syncParallelTourProgress(runtime.tourId, runtime.userId, runtime.index, false);
+    renderParallelTourStep(runtime);
+  };
+  actions.appendChild(prevBtn);
+  const nextBtn = document.createElement("button");
+  nextBtn.type = "button";
+  const isLastStep = runtime.index >= runtime.steps.length - 1;
+  nextBtn.textContent = isLastStep ? "Finish \u2713" : "Next \u2192";
+  nextBtn.style.cssText = `
+    border: none;
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%);
+    color: #ffffff;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+  `;
+  nextBtn.onclick = () => {
+    advanceParallelTour(runtime);
+  };
+  actions.appendChild(nextBtn);
+  const skipBtn = document.createElement("button");
+  skipBtn.type = "button";
+  skipBtn.textContent = "Skip";
+  skipBtn.style.cssText = `
+    border: 1px solid rgba(168, 85, 247, 0.3);
+    background: rgba(168, 85, 247, 0.1);
+    color: #a855f7;
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+  `;
+  skipBtn.onclick = () => {
+    syncParallelTourProgress(runtime.tourId, runtime.userId, runtime.index, true);
+    clearParallelHighlight(runtime);
+    removeParallelTourUi(runtime.tourId);
+    if (window.__riviaParallelTourRuntimes) {
+      delete window.__riviaParallelTourRuntimes[runtime.tourId];
+    }
+  };
+  actions.appendChild(skipBtn);
+  footer.appendChild(actions);
+  tooltip.appendChild(footer);
+  const stepIndicator = document.createElement("div");
+  stepIndicator.style.cssText = `
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    font-size: 11px;
+    color: rgba(37, 99, 235, 0.6);
+    font-weight: 500;
+  `;
+  stepIndicator.textContent = `Step ${runtime.index + 1} of ${runtime.steps.length}`;
+  tooltip.appendChild(stepIndicator);
+  document.body.appendChild(tooltip);
+  positionParallelTooltip(anchor, tooltip, runtime.slotIndex || 0);
+}
+async function fetchTourStepsForParallel(tourId) {
+  const res = await fetch(`https://demoapi.rivia.ai/tours2/${tourId}`, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" }
+  });
+  if (!res.ok) {
+    return [];
+  }
+  const data = await res.json();
+  return Array.isArray(data?.tour?.steps) ? data.tour.steps : [];
+}
+async function startTourInParallelMode(tourDef, userId, slotIndex = 0) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const tourId = tourDef?.tour_id;
+  if (!tourId) {
+    return;
+  }
+  if (!window.__riviaParallelTourRuntimes) {
+    window.__riviaParallelTourRuntimes = {};
+  }
+  if (window.__riviaParallelTourRuntimes[tourId]) {
+    renderParallelTourStep(window.__riviaParallelTourRuntimes[tourId]);
+    return;
+  }
+  const steps = await fetchTourStepsForParallel(tourId);
+  if (!steps.length) {
+    return;
+  }
+  const runtime = {
+    tourId,
+    title: tourDef?.title || `Tour ${tourId}`,
+    steps,
+    index: 0,
+    userId,
+    slotIndex,
+    highlightedElement: null,
+    highlightSnapshot: null
+  };
+  window.__riviaParallelTourRuntimes[tourId] = runtime;
+  syncParallelTourProgress(tourId, userId, 0, false);
+  renderParallelTourStep(runtime);
+}
 async function Tours(workspace_id, obj) {
   if (!sessionStorage.getItem("rivia_tour_state")) {
-    window.userId = obj.userid;
-    let userId = obj.userid;
+    const currentUserId = obj?.userid || "Guest_User";
+    window.userId = currentUserId;
+    window.current_username = currentUserId;
+    window.user_var = currentUserId;
+    sessionStorage.setItem("current_username", currentUserId);
+    sessionStorage.setItem("user_var", currentUserId);
+    sessionStorage.setItem("rivia_user_name", currentUserId);
+    let userId = currentUserId;
     window.sign_up_at = obj.sign_up_at;
     window.role = obj.role;
     window.email = obj.email;
@@ -3799,49 +4531,92 @@ async function Tours(workspace_id, obj) {
       const tours = data.tour || [];
       if (!Array.isArray(tours) || tours.length === 0) return;
       const currentPath = window.location.href;
-      const matchedTour = tours.find((chk) => {
-        const routes = chk?.url;
+      console.log("userid", obj.userid);
+      const context = buildContext2(obj);
+      const eligibleTours = tours.filter((tourDef) => {
+        const routes = tourDef?.url;
         console.log("Checking tour:", window.location.href, "with routes:", routes);
-        if (!chk?.publish && !chk?.published)
+        if (!tourDef?.publish && !tourDef?.published) {
           return false;
-        return doesRouteMatch2(routes, currentPath);
+        }
+        if (!doesRouteMatch2(routes, currentPath)) {
+          return false;
+        }
+        const rules = tourDef?.targeting_data?.custom_rules || [];
+        return evaluateRules2(rules, context);
       });
-      if (!matchedTour) {
+      if (!eligibleTours.length) {
         console.log("No tour applicable for this route");
         return;
       }
-      console.log("userid", obj.userid);
-      console.log("matched ch", matchedTour);
-      const rules = matchedTour?.targeting_data?.custom_rules || [];
-      console.log("rules", rules);
-      const context = buildContext2(obj);
-      const shouldShow = evaluateRules2(rules, context);
-      if (!shouldShow) {
-        console.log("User does not meet targeting rules for this tour");
-        return;
-      }
-      const {
-        tour_id,
-        title = "Untitled Tour",
-        subtitle = "Describe the purpose of this tour...",
-        items = [],
-        completion = 0,
-        branding_data: cssConfig = {},
-        targeting_data: targetingData = {},
-        customCSS = ""
-      } = matchedTour;
-      const fullData = {
-        tour: matchedTour,
-        cssConfig,
-        targetingData,
-        customCSS
+      const queuePendingTour = (pendingTour) => {
+        if (!Array.isArray(window.__riviaPendingTours)) {
+          window.__riviaPendingTours = [];
+        }
+        window.__riviaPendingTours = window.__riviaPendingTours.filter(
+          (tour) => tour.tourId !== pendingTour.tourId
+        );
+        window.__riviaPendingTours.push(pendingTour);
+        window.__riviaStartPendingTourByEvent = async (message) => {
+          const incomingEvent = typeof message === "string" ? message.trim().toLowerCase() : "";
+          if (!incomingEvent || !Array.isArray(window.__riviaPendingTours) || !window.__riviaPendingTours.length) {
+            return false;
+          }
+          let startedAnyTour = false;
+          const remainingTours = [];
+          for (const pending of window.__riviaPendingTours) {
+            if (pending.eventName === incomingEvent) {
+              await pending.start();
+              startedAnyTour = true;
+            } else {
+              remainingTours.push(pending);
+            }
+          }
+          window.__riviaPendingTours = remainingTours;
+          return startedAnyTour;
+        };
       };
-      RIVIA_TOUR.loadTips(tour_id, userId).then(() => {
-        try {
-          RIVIA_TOUR.playTour();
-        } catch (err) {
+      const startTourDefinition = async (tourDef, forceStart = false, useParallelMode = false, slotIndex = 0) => {
+        const tourId = tourDef?.tour_id;
+        if (!tourId) {
+          return;
         }
-      });
+        const startMatchedTour = async () => {
+          if (useParallelMode) {
+            await startTourInParallelMode(tourDef, userId, slotIndex);
+            return;
+          }
+          try {
+            if (window.__riviaStartedTourId === tourId) {
+              return;
+            }
+            await RIVIA_TOUR.loadTips(tourId, userId);
+            RIVIA_TOUR.playTour();
+            window.__riviaStartedTourId = tourId;
+          } catch {
+          }
+        };
+        const rawEventName = tourDef?.event_name;
+        const normalizedEventName = typeof rawEventName === "string" ? rawEventName.trim().toLowerCase() : "";
+        const shouldStartInstantly = forceStart || !normalizedEventName || normalizedEventName === "url";
+        if (shouldStartInstantly) {
+          await startMatchedTour();
+          return;
+        }
+        queuePendingTour({
+          eventName: normalizedEventName,
+          tourId,
+          start: startMatchedTour
+        });
+      };
+      if (eligibleTours.length > 1) {
+        for (let index = 0; index < eligibleTours.length; index += 1) {
+          const tourDef = eligibleTours[index];
+          await startTourDefinition(tourDef, false, true, index);
+        }
+        return;
+      }
+      await startTourDefinition(eligibleTours[0], false);
     } catch (err) {
       console.warn("Tour error:", err.message);
       throw err;
@@ -3849,17 +4624,79 @@ async function Tours(workspace_id, obj) {
   }
 }
 var rivia_tour_default = Tours;
+function resolveCurrentUsername() {
+  if (typeof window === "undefined") {
+    return "Guest_User";
+  }
+  return window.user_var || window.current_username || window.sessionStorage.getItem("rivia_user_name") || window.sessionStorage.getItem("current_username") || window.sessionStorage.getItem("user_var") || "Guest_User";
+}
+async function restartTourById(tourId, userName = resolveCurrentUsername()) {
+  if (!tourId) {
+    throw new Error("Tour ID is required to restart a tour.");
+  }
+  const currentUserName = typeof userName === "string" && userName.trim() ? userName.trim() : resolveCurrentUsername();
+  const backendUrl = `https://demoapi.rivia.ai/tours_clients/${tourId}`;
+  const response = await fetch(backendUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({
+      name: currentUserName,
+      tourIndex: 0,
+      is_completed: false
+    }),
+    keepalive: true
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to restart tour ${tourId}: ${response.status}`);
+  }
+  if (typeof window !== "undefined") {
+    window.sessionStorage.removeItem("rivia_tour_state");
+    window.__riviaStartedTourId = null;
+    window.__riviaPendingTour = null;
+    window.location.reload();
+  }
+  return response;
+}
+if (typeof window !== "undefined") {
+  window.__riviaRestartTourById = restartTourById;
+}
+if (typeof document !== "undefined" && typeof window !== "undefined") {
+  if (!window.__riviaRestartTourListenerAttached) {
+    window.__riviaRestartTourListenerAttached = true;
+    document.addEventListener("click", async (event) => {
+      const target = event.target instanceof Element ? event.target.closest("[rivia-restart-tour]") : null;
+      if (!target) {
+        return;
+      }
+      const tourId = target.getAttribute("rivia-restart-tour");
+      if (!tourId) {
+        return;
+      }
+      try {
+        await restartTourById(tourId, resolveCurrentUsername());
+      } catch (error) {
+        console.error("Tour restart failed:", error);
+      }
+    });
+  }
+}
 
 // src/utils/banner.js
 function injectBanner(banner = {}, opts = {}, userId, bannerId) {
   try {
-    let uploadVisitedPagesInBackground2 = function(bannerId2) {
-      console.log("Uploading visited pages in background for banner ID: and user_var:", userId);
+    let uploadVisitedPagesInBackground2 = function(currentBannerId) {
+      console.log("Uploading visited pages in background", { bannerId: currentBannerId, userId });
       let user_var2 = userId;
-      const backendUrl22 = `https://demoapi.rivia.ai/banners_clients/${bannerId2}`;
+      if (!currentBannerId) {
+        console.error("\u26A0\uFE0F Background upload skipped: missing banner id");
+        return;
+      }
+      const backendUrl22 = `https://demoapi.rivia.ai/banners_clients/${currentBannerId}`;
       try {
         const payload = {
           name: user_var2,
+          user_id: user_var2,
           is_completed: true
         };
         fetch(backendUrl22, {
@@ -3872,15 +4709,19 @@ function injectBanner(banner = {}, opts = {}, userId, bannerId) {
           if (res.status === 404) {
             throw new Error("Invalid banner id");
           }
-          throw new Error(`Upload failed: ${res.status}`);
+          if (!res.ok) {
+            throw new Error(`Upload failed: ${res.status}`);
+          }
+          return res;
         }).catch((err) => {
-          console.error("\u26A0\uFE0F Background PUT upload failed:", err);
+          console.error("\u26A0\uFE0F Background POST upload failed:", err);
         });
       } catch (err) {
         console.error("\u274C Error preparing background upload:", err);
       }
     };
     var uploadVisitedPagesInBackground = uploadVisitedPagesInBackground2;
+    const resolvedBannerId = bannerId || banner?.banner_id || banner?.id || banner?._id;
     const prefix = opts.idPrefix || "rivia";
     const id = `${prefix}-banner`;
     const old = document.getElementById(id);
@@ -3971,7 +4812,7 @@ function injectBanner(banner = {}, opts = {}, userId, bannerId) {
       } else {
         a.onclick = () => {
           container.remove();
-          uploadVisitedPagesInBackground2(bannerId);
+          uploadVisitedPagesInBackground2(resolvedBannerId);
         };
       }
       if (btn.border) {
@@ -4002,7 +4843,7 @@ function injectBanner(banner = {}, opts = {}, userId, bannerId) {
         closeBtn.style.marginLeft = "auto";
         closeBtn.onclick = () => {
           container.remove();
-          uploadVisitedPagesInBackground2(bannerId);
+          uploadVisitedPagesInBackground2(resolvedBannerId);
         };
         box.appendChild(closeBtn);
       }
@@ -4020,7 +4861,7 @@ function injectBanner(banner = {}, opts = {}, userId, bannerId) {
         closeBtn.style.color = banner.background.text_color || "#fff";
         closeBtn.onclick = () => {
           container.remove();
-          uploadVisitedPagesInBackground2(bannerId);
+          uploadVisitedPagesInBackground2(resolvedBannerId);
         };
         box.appendChild(closeBtn);
       }
@@ -4043,7 +4884,7 @@ function injectBanner(banner = {}, opts = {}, userId, bannerId) {
         closeBtn.style.marginLeft = "auto";
         closeBtn.onclick = () => {
           container.remove();
-          uploadVisitedPagesInBackground2(bannerId);
+          uploadVisitedPagesInBackground2(resolvedBannerId);
         };
         box.appendChild(closeBtn);
       }
@@ -4145,7 +4986,29 @@ async function Banner(workspace_id, obj) {
     window.email = obj.email;
     console.log("");
     try {
-      let doesRouteMatch2 = function(routes) {
+      let isBannerCompletedForUser2 = function(chk, userId) {
+        if (!chk || !userId) return false;
+        if (chk.user_id === userId && chk.is_completed === true) {
+          return true;
+        }
+        const userData = chk.user_data;
+        if (!userData) return false;
+        if (Array.isArray(userData)) {
+          return userData.some(
+            (entry) => entry && entry.is_completed === true && (entry.user_id === userId || entry.userid === userId || entry.name === userId || entry.id === userId)
+          );
+        }
+        if (typeof userData === "object") {
+          const direct = userData[userId];
+          if (direct && direct.is_completed === true) {
+            return true;
+          }
+          return Object.values(userData).some(
+            (entry) => entry && typeof entry === "object" && entry.is_completed === true && (entry.user_id === userId || entry.userid === userId || entry.name === userId || entry.id === userId)
+          );
+        }
+        return false;
+      }, doesRouteMatch2 = function(routes) {
         if (!Array.isArray(routes)) return true;
         const currentPath2 = window.location.pathname.toLowerCase();
         console.log("Current Path:", currentPath2);
@@ -4174,7 +5037,7 @@ async function Banner(workspace_id, obj) {
           last_name: obj2.last_name
         };
       };
-      var doesRouteMatch = doesRouteMatch2, escapeRegex = escapeRegex2, buildContext = buildContext2;
+      var isBannerCompletedForUser = isBannerCompletedForUser2, doesRouteMatch = doesRouteMatch2, escapeRegex = escapeRegex2, buildContext = buildContext2;
       const res = await fetch(
         `https://demoapi.rivia.ai/banner_by_workspace2/${workspace_id}`,
         {
@@ -4192,6 +5055,9 @@ async function Banner(workspace_id, obj) {
       const currentPath = window.location.pathname;
       const matchedbanner = banners.find((chk) => {
         const routes = chk?.targeting_data?.routes;
+        if (isBannerCompletedForUser2(chk, obj.userid)) {
+          return false;
+        }
         if (!chk?.publish)
           return false;
         if (!chk?.targeting_data?.display)
@@ -4262,57 +5128,152 @@ var banner_default = Banner;
 
 // src/utils/trigger-event.js
 var triggerEvent = async (message) => {
+  const normalizedMessage = typeof message === "string" ? message.trim().toLowerCase() : "";
+  if (typeof window.__riviaStartPendingTourByEvent === "function") {
+    try {
+      await window.__riviaStartPendingTourByEvent(message);
+    } catch (tourErr) {
+      console.warn("Tour trigger event handling failed:", tourErr);
+    }
+  }
+  const renderFallbackCompletionCard = (config = {}) => {
+    const completionConfig = window.completionCardConfig || {};
+    const mergedConfig = { ...completionConfig, ...config };
+    const {
+      topTitle = "Checklist Complete",
+      congratulatory_message = "\u{1F389}Congratulations! You have completed the checklist.",
+      button_text = "Get Started",
+      redirect_url = "/dashboard",
+      button_present = false,
+      cssConfig = {}
+    } = mergedConfig;
+    const shouldShowGoButton = button_present === true || button_present === "true" || button_present === 1 || button_present === "1";
+    const completionHeight = cssConfig.completion_height || "auto";
+    const completionWidth = cssConfig.completion_width || "300px";
+    const completionBackground = cssConfig.completion_background_color || "#ffffff";
+    const completionTextColor = cssConfig.completion_text_color || (completionBackground === "#ffffff" ? cssConfig.textColor || "#111827" : "#100d0d");
+    const completionFontSize = cssConfig.completion_font_size || cssConfig.fontSize || "16px";
+    const completionSubtitleColor = cssConfig.completion_subtitle_color || cssConfig.subtitleColor || completionTextColor;
+    const completionTitleFontFamily = cssConfig.completion_title_font_family || cssConfig.fontFamily || "Arial, sans-serif";
+    const completionTitleFontSize = cssConfig.completion_title_font_size || "18px";
+    const completionButtonBgColor = cssConfig.completion_button_bg_color || cssConfig.button_background_color || "#ffffff";
+    const completionButtonTextColor = cssConfig.completion_button_text_color || cssConfig.button_text_color || "#4CAF50";
+    const completionButtonFontFamily = cssConfig.completion_button_font_family || cssConfig.fontFamily || "Arial, sans-serif";
+    const completionButtonFontSize = cssConfig.completion_button_font_size || cssConfig.button_font_size || "14px";
+    const completionDismissBackgroundColor = cssConfig.completion_dismiss_background_color || "#f44336";
+    const completionDismissTextColor = cssConfig.completion_dismiss_text_color || "#ffffff";
+    const existingCard = document.getElementById("route-label");
+    if (existingCard) existingCard.remove();
+    const label = document.createElement("div");
+    label.id = "route-label";
+    Object.assign(label.style, {
+      position: "fixed",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      alignItems: "center",
+      width: completionWidth,
+      height: completionHeight,
+      backgroundColor: completionBackground,
+      color: completionTextColor,
+      padding: "15px",
+      borderRadius: "12px",
+      boxShadow: "0 6px 12px rgba(0,0,0,0.2)",
+      fontSize: completionFontSize,
+      fontFamily: cssConfig.fontFamily || "Arial, sans-serif",
+      zIndex: 9999,
+      display: "flex",
+      flexDirection: "column",
+      gap: "10px"
+    });
+    const message2 = document.createElement("div");
+    message2.innerText = congratulatory_message;
+    Object.assign(message2.style, {
+      color: completionSubtitleColor,
+      fontSize: completionFontSize,
+      lineHeight: "1.5",
+      textAlign: "center"
+    });
+    const btnContainer = document.createElement("div");
+    Object.assign(btnContainer.style, {
+      display: "flex",
+      justifyContent: shouldShowGoButton ? "space-between" : "flex-end",
+      gap: "10px",
+      marginTop: "4px"
+    });
+    if (shouldShowGoButton) {
+      const goBtn = document.createElement("button");
+      goBtn.innerText = button_text;
+      Object.assign(goBtn.style, {
+        padding: "8px 12px",
+        border: "none",
+        borderRadius: "6px",
+        cursor: "pointer",
+        backgroundColor: completionButtonBgColor,
+        color: completionButtonTextColor,
+        fontFamily: completionButtonFontFamily,
+        fontSize: completionButtonFontSize,
+        fontWeight: "bold"
+      });
+      goBtn.onclick = () => {
+        sessionStorage.setItem("CompletedAll", "false");
+        window.open(completionConfig.redirect_url || "/dashboard", "_blank");
+      };
+      btnContainer.appendChild(goBtn);
+    }
+    const closeBtn = document.createElement("button");
+    closeBtn.innerText = "Dismiss";
+    Object.assign(closeBtn.style, {
+      padding: "8px 12px",
+      border: "none",
+      borderRadius: "6px",
+      cursor: "pointer",
+      backgroundColor: completionDismissBackgroundColor,
+      color: completionDismissTextColor,
+      fontFamily: completionButtonFontFamily,
+      fontSize: completionButtonFontSize
+    });
+    closeBtn.onclick = () => {
+      label.style.opacity = 0;
+      sessionStorage.setItem("CompletedAll", "false");
+      setTimeout(() => label.remove(), 500);
+    };
+    if (congratulatory_message) {
+      label.appendChild(message2);
+    }
+    btnContainer.appendChild(closeBtn);
+    label.appendChild(btnContainer);
+    document.body.appendChild(label);
+  };
   try {
     let checklist_id = window.checklist_id;
     let user_name = window.user_var;
     for (let item of window.items) {
+      const itemEventName = typeof item.event_name === "string" ? item.event_name.trim().toLowerCase() : "";
       console.log("Comparing:", item.event_name, "with", message);
-      if (item.event_name === message) {
+      if (itemEventName && itemEventName === normalizedMessage) {
         let clean_item = item.url.startsWith("/") ? item.url.slice(1) : item.url;
         if (!window.storedVisited.includes(item.event_name)) {
           window.storedVisited.push(item.event_name);
         }
         sessionStorage.setItem("onboardingVisited", JSON.stringify(window.storedVisited));
-        window.updateProgress(window.storedVisited);
-        window.updateProgress2(window.storedVisited);
+        window.updateProgress(window.storedVisited.length);
+        window.updateProgress2(window.storedVisited.length);
         window.updateUIFromVisited();
         window.uploadVisitedPagesInBackground(window.storedVisited);
-        if (storedVisited.length === window.items.length) {
+        if (window.storedVisited.length >= window.items.length) {
+          sessionStorage.setItem("CompletedAll", "true");
           if (window.showBtn && window.showBtn.parentNode) {
             window.showBtn.remove();
           }
           if (window.label && window.label.parentNode) {
             window.label.remove();
           }
-          (() => {
-            const ll2 = document.createElement("div");
-            ll2.id = "route-labe";
-            ll2.innerText = "\u{1F389} Congrats! You've completed all items!";
-            Object.assign(ll2.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(ll2);
-            console.log("ll2");
-            requestAnimationFrame(() => {
-              ll2.style.opacity = 1;
-            });
-            setTimeout(() => {
-              ll2.style.opacity = 0;
-              setTimeout(() => ll2.remove(), 500);
-            }, 3e3);
-          })();
+          if (typeof window.renderCompletionCard === "function") {
+            window.renderCompletionCard(window.completionCardConfig || {});
+          } else {
+            renderFallbackCompletionCard(window.completionCardConfig || {});
+          }
         }
       }
     }
@@ -4646,19 +5607,20 @@ var ProductManagement = /* @__PURE__ */ function() {
       if (i > 3) return;
       const div = document.createElement("div");
       div.className = "pm-lite-item";
-      const date = it.created_at ? new Date(it.created_at).toLocaleDateString() : "";
       div.style.cursor = "pointer";
       div.addEventListener("click", () => {
         const baseUrl = `https://${state.config.workspace}.rivia.ai/users/changelog`;
         const params = new URLSearchParams({
           changelogId: it.changelog_id || it.id || "",
-          // adjust based on your API
           pm_user_id: state.pmUserId || ""
         });
-        console.log("it.id", it.id);
         const finalUrl = `${baseUrl}?${params.toString()}`;
         window.open(finalUrl, "_blank");
       });
+      const topRow = document.createElement("div");
+      topRow.style.display = "flex";
+      topRow.style.alignItems = "center";
+      topRow.style.width = "100%";
       if (it.label) {
         const tag = document.createElement("span");
         tag.className = "pm-lite-tags";
@@ -4671,8 +5633,18 @@ var ProductManagement = /* @__PURE__ */ function() {
         tag.style.backgroundColor = "rgb(220, 252, 231)";
         tag.style.color = "rgb(22, 101, 52)";
         tag.style.border = "1px solid rgb(187, 247, 208)";
-        div.appendChild(tag);
+        topRow.appendChild(tag);
+      }
+      if (it.publish_time) {
+        const dateEl = document.createElement("span");
+        dateEl.innerText = new Date(it.publish_time).toLocaleDateString();
+        dateEl.style.fontSize = "11px";
+        dateEl.style.color = "#777";
+        dateEl.style.marginLeft = "auto";
+        dateEl.style.fontFamily = "Verdana, sans-serif";
+        topRow.appendChild(dateEl);
       }
+      div.appendChild(topRow);
       const header = document.createElement("div");
       header.className = "pm-lite-item-header";
       header.style.fontWeight = "600";