@zerocost/sdk 0.15.0 → 0.17.0

package/dist/core/consent-ui.d.ts

@@ -13,6 +13,7 @@ export interface ConsentUIResult {
     usageData: boolean;
     aiInteractions: boolean;
 }
+export declare function injectStyles(theme: 'light' | 'dark' | 'auto'): void;
 export declare function showConsentUI(options: ConsentUIOptions): Promise<ConsentUIResult>;
 /** Remove any existing consent popup from the DOM */
 export declare function removeConsentUI(): void;

package/dist/core/constants.d.ts

@@ -1,6 +1,4 @@
 export declare const ZEROCOST_DOMAINS: {
     MAIN: string;
-    APP: string;
-    DOCS: string;
 };
 export declare const ZEROCOST_BASE_URL: string;

package/dist/index.cjs

@@ -30,9 +30,9 @@ module.exports = __toCommonJS(index_exports);
 
 // src/core/constants.ts
 var ZEROCOST_DOMAINS = {
-  MAIN: "https://zerocost.lovable.app",
-  APP: "https://app.zerocost.com",
-  DOCS: "https://docs.zerocost.com"
+  MAIN: "https://zerocost.lovable.app"
+  //APP: 'https://app.zerocost.com',
+  //DOCS: 'https://docs.zerocost.com',
 };
 var ZEROCOST_BASE_URL = ZEROCOST_DOMAINS.MAIN;
 
@@ -150,6 +150,12 @@ var TrackModule = class {
 
 // src/core/widget-render.ts
 var SDK_WIDGET_REFRESH_MS = 2e4;
+var CLOSE_ICON_SVG = `
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+`;
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -203,7 +209,7 @@ function renderVideoWidget(ad, theme) {
     <div style="position:relative;width:200px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:${palette.bg};border:1px solid rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.45);font-family:Space Grotesk,system-ui,sans-serif;">
       ${media}
       <div style="position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:3;">
-        <button type="button" data-zc-close style="width:22px;height:22px;border:none;border-radius:999px;background:rgba(0,0,0,0.52);color:#fff;font-size:12px;cursor:pointer;">x</button>
+        <button type="button" data-zc-close style="width:24px;height:24px;padding:5px;border:none;border-radius:999px;background:rgba(0,0,0,0.52);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
       </div>
       <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.12) 35%,rgba(0,0,0,0.85) 100%);"></div>
       <div style="position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2;">
@@ -224,7 +230,7 @@ function renderTooltipWidget(ad, theme) {
           <span style="width:6px;height:6px;border-radius:999px;background:${palette.text};display:inline-block;"></span>
           Sponsored
         </div>
-        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
       </div>
       <div style="margin-top:10px;color:${palette.text};font-size:13px;line-height:1.55;">
         ${escapeHtml(ad.description || ad.title)} <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="color:${palette.text};font-weight:700;text-decoration:underline;text-underline-offset:2px;">${escapeHtml(ad.cta_text || "Learn More")}</a>
@@ -241,7 +247,7 @@ function renderSponsoredCard(ad, theme) {
       <div style="padding:12px;">
         <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
           <div style="display:inline-flex;align-items:center;padding:4px 6px;border-radius:999px;background:${palette.badgeBg};color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</div>
-          <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+          <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
         </div>
         <div style="margin-top:10px;color:${palette.text};font-size:13px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
         ${ad.description ? `<div style="margin-top:6px;color:${palette.textMuted};font-size:11px;line-height:1.35;">${escapeHtml(ad.description)}</div>` : ""}
@@ -257,7 +263,7 @@ function renderInlineText(ad, theme) {
     <div style="margin:10px 0;border-radius:14px;overflow:hidden;background:${palette.surface};border:1px solid ${palette.border};font-family:Space Grotesk,system-ui,sans-serif;">
       <div style="display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid ${palette.border};background:${palette.surfaceStrong};">
         <span style="color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</span>
-        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
       </div>
       <div style="padding:12px;display:flex;gap:10px;align-items:flex-start;">
         ${media}
@@ -286,15 +292,15 @@ function renderWidgetMarkup(ad, options) {
 
 // src/modules/widget.ts
 var POSITION_STYLES = {
-  "bottom-right": "position:fixed;bottom:24px;right:24px;z-index:9999;",
+  "bottom-right": "position:fixed;bottom:24px;right:40px;z-index:9999;",
   "bottom-left": "position:fixed;bottom:24px;left:80px;z-index:9999;",
-  "top-right": "position:fixed;top:24px;right:24px;z-index:9999;",
+  "top-right": "position:fixed;top:24px;right:40px;z-index:9999;",
   "top-left": "position:fixed;top:24px;left:24px;z-index:9999;",
   "bottom-center": "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;",
   "top-center": "position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:9999;",
   "center": "position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;",
   "sidebar-left": "position:fixed;top:50%;left:24px;transform:translateY(-50%);z-index:9999;",
-  "sidebar-right": "position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:9999;"
+  "sidebar-right": "position:fixed;top:50%;right:40px;transform:translateY(-50%);z-index:9999;"
 };
 var FORMAT_PRIORITY = ["video-widget", "tooltip-ad", "sponsored-card", "sidebar-display", "inline-text"];
 var AUTO_SLOT_ID = "zerocost-auto-slot";
@@ -1351,14 +1357,14 @@ function injectStyles(theme) {
   `;
   let themeRule;
   if (theme === "dark") {
-    themeRule = `.zc-consent-root { ${darkVars} }`;
+    themeRule = `.zc-consent-root, .zc-settings-btn { ${darkVars} }`;
   } else if (theme === "light") {
-    themeRule = `.zc-consent-root { ${lightVars} }`;
+    themeRule = `.zc-consent-root, .zc-settings-btn { ${lightVars} }`;
   } else {
     themeRule = `
-      .zc-consent-root { ${lightVars} }
+      .zc-consent-root, .zc-settings-btn { ${lightVars} }
       @media (prefers-color-scheme: dark) {
-        .zc-consent-root { ${darkVars} }
+        .zc-consent-root, .zc-settings-btn { ${darkVars} }
       }
     `;
   }
@@ -1723,28 +1729,28 @@ function showConsentUI(options) {
       "zc-toggle-ads",
       "Ads",
       "Contextual, non-intrusive ads. No cookies or browsing history used.",
-      `${zerocostBaseUrl}/consent/ads`,
+      `${zerocostBaseUrl}/docs/ads`,
       defaults.ads
     ));
     toggles.appendChild(createToggleCard(
       "zc-toggle-usage",
       "Usage data",
       "Anonymized usage patterns. No personal information is shared.",
-      `${zerocostBaseUrl}/consent/usage-data`,
+      `${zerocostBaseUrl}/docs/usage-data`,
       defaults.usageData
     ));
     toggles.appendChild(createToggleCard(
       "zc-toggle-ai",
       "AI interactions",
       "Anonymized conversation data used for AI research.",
-      `${zerocostBaseUrl}/consent/ai-interactions`,
+      `${zerocostBaseUrl}/docs/ai-interactions`,
       defaults.aiInteractions
     ));
     card.appendChild(toggles);
     const footer = document.createElement("div");
     footer.className = "zc-consent-footer";
     const ppLink = document.createElement("a");
-    ppLink.href = privacyPolicyUrl || `${zerocostBaseUrl}/privacy`;
+    ppLink.href = privacyPolicyUrl || `${zerocostBaseUrl}/docs/privacy`;
     ppLink.target = "_blank";
     ppLink.rel = "noopener noreferrer";
     ppLink.textContent = "Privacy Policy";
@@ -1754,7 +1760,7 @@ function showConsentUI(options) {
     sep1.textContent = "\xB7";
     footer.appendChild(sep1);
     const termsLink = document.createElement("a");
-    termsLink.href = `${zerocostBaseUrl}/terms`;
+    termsLink.href = `${zerocostBaseUrl}/docs/terms`;
     termsLink.target = "_blank";
     termsLink.rel = "noopener noreferrer";
     termsLink.textContent = "Terms";
@@ -1764,7 +1770,7 @@ function showConsentUI(options) {
     sep2.textContent = "\xB7";
     footer.appendChild(sep2);
     const dnsLink = document.createElement("a");
-    dnsLink.href = `${zerocostBaseUrl}/do-not-sell`;
+    dnsLink.href = `${zerocostBaseUrl}/docs/do-not-sell`;
     dnsLink.target = "_blank";
     dnsLink.rel = "noopener noreferrer";
     dnsLink.textContent = "Do Not Sell My Data";
@@ -1809,6 +1815,7 @@ var ConsentManager = class {
     this.theme = opts.theme ?? "dark";
     this.hydrateFromStorage();
     if (this.consentConfig.showSettingsButton) {
+      injectStyles(this.theme);
       this.injectSettingsButton();
     }
   }
@@ -1959,17 +1966,25 @@ var ConsentManager = class {
   }
   injectSettingsButton() {
     if (typeof document === "undefined") return;
-    const existing = document.getElementById("zerocost-privacy-settings-btn");
-    if (existing) return;
-    const btn = document.createElement("button");
-    btn.id = "zerocost-privacy-settings-btn";
-    btn.setAttribute("aria-label", "Privacy Settings");
-    btn.title = "Privacy Settings";
-    const pos = this.consentConfig.buttonPosition || "bottom-left";
-    btn.className = `zc-settings-btn zc-settings-${pos}`;
-    btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`;
-    btn.addEventListener("click", () => this.open());
-    document.body.appendChild(btn);
+    const mount = () => {
+      if (!document.body) return;
+      const existing = document.getElementById("zerocost-privacy-settings-btn");
+      if (existing) return;
+      const btn = document.createElement("button");
+      btn.id = "zerocost-privacy-settings-btn";
+      btn.setAttribute("aria-label", "Privacy Settings");
+      btn.title = "Privacy Settings";
+      const pos = this.consentConfig.buttonPosition || "bottom-left";
+      btn.className = `zc-settings-btn zc-settings-${pos}`;
+      btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`;
+      btn.addEventListener("click", () => this.open());
+      document.body.appendChild(btn);
+    };
+    if (document.body) {
+      mount();
+    } else {
+      window.addEventListener("DOMContentLoaded", mount);
+    }
   }
   removeSettingsButton() {
     document.getElementById("zerocost-privacy-settings-btn")?.remove();

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/core/constants.ts
 var ZEROCOST_DOMAINS = {
-  MAIN: "https://zerocost.lovable.app",
-  APP: "https://app.zerocost.com",
-  DOCS: "https://docs.zerocost.com"
+  MAIN: "https://zerocost.lovable.app"
+  //APP: 'https://app.zerocost.com',
+  //DOCS: 'https://docs.zerocost.com',
 };
 var ZEROCOST_BASE_URL = ZEROCOST_DOMAINS.MAIN;
 
@@ -120,6 +120,12 @@ var TrackModule = class {
 
 // src/core/widget-render.ts
 var SDK_WIDGET_REFRESH_MS = 2e4;
+var CLOSE_ICON_SVG = `
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:100%;height:100%;">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+`;
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -173,7 +179,7 @@ function renderVideoWidget(ad, theme) {
     <div style="position:relative;width:200px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:${palette.bg};border:1px solid rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.45);font-family:Space Grotesk,system-ui,sans-serif;">
       ${media}
       <div style="position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:3;">
-        <button type="button" data-zc-close style="width:22px;height:22px;border:none;border-radius:999px;background:rgba(0,0,0,0.52);color:#fff;font-size:12px;cursor:pointer;">x</button>
+        <button type="button" data-zc-close style="width:24px;height:24px;padding:5px;border:none;border-radius:999px;background:rgba(0,0,0,0.52);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
       </div>
       <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.12) 35%,rgba(0,0,0,0.85) 100%);"></div>
       <div style="position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2;">
@@ -194,7 +200,7 @@ function renderTooltipWidget(ad, theme) {
           <span style="width:6px;height:6px;border-radius:999px;background:${palette.text};display:inline-block;"></span>
           Sponsored
         </div>
-        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
       </div>
       <div style="margin-top:10px;color:${palette.text};font-size:13px;line-height:1.55;">
         ${escapeHtml(ad.description || ad.title)} <a href="${escapeHtml(ad.landing_url)}" target="_blank" rel="noreferrer noopener" data-zc-cta style="color:${palette.text};font-weight:700;text-decoration:underline;text-underline-offset:2px;">${escapeHtml(ad.cta_text || "Learn More")}</a>
@@ -211,7 +217,7 @@ function renderSponsoredCard(ad, theme) {
       <div style="padding:12px;">
         <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
           <div style="display:inline-flex;align-items:center;padding:4px 6px;border-radius:999px;background:${palette.badgeBg};color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</div>
-          <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+          <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
         </div>
         <div style="margin-top:10px;color:${palette.text};font-size:13px;font-weight:700;line-height:1.2;">${escapeHtml(ad.title)}</div>
         ${ad.description ? `<div style="margin-top:6px;color:${palette.textMuted};font-size:11px;line-height:1.35;">${escapeHtml(ad.description)}</div>` : ""}
@@ -227,7 +233,7 @@ function renderInlineText(ad, theme) {
     <div style="margin:10px 0;border-radius:14px;overflow:hidden;background:${palette.surface};border:1px solid ${palette.border};font-family:Space Grotesk,system-ui,sans-serif;">
       <div style="display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid ${palette.border};background:${palette.surfaceStrong};">
         <span style="color:${palette.textFaint};font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;">Sponsored</span>
-        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};font-size:12px;cursor:pointer;padding:0;">x</button>
+        <button type="button" data-zc-close style="background:none;border:none;color:${palette.textFaint};width:16px;height:16px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;">${CLOSE_ICON_SVG}</button>
       </div>
       <div style="padding:12px;display:flex;gap:10px;align-items:flex-start;">
         ${media}
@@ -256,15 +262,15 @@ function renderWidgetMarkup(ad, options) {
 
 // src/modules/widget.ts
 var POSITION_STYLES = {
-  "bottom-right": "position:fixed;bottom:24px;right:24px;z-index:9999;",
+  "bottom-right": "position:fixed;bottom:24px;right:40px;z-index:9999;",
   "bottom-left": "position:fixed;bottom:24px;left:80px;z-index:9999;",
-  "top-right": "position:fixed;top:24px;right:24px;z-index:9999;",
+  "top-right": "position:fixed;top:24px;right:40px;z-index:9999;",
   "top-left": "position:fixed;top:24px;left:24px;z-index:9999;",
   "bottom-center": "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;",
   "top-center": "position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:9999;",
   "center": "position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;",
   "sidebar-left": "position:fixed;top:50%;left:24px;transform:translateY(-50%);z-index:9999;",
-  "sidebar-right": "position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:9999;"
+  "sidebar-right": "position:fixed;top:50%;right:40px;transform:translateY(-50%);z-index:9999;"
 };
 var FORMAT_PRIORITY = ["video-widget", "tooltip-ad", "sponsored-card", "sidebar-display", "inline-text"];
 var AUTO_SLOT_ID = "zerocost-auto-slot";
@@ -1321,14 +1327,14 @@ function injectStyles(theme) {
   `;
   let themeRule;
   if (theme === "dark") {
-    themeRule = `.zc-consent-root { ${darkVars} }`;
+    themeRule = `.zc-consent-root, .zc-settings-btn { ${darkVars} }`;
   } else if (theme === "light") {
-    themeRule = `.zc-consent-root { ${lightVars} }`;
+    themeRule = `.zc-consent-root, .zc-settings-btn { ${lightVars} }`;
   } else {
     themeRule = `
-      .zc-consent-root { ${lightVars} }
+      .zc-consent-root, .zc-settings-btn { ${lightVars} }
       @media (prefers-color-scheme: dark) {
-        .zc-consent-root { ${darkVars} }
+        .zc-consent-root, .zc-settings-btn { ${darkVars} }
       }
     `;
   }
@@ -1693,28 +1699,28 @@ function showConsentUI(options) {
       "zc-toggle-ads",
       "Ads",
       "Contextual, non-intrusive ads. No cookies or browsing history used.",
-      `${zerocostBaseUrl}/consent/ads`,
+      `${zerocostBaseUrl}/docs/ads`,
       defaults.ads
     ));
     toggles.appendChild(createToggleCard(
       "zc-toggle-usage",
       "Usage data",
       "Anonymized usage patterns. No personal information is shared.",
-      `${zerocostBaseUrl}/consent/usage-data`,
+      `${zerocostBaseUrl}/docs/usage-data`,
       defaults.usageData
     ));
     toggles.appendChild(createToggleCard(
       "zc-toggle-ai",
       "AI interactions",
       "Anonymized conversation data used for AI research.",
-      `${zerocostBaseUrl}/consent/ai-interactions`,
+      `${zerocostBaseUrl}/docs/ai-interactions`,
       defaults.aiInteractions
     ));
     card.appendChild(toggles);
     const footer = document.createElement("div");
     footer.className = "zc-consent-footer";
     const ppLink = document.createElement("a");
-    ppLink.href = privacyPolicyUrl || `${zerocostBaseUrl}/privacy`;
+    ppLink.href = privacyPolicyUrl || `${zerocostBaseUrl}/docs/privacy`;
     ppLink.target = "_blank";
     ppLink.rel = "noopener noreferrer";
     ppLink.textContent = "Privacy Policy";
@@ -1724,7 +1730,7 @@ function showConsentUI(options) {
     sep1.textContent = "\xB7";
     footer.appendChild(sep1);
     const termsLink = document.createElement("a");
-    termsLink.href = `${zerocostBaseUrl}/terms`;
+    termsLink.href = `${zerocostBaseUrl}/docs/terms`;
     termsLink.target = "_blank";
     termsLink.rel = "noopener noreferrer";
     termsLink.textContent = "Terms";
@@ -1734,7 +1740,7 @@ function showConsentUI(options) {
     sep2.textContent = "\xB7";
     footer.appendChild(sep2);
     const dnsLink = document.createElement("a");
-    dnsLink.href = `${zerocostBaseUrl}/do-not-sell`;
+    dnsLink.href = `${zerocostBaseUrl}/docs/do-not-sell`;
     dnsLink.target = "_blank";
     dnsLink.rel = "noopener noreferrer";
     dnsLink.textContent = "Do Not Sell My Data";
@@ -1779,6 +1785,7 @@ var ConsentManager = class {
     this.theme = opts.theme ?? "dark";
     this.hydrateFromStorage();
     if (this.consentConfig.showSettingsButton) {
+      injectStyles(this.theme);
       this.injectSettingsButton();
     }
   }
@@ -1929,17 +1936,25 @@ var ConsentManager = class {
   }
   injectSettingsButton() {
     if (typeof document === "undefined") return;
-    const existing = document.getElementById("zerocost-privacy-settings-btn");
-    if (existing) return;
-    const btn = document.createElement("button");
-    btn.id = "zerocost-privacy-settings-btn";
-    btn.setAttribute("aria-label", "Privacy Settings");
-    btn.title = "Privacy Settings";
-    const pos = this.consentConfig.buttonPosition || "bottom-left";
-    btn.className = `zc-settings-btn zc-settings-${pos}`;
-    btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`;
-    btn.addEventListener("click", () => this.open());
-    document.body.appendChild(btn);
+    const mount = () => {
+      if (!document.body) return;
+      const existing = document.getElementById("zerocost-privacy-settings-btn");
+      if (existing) return;
+      const btn = document.createElement("button");
+      btn.id = "zerocost-privacy-settings-btn";
+      btn.setAttribute("aria-label", "Privacy Settings");
+      btn.title = "Privacy Settings";
+      const pos = this.consentConfig.buttonPosition || "bottom-left";
+      btn.className = `zc-settings-btn zc-settings-${pos}`;
+      btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`;
+      btn.addEventListener("click", () => this.open());
+      document.body.appendChild(btn);
+    };
+    if (document.body) {
+      mount();
+    } else {
+      window.addEventListener("DOMContentLoaded", mount);
+    }
   }
   removeSettingsButton() {
     document.getElementById("zerocost-privacy-settings-btn")?.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerocost/sdk",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",