@sitepulse/web 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -4,8 +4,10 @@ export * from "./renderer";
 export * from "./evaluator";
 export interface SitePulseConfig {
     siteId: string;
+    apiHost?: string;
     endpointUrl?: string;
     campaignsEndpointUrl?: string;
+    submissionsEndpointUrl?: string;
     flushIntervalMs?: number;
     autoTrack?: boolean;
     autoFetchCampaigns?: boolean;

package/dist/index.js

@@ -1052,7 +1052,8 @@ function renderCampaignDOM(campaign, handlers = {}) {
     const emailVal = entries.email || entries.email_address || entries.newsletter_email || null;
     handlers.onSubmit?.(entries);
     if (typeof fetch !== "undefined") {
-      fetch("/api/campaigns/submit", {
+      const submitEndpoint = handlers.submissionsEndpointUrl || "/api/campaigns/submit";
+      fetch(submitEndpoint, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -1240,6 +1241,7 @@ function renderCampaignDOM(campaign, handlers = {}) {
   let originalPaddingTop = null;
   let originalPaddingBottom = null;
   let resizeObserver = null;
+  const shiftedElements = [];
   if (isBanner && typeof document !== "undefined" && document.body) {
     try {
       const isBottom = design.position === "bottom";
@@ -1261,14 +1263,64 @@ function renderCampaignDOM(campaign, handlers = {}) {
         }
       } catch {
       }
+      const findTopFixedElements = () => {
+        const candidates = [];
+        try {
+          const elements = Array.from(
+            document.querySelectorAll(
+              'header, nav, [role="banner"], [class*="header"], [class*="navbar"], [class*="nav-fixed"], [class*="sticky"]'
+            )
+          );
+          Array.from(document.body.children).forEach((child) => {
+            if (child instanceof HTMLElement && child !== wrapper && child !== overlayEl && !elements.includes(child)) {
+              elements.push(child);
+            }
+          });
+          for (const el of elements) {
+            if (el === wrapper || el === overlayEl || !el.isConnected) continue;
+            const style = window.getComputedStyle(el);
+            const pos = style.position;
+            if (pos === "fixed" || pos === "sticky") {
+              const rect = el.getBoundingClientRect();
+              if (rect.top <= 15 && rect.height > 0 && rect.height < window.innerHeight * 0.5) {
+                candidates.push(el);
+              }
+            }
+          }
+        } catch {
+        }
+        return candidates;
+      };
       const updateOffset = () => {
         if (!wrapper || !document.body) return;
         const bannerHeight = wrapper.offsetHeight;
         if (bannerHeight > 0) {
           if (isBottom) {
             document.body.style.paddingBottom = `${basePaddingBottom + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-bottom-banner-height",
+              `${bannerHeight}px`
+            );
           } else {
             document.body.style.paddingTop = `${basePaddingTop + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-top-banner-height",
+              `${bannerHeight}px`
+            );
+            document.documentElement.classList.add("has-sitepulse-top-banner");
+            const fixedHeaders = findTopFixedElements();
+            for (const el of fixedHeaders) {
+              if (!shiftedElements.some((r) => r.el === el)) {
+                shiftedElements.push({
+                  el,
+                  originalTop: el.style.top,
+                  originalTransform: el.style.transform,
+                  originalTransition: el.style.transition
+                });
+                el.style.transition = el.style.transition ? `${el.style.transition}, transform 0.2s ease` : "transform 0.2s ease";
+                el.style.transform = `translateY(${bannerHeight}px)`;
+              }
+            }
           }
         }
       };
@@ -1301,6 +1353,23 @@ function renderCampaignDOM(campaign, handlers = {}) {
         if (originalPaddingBottom !== null) {
           document.body.style.paddingBottom = originalPaddingBottom;
         }
+        document.documentElement.style.setProperty(
+          "--sitepulse-top-banner-height",
+          "0px"
+        );
+        document.documentElement.style.setProperty(
+          "--sitepulse-bottom-banner-height",
+          "0px"
+        );
+        document.documentElement.classList.remove("has-sitepulse-top-banner");
+        for (const record of shiftedElements) {
+          if (record.el && record.el.isConnected) {
+            record.el.style.transform = record.originalTransform;
+            record.el.style.transition = record.originalTransition;
+            record.el.style.top = record.originalTop;
+          }
+        }
+        shiftedElements.length = 0;
       } catch {
       }
     }
@@ -1456,9 +1525,18 @@ var SitePulseClient = class {
   registeredCampaignTeardowns = [];
   init(config) {
     const isReinit = this.initialized;
+    let inferredBase = "";
+    if (typeof document !== "undefined" && document.currentScript?.src) {
+      try {
+        inferredBase = new URL(document.currentScript.src).origin;
+      } catch {
+      }
+    }
+    const defaultHost = config.apiHost || inferredBase || (typeof window !== "undefined" && window.location.hostname === "localhost" && window.location.port === "3000" ? "" : "https://sitepulse-app-ten.vercel.app");
     this.config = {
-      endpointUrl: "/api/collect",
-      campaignsEndpointUrl: "/api/campaigns/active",
+      endpointUrl: defaultHost ? `${defaultHost}/api/collect` : "/api/collect",
+      campaignsEndpointUrl: defaultHost ? `${defaultHost}/api/campaigns/active` : "/api/campaigns/active",
+      submissionsEndpointUrl: defaultHost ? `${defaultHost}/api/campaigns/submit` : "/api/campaigns/submit",
       flushIntervalMs: 5e3,
       autoTrack: true,
       autoFetchCampaigns: true,
@@ -1617,6 +1695,7 @@ var SitePulseClient = class {
         campaignName: campaign.name
       });
       const dom = renderCampaignDOM(campaign, {
+        submissionsEndpointUrl: handlers.submissionsEndpointUrl || this.config?.submissionsEndpointUrl,
         onLinkClick: (url, eventName) => {
           this.track("campaign_click", {
             campaignId: campaign.id,

package/dist/index.mjs

@@ -1013,7 +1013,8 @@ function renderCampaignDOM(campaign, handlers = {}) {
     const emailVal = entries.email || entries.email_address || entries.newsletter_email || null;
     handlers.onSubmit?.(entries);
     if (typeof fetch !== "undefined") {
-      fetch("/api/campaigns/submit", {
+      const submitEndpoint = handlers.submissionsEndpointUrl || "/api/campaigns/submit";
+      fetch(submitEndpoint, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -1201,6 +1202,7 @@ function renderCampaignDOM(campaign, handlers = {}) {
   let originalPaddingTop = null;
   let originalPaddingBottom = null;
   let resizeObserver = null;
+  const shiftedElements = [];
   if (isBanner && typeof document !== "undefined" && document.body) {
     try {
       const isBottom = design.position === "bottom";
@@ -1222,14 +1224,64 @@ function renderCampaignDOM(campaign, handlers = {}) {
         }
       } catch {
       }
+      const findTopFixedElements = () => {
+        const candidates = [];
+        try {
+          const elements = Array.from(
+            document.querySelectorAll(
+              'header, nav, [role="banner"], [class*="header"], [class*="navbar"], [class*="nav-fixed"], [class*="sticky"]'
+            )
+          );
+          Array.from(document.body.children).forEach((child) => {
+            if (child instanceof HTMLElement && child !== wrapper && child !== overlayEl && !elements.includes(child)) {
+              elements.push(child);
+            }
+          });
+          for (const el of elements) {
+            if (el === wrapper || el === overlayEl || !el.isConnected) continue;
+            const style = window.getComputedStyle(el);
+            const pos = style.position;
+            if (pos === "fixed" || pos === "sticky") {
+              const rect = el.getBoundingClientRect();
+              if (rect.top <= 15 && rect.height > 0 && rect.height < window.innerHeight * 0.5) {
+                candidates.push(el);
+              }
+            }
+          }
+        } catch {
+        }
+        return candidates;
+      };
       const updateOffset = () => {
         if (!wrapper || !document.body) return;
         const bannerHeight = wrapper.offsetHeight;
         if (bannerHeight > 0) {
           if (isBottom) {
             document.body.style.paddingBottom = `${basePaddingBottom + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-bottom-banner-height",
+              `${bannerHeight}px`
+            );
           } else {
             document.body.style.paddingTop = `${basePaddingTop + bannerHeight}px`;
+            document.documentElement.style.setProperty(
+              "--sitepulse-top-banner-height",
+              `${bannerHeight}px`
+            );
+            document.documentElement.classList.add("has-sitepulse-top-banner");
+            const fixedHeaders = findTopFixedElements();
+            for (const el of fixedHeaders) {
+              if (!shiftedElements.some((r) => r.el === el)) {
+                shiftedElements.push({
+                  el,
+                  originalTop: el.style.top,
+                  originalTransform: el.style.transform,
+                  originalTransition: el.style.transition
+                });
+                el.style.transition = el.style.transition ? `${el.style.transition}, transform 0.2s ease` : "transform 0.2s ease";
+                el.style.transform = `translateY(${bannerHeight}px)`;
+              }
+            }
           }
         }
       };
@@ -1262,6 +1314,23 @@ function renderCampaignDOM(campaign, handlers = {}) {
         if (originalPaddingBottom !== null) {
           document.body.style.paddingBottom = originalPaddingBottom;
         }
+        document.documentElement.style.setProperty(
+          "--sitepulse-top-banner-height",
+          "0px"
+        );
+        document.documentElement.style.setProperty(
+          "--sitepulse-bottom-banner-height",
+          "0px"
+        );
+        document.documentElement.classList.remove("has-sitepulse-top-banner");
+        for (const record of shiftedElements) {
+          if (record.el && record.el.isConnected) {
+            record.el.style.transform = record.originalTransform;
+            record.el.style.transition = record.originalTransition;
+            record.el.style.top = record.originalTop;
+          }
+        }
+        shiftedElements.length = 0;
       } catch {
       }
     }
@@ -1417,9 +1486,18 @@ var SitePulseClient = class {
   registeredCampaignTeardowns = [];
   init(config) {
     const isReinit = this.initialized;
+    let inferredBase = "";
+    if (typeof document !== "undefined" && document.currentScript?.src) {
+      try {
+        inferredBase = new URL(document.currentScript.src).origin;
+      } catch {
+      }
+    }
+    const defaultHost = config.apiHost || inferredBase || (typeof window !== "undefined" && window.location.hostname === "localhost" && window.location.port === "3000" ? "" : "https://sitepulse-app-ten.vercel.app");
     this.config = {
-      endpointUrl: "/api/collect",
-      campaignsEndpointUrl: "/api/campaigns/active",
+      endpointUrl: defaultHost ? `${defaultHost}/api/collect` : "/api/collect",
+      campaignsEndpointUrl: defaultHost ? `${defaultHost}/api/campaigns/active` : "/api/campaigns/active",
+      submissionsEndpointUrl: defaultHost ? `${defaultHost}/api/campaigns/submit` : "/api/campaigns/submit",
       flushIntervalMs: 5e3,
       autoTrack: true,
       autoFetchCampaigns: true,
@@ -1578,6 +1656,7 @@ var SitePulseClient = class {
         campaignName: campaign.name
       });
       const dom = renderCampaignDOM(campaign, {
+        submissionsEndpointUrl: handlers.submissionsEndpointUrl || this.config?.submissionsEndpointUrl,
         onLinkClick: (url, eventName) => {
           this.track("campaign_click", {
             campaignId: campaign.id,

package/dist/renderer.d.ts

@@ -14,6 +14,7 @@ export interface CampaignActionHandlers {
     onEventClick?: (eventName: string) => void;
     onSubmit?: (formData: Record<string, string>) => void;
     onClose?: () => void;
+    submissionsEndpointUrl?: string;
 }
 export declare function renderHeadingBlock(block: Extract<ContentBlock, {
     type: "heading";

package/dist/web-sdk/src/index.d.ts

@@ -4,8 +4,10 @@ export * from "./renderer";
 export * from "./evaluator";
 export interface SitePulseConfig {
     siteId: string;
+    apiHost?: string;
     endpointUrl?: string;
     campaignsEndpointUrl?: string;
+    submissionsEndpointUrl?: string;
     flushIntervalMs?: number;
     autoTrack?: boolean;
     autoFetchCampaigns?: boolean;

package/dist/web-sdk/src/renderer.d.ts

@@ -14,6 +14,7 @@ export interface CampaignActionHandlers {
     onEventClick?: (eventName: string) => void;
     onSubmit?: (formData: Record<string, string>) => void;
     onClose?: () => void;
+    submissionsEndpointUrl?: string;
 }
 export declare function renderHeadingBlock(block: Extract<ContentBlock, {
     type: "heading";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitepulse/web",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Official SitePulse Web SDK for telemetry, visitor analytics, and on-site engagement",
   "main": "dist/index.js",
   "module": "dist/index.mjs",