@zerocost/sdk 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -146,23 +146,24 @@ var POSITION_STYLES = {
   "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;"
 };
-var FORMAT_PRIORITY = ["video-widget", "sponsored-card", "sidebar-display", "tooltip-ad", "inline-text"];
+var FORMAT_PRIORITY = ["video-widget", "tooltip-ad", "sponsored-card", "sidebar-display", "inline-text"];
+var AUTO_SLOT_ID = "zerocost-auto-slot";
 var WidgetModule = class {
   constructor(client) {
     this.client = client;
   }
   mounted = /* @__PURE__ */ new Map();
-  async autoInjectWithConfig(display) {
+  async autoInjectWithConfig(display, widget) {
     try {
-      const configs = this.normalizeConfigs(display);
-      const chosen = this.pickOneFormat(configs);
-      if (!chosen) {
-        this.client.log("No ad formats enabled. Skipping injection.");
+      const selected = this.resolveSelectedWidget(display, widget);
+      this.clearAutoInjectedSlots();
+      if (!selected || !selected.enabled) {
+        this.client.log("No enabled widget format found. Skipping injection.");
         return;
       }
-      this.client.log(`Auto-inject: rendering "${chosen.format}" only.`);
-      await this.mountSingleFormat(chosen.format, chosen.config);
-      this.client.log("\u2713 Ad slot injected.");
+      this.client.log(`Auto-inject: rendering configured format "${selected.format}" only.`);
+      await this.mountSingleFormat(selected);
+      this.client.log("\u2713 Single ad slot injected.");
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
@@ -170,21 +171,39 @@ var WidgetModule = class {
   async autoInject() {
     try {
       this.client.log("Fetching ad placements from server...");
-      const { display } = await this.client.request("/get-placements");
-      await this.autoInjectWithConfig(display);
+      const { display, widget } = await this.client.request("/get-placements");
+      await this.autoInjectWithConfig(display, widget);
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
   }
-  pickOneFormat(configs) {
+  resolveSelectedWidget(display, widget) {
+    if (widget?.enabled && widget?.format) {
+      return {
+        format: widget.format,
+        position: widget.position || "bottom-right",
+        theme: widget.theme || "dark",
+        autoplay: widget.autoplay ?? widget.format === "video-widget",
+        enabled: true
+      };
+    }
+    const configs = this.normalizeConfigs(display);
     for (const fmt of FORMAT_PRIORITY) {
       const cfg = configs[fmt];
-      if (cfg?.enabled) return { format: fmt, config: cfg };
+      if (cfg?.enabled) {
+        return {
+          format: fmt,
+          position: cfg.position,
+          theme: cfg.theme,
+          autoplay: cfg.autoplay,
+          enabled: true
+        };
+      }
     }
     return null;
   }
   normalizeConfigs(display) {
-    if (display && "video-widget" in display) {
+    if (display && typeof display === "object" && "video-widget" in display) {
       return display;
     }
     const pos = display?.position || "bottom-right";
@@ -193,22 +212,57 @@ var WidgetModule = class {
       "video-widget": { position: pos, theme, autoplay: true, enabled: true },
       "tooltip-ad": { position: pos, theme, autoplay: false, enabled: false },
       "sponsored-card": { position: pos, theme, autoplay: false, enabled: false },
+      "sidebar-display": { position: pos, theme, autoplay: false, enabled: false },
       "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: false }
     };
   }
-  async mountSingleFormat(format, cfg) {
-    const elId = `zerocost-${format}`;
-    if (document.getElementById(elId)) return;
-    if (format === "inline-text") return;
-    const el = document.createElement("div");
-    el.id = elId;
-    el.setAttribute("data-zerocost", "");
-    el.setAttribute("data-format", format);
-    const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
-    const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
-    el.setAttribute("style", posStyle + maxW);
-    document.body.appendChild(el);
-    await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay ?? true });
+  async mountSingleFormat(config) {
+    const isInline = config.format === "inline-text";
+    const targetElementId = isInline ? this.ensureInlineTarget(config.position) : AUTO_SLOT_ID;
+    if (!targetElementId) {
+      this.client.log("Inline target not found. Skipping inline ad render.");
+      return;
+    }
+    if (!isInline) {
+      let el = document.getElementById(AUTO_SLOT_ID);
+      if (!el) {
+        el = document.createElement("div");
+        el.id = AUTO_SLOT_ID;
+        document.body.appendChild(el);
+      }
+      const posStyle = POSITION_STYLES[config.position] || POSITION_STYLES["bottom-right"];
+      const maxW = config.format === "video-widget" ? "max-width:200px;" : config.format === "sponsored-card" || config.format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
+      el.setAttribute("style", `${posStyle}${maxW}`);
+      el.setAttribute("data-zerocost", "");
+      el.setAttribute("data-format", config.format);
+    }
+    await this.mount(targetElementId, {
+      format: config.format,
+      refreshInterval: 30,
+      theme: config.theme,
+      autoplay: config.autoplay,
+      position: config.position
+    });
+  }
+  ensureInlineTarget(position) {
+    const paragraphMatch = /after-paragraph-(\d+)/.exec(position || "");
+    const index = paragraphMatch ? Number(paragraphMatch[1]) : 1;
+    const paragraphs = Array.from(document.querySelectorAll("p"));
+    const anchor = paragraphs[Math.max(0, Math.min(paragraphs.length - 1, index - 1))];
+    if (!anchor) return null;
+    const existing = document.getElementById(AUTO_SLOT_ID);
+    if (existing) existing.remove();
+    const inlineId = `${AUTO_SLOT_ID}-inline`;
+    let target = document.getElementById(inlineId);
+    if (!target) {
+      target = document.createElement("div");
+      target.id = inlineId;
+      target.setAttribute("data-zerocost", "");
+      target.setAttribute("data-format", "inline-text");
+      target.style.margin = "12px 0";
+      anchor.insertAdjacentElement("afterend", target);
+    }
+    return inlineId;
   }
   async mount(targetElementId, options = {}) {
     const el = document.getElementById(targetElementId);
@@ -217,36 +271,25 @@ var WidgetModule = class {
     const refreshMs = (options.refreshInterval ?? 30) * 1e3;
     const theme = options.theme || "dark";
     const format = options.format || "video-widget";
-    const autoplay = options.autoplay ?? false;
+    const autoplay = options.autoplay ?? format === "video-widget";
     const render = async () => {
       try {
-        const formatMap = {
-          "video-widget": "video",
-          "sponsored-card": "display",
-          "sidebar-display": "display",
-          "tooltip-ad": "native",
-          "inline-text": "native"
-        };
         const body = {
-          format: formatMap[format] || format,
+          widget_style: format,
           theme,
-          autoplay
+          autoplay,
+          position: options.position
         };
         const data = await this.client.request("/serve-widget", body);
         const ad = data.ad;
         if (!ad || !data.html) {
-          this.client.log(`No ad inventory available for format "${format}". Slot "${targetElementId}" is empty \u2014 ads will appear automatically when inventory is added by partners.`);
+          this.client.log(`No ad inventory available for configured format "${format}".`);
           el.innerHTML = "";
           return;
         }
         el.innerHTML = data.html;
         el.setAttribute("data-zerocost-ad-id", ad.id);
-        const video = el.querySelector("video");
-        if (video) {
-          video.muted = true;
-          video.play().catch(() => {
-          });
-        }
+        this.ensureVideoPlayback(el);
         const ctas = el.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {
@@ -262,10 +305,7 @@ var WidgetModule = class {
           closeBtn.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
-            const mountInfo = this.mounted.get(targetElementId);
-            if (mountInfo?.interval) clearInterval(mountInfo.interval);
-            this.mounted.delete(targetElementId);
-            el.remove();
+            this.unmount(targetElementId);
           });
         }
       } catch (err) {
@@ -276,138 +316,37 @@ var WidgetModule = class {
     const interval = refreshMs > 0 ? setInterval(render, refreshMs) : null;
     this.mounted.set(targetElementId, { elementId: targetElementId, interval });
   }
-  unmount(targetElementId) {
-    const slot = this.mounted.get(targetElementId);
-    if (slot) {
-      if (slot.interval) clearInterval(slot.interval);
-      const el = document.getElementById(targetElementId);
-      if (el) el.remove();
-      this.mounted.delete(targetElementId);
-    }
-  }
-  unmountAll() {
-    for (const id of this.mounted.keys()) this.unmount(id);
-  }
-  // ─── Format-specific renderers (matching SDK Playground previews exactly) ───
-  buildFormatHtml(format, ad, theme, autoplay) {
-    switch (format) {
-      case "video-widget":
-        return this.buildVideoWidget(ad, theme, autoplay);
-      case "tooltip-ad":
-        return this.buildTooltipAd(ad, theme);
-      case "sponsored-card":
-        return this.buildSponsoredCard(ad, theme);
-      case "inline-text":
-        return this.buildInlineText(ad, theme);
-      default:
-        return this.buildSponsoredCard(ad, theme);
+  ensureVideoPlayback(root) {
+    const video = root.querySelector("video");
+    if (!video) return;
+    video.muted = true;
+    video.autoplay = true;
+    video.loop = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    const tryPlay = () => video.play().catch(() => {
+    });
+    if (video.readyState >= 2) {
+      tryPlay();
+      return;
     }
+    video.addEventListener("loadeddata", tryPlay, { once: true });
+    video.addEventListener("canplay", tryPlay, { once: true });
   }
-  /**
-   * Floating Video Widget — matches playground VideoWidgetPreview
-   * 9:16 aspect ratio, video with gradient overlay, sponsor label, CTA button
-   */
-  buildVideoWidget(ad, theme, autoplay) {
-    const isDark = theme === "dark";
-    const border = isDark ? "#333" : "#e0e0e0";
-    const videoSrc = ad.video_url || ad.image_url || "";
-    const hasVideo = !!ad.video_url;
-    const sponsor = ad.title || "Sponsor";
-    const cta = ad.cta_text || "Learn More";
-    return `
-      <div style="width:200px;aspect-ratio:9/16;border-radius:12px;border:1px solid ${border};overflow:hidden;position:relative;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.5" : "0.15"});">
-        <button data-zc-close style="position:absolute;top:8px;right:8px;z-index:20;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;">\u2715</button>
-        ${hasVideo ? `<video src="${this.esc(videoSrc)}" autoplay muted loop playsinline preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
-        <div style="position:absolute;inset-inline:0;bottom:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.5),transparent);z-index:10;">
-          <div style="font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);margin-bottom:2px;">Sponsored by ${this.esc(sponsor)}</div>
-          <div style="color:#fff;font-weight:600;font-size:12px;line-height:1.3;">${this.esc(ad.description || "")}</div>
-          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;margin-top:8px;width:100%;padding:6px 0;background:#fff;color:#000;font-size:10px;font-weight:700;text-align:center;border-radius:6px;text-decoration:none;cursor:pointer;">${this.esc(cta)}</a>
-        </div>
-      </div>`;
-  }
-  /**
-   * Tooltip Ad — matches playground ContextualTextPreview
-   * Small floating card with sponsored label, inline text, and link
-   */
-  buildTooltipAd(ad, theme) {
-    const isDark = theme === "dark";
-    const bg = isDark ? "#111" : "#ffffff";
-    const fg = isDark ? "#fff" : "#111";
-    const fgFaint = isDark ? "#888" : "#999";
-    const border = isDark ? "#333" : "#e0e0e0";
-    return `
-      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
-        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
-        <div style="font-size:10px;font-family:monospace;margin-bottom:6px;display:flex;align-items:center;color:${fgFaint};">
-          <span style="width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:6px;display:inline-block;"></span>
-          Sponsored
-        </div>
-        <p style="font-size:12px;line-height:1.5;color:${fg};margin:0;">
-          ${this.esc(ad.description || ad.title)}
-          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="color:#60a5fa;text-decoration:underline;text-underline-offset:2px;cursor:pointer;margin-left:4px;">${this.esc(ad.cta_text || "Learn More")}</a>
-        </p>
-      </div>`;
+  clearAutoInjectedSlots() {
+    this.unmountAll();
+    const existing = document.querySelectorAll("[data-zerocost], #zerocost-auto-slot, #zerocost-auto-slot-inline");
+    existing.forEach((node) => node.remove());
   }
-  /**
-   * Sponsored Card — matches playground SponsoredCardPreview
-   * Card with gradient header, icon, headline, description, CTA button
-   */
-  buildSponsoredCard(ad, theme) {
-    const isDark = theme === "dark";
-    const bg = isDark ? "#111" : "#ffffff";
-    const fg = isDark ? "#fff" : "#111";
-    const fgFaint = isDark ? "#888" : "#999";
-    const border = isDark ? "#333" : "#e0e0e0";
-    return `
-      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
-        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
-        ${ad.image_url ? `<img src="${this.esc(ad.image_url)}" style="width:100%;height:80px;object-fit:cover;display:block;" />` : `<div style="height:80px;background:linear-gradient(135deg,rgba(249,115,22,0.2),rgba(236,72,153,0.2));"></div>`}
-        <div style="padding:12px;">
-          <div style="font-weight:700;font-size:12px;color:${fg};margin-bottom:2px;letter-spacing:-0.01em;">${this.esc(ad.title)}</div>
-          <div style="font-size:10px;color:${fgFaint};line-height:1.4;margin-bottom:12px;">${this.esc(ad.description || "")}</div>
-          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;width:100%;padding:6px 0;border:1px solid ${border};border-radius:4px;font-size:10px;font-weight:500;color:${fg};text-align:center;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")}</a>
-        </div>
-      </div>`;
+  unmount(targetElementId) {
+    const slot = this.mounted.get(targetElementId);
+    if (slot?.interval) clearInterval(slot.interval);
+    const el = document.getElementById(targetElementId);
+    if (el) el.remove();
+    this.mounted.delete(targetElementId);
   }
-  /**
-   * Inline Text Ad — matches playground InlineTextPreview
-   * Card with sponsored header, icon, headline, body, CTA button
-   * Designed to be injected inside content/chat streams
-   */
-  buildInlineText(ad, theme) {
-    const isDark = theme === "dark";
-    const bg = isDark ? "#141414" : "#fafafa";
-    const fg = isDark ? "#fff" : "#111";
-    const fgMuted = isDark ? "#aaa" : "#666";
-    const fgFaint = isDark ? "#888" : "#999";
-    const border = isDark ? "#2a2a2a" : "#d0d0d0";
-    const headerBorder = isDark ? "#222" : "#e8e8e8";
-    const btnBg = isDark ? "#fff" : "#111";
-    const btnFg = isDark ? "#111" : "#fff";
-    const initial = "\u25B2";
-    const sponsor = ad.title?.split("\u2014")[0]?.trim() || ad.title || "Sponsor";
-    return `
-      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;position:relative;">
-        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
-        <div style="padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid ${headerBorder};">
-          <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:${fgFaint};">Sponsored</span>
-          <span style="font-size:9px;color:${fgFaint};">Ad \xB7 ${this.esc(sponsor)}</span>
-        </div>
-        <div style="padding:12px;">
-          <div style="display:flex;gap:10px;">
-            <div style="width:32px;height:32px;border-radius:6px;background:${btnBg};color:${btnFg};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;">${initial}</div>
-            <div style="flex:1;min-width:0;">
-              <div style="font-weight:600;font-size:12px;color:${fg};margin-bottom:2px;">${this.esc(ad.title)}</div>
-              <div style="font-size:11px;line-height:1.4;color:${fgMuted};">${this.esc(ad.description || "")}</div>
-              <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:inline-block;margin-top:8px;padding:4px 12px;border-radius:4px;background:${btnBg};color:${btnFg};font-size:10px;font-weight:600;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")} \u2192</a>
-            </div>
-          </div>
-        </div>
-      </div>`;
-  }
-  esc(str) {
-    if (!str) return "";
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  unmountAll() {
+    for (const id of Array.from(this.mounted.keys())) this.unmount(id);
   }
 };
 
@@ -783,8 +722,8 @@ var ZerocostSDK = class {
     }
     this.core.log("Initializing... Ads will be auto-injected into the DOM. No custom component required.");
     try {
-      const { display, dataCollection } = await this.core.request("/get-placements");
-      this.widget.autoInjectWithConfig(display);
+      const { display, widget, dataCollection } = await this.core.request("/get-placements");
+      this.widget.autoInjectWithConfig(display, widget);
       if (dataCollection?.llm) {
         this.data.start(dataCollection.llm);
       }

package/dist/index.js

@@ -117,23 +117,24 @@ var POSITION_STYLES = {
   "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;"
 };
-var FORMAT_PRIORITY = ["video-widget", "sponsored-card", "sidebar-display", "tooltip-ad", "inline-text"];
+var FORMAT_PRIORITY = ["video-widget", "tooltip-ad", "sponsored-card", "sidebar-display", "inline-text"];
+var AUTO_SLOT_ID = "zerocost-auto-slot";
 var WidgetModule = class {
   constructor(client) {
     this.client = client;
   }
   mounted = /* @__PURE__ */ new Map();
-  async autoInjectWithConfig(display) {
+  async autoInjectWithConfig(display, widget) {
     try {
-      const configs = this.normalizeConfigs(display);
-      const chosen = this.pickOneFormat(configs);
-      if (!chosen) {
-        this.client.log("No ad formats enabled. Skipping injection.");
+      const selected = this.resolveSelectedWidget(display, widget);
+      this.clearAutoInjectedSlots();
+      if (!selected || !selected.enabled) {
+        this.client.log("No enabled widget format found. Skipping injection.");
         return;
       }
-      this.client.log(`Auto-inject: rendering "${chosen.format}" only.`);
-      await this.mountSingleFormat(chosen.format, chosen.config);
-      this.client.log("\u2713 Ad slot injected.");
+      this.client.log(`Auto-inject: rendering configured format "${selected.format}" only.`);
+      await this.mountSingleFormat(selected);
+      this.client.log("\u2713 Single ad slot injected.");
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
@@ -141,21 +142,39 @@ var WidgetModule = class {
   async autoInject() {
     try {
       this.client.log("Fetching ad placements from server...");
-      const { display } = await this.client.request("/get-placements");
-      await this.autoInjectWithConfig(display);
+      const { display, widget } = await this.client.request("/get-placements");
+      await this.autoInjectWithConfig(display, widget);
     } catch (err) {
       this.client.log(`Widget autoInject error: ${err}`);
     }
   }
-  pickOneFormat(configs) {
+  resolveSelectedWidget(display, widget) {
+    if (widget?.enabled && widget?.format) {
+      return {
+        format: widget.format,
+        position: widget.position || "bottom-right",
+        theme: widget.theme || "dark",
+        autoplay: widget.autoplay ?? widget.format === "video-widget",
+        enabled: true
+      };
+    }
+    const configs = this.normalizeConfigs(display);
     for (const fmt of FORMAT_PRIORITY) {
       const cfg = configs[fmt];
-      if (cfg?.enabled) return { format: fmt, config: cfg };
+      if (cfg?.enabled) {
+        return {
+          format: fmt,
+          position: cfg.position,
+          theme: cfg.theme,
+          autoplay: cfg.autoplay,
+          enabled: true
+        };
+      }
     }
     return null;
   }
   normalizeConfigs(display) {
-    if (display && "video-widget" in display) {
+    if (display && typeof display === "object" && "video-widget" in display) {
       return display;
     }
     const pos = display?.position || "bottom-right";
@@ -164,22 +183,57 @@ var WidgetModule = class {
       "video-widget": { position: pos, theme, autoplay: true, enabled: true },
       "tooltip-ad": { position: pos, theme, autoplay: false, enabled: false },
       "sponsored-card": { position: pos, theme, autoplay: false, enabled: false },
+      "sidebar-display": { position: pos, theme, autoplay: false, enabled: false },
       "inline-text": { position: "after-paragraph-1", theme, autoplay: false, enabled: false }
     };
   }
-  async mountSingleFormat(format, cfg) {
-    const elId = `zerocost-${format}`;
-    if (document.getElementById(elId)) return;
-    if (format === "inline-text") return;
-    const el = document.createElement("div");
-    el.id = elId;
-    el.setAttribute("data-zerocost", "");
-    el.setAttribute("data-format", format);
-    const posStyle = POSITION_STYLES[cfg.position] || POSITION_STYLES["bottom-right"];
-    const maxW = format === "video-widget" ? "max-width:200px;" : format === "sponsored-card" || format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
-    el.setAttribute("style", posStyle + maxW);
-    document.body.appendChild(el);
-    await this.mount(elId, { format, refreshInterval: 30, theme: cfg.theme, autoplay: cfg.autoplay ?? true });
+  async mountSingleFormat(config) {
+    const isInline = config.format === "inline-text";
+    const targetElementId = isInline ? this.ensureInlineTarget(config.position) : AUTO_SLOT_ID;
+    if (!targetElementId) {
+      this.client.log("Inline target not found. Skipping inline ad render.");
+      return;
+    }
+    if (!isInline) {
+      let el = document.getElementById(AUTO_SLOT_ID);
+      if (!el) {
+        el = document.createElement("div");
+        el.id = AUTO_SLOT_ID;
+        document.body.appendChild(el);
+      }
+      const posStyle = POSITION_STYLES[config.position] || POSITION_STYLES["bottom-right"];
+      const maxW = config.format === "video-widget" ? "max-width:200px;" : config.format === "sponsored-card" || config.format === "sidebar-display" ? "max-width:176px;" : "max-width:320px;";
+      el.setAttribute("style", `${posStyle}${maxW}`);
+      el.setAttribute("data-zerocost", "");
+      el.setAttribute("data-format", config.format);
+    }
+    await this.mount(targetElementId, {
+      format: config.format,
+      refreshInterval: 30,
+      theme: config.theme,
+      autoplay: config.autoplay,
+      position: config.position
+    });
+  }
+  ensureInlineTarget(position) {
+    const paragraphMatch = /after-paragraph-(\d+)/.exec(position || "");
+    const index = paragraphMatch ? Number(paragraphMatch[1]) : 1;
+    const paragraphs = Array.from(document.querySelectorAll("p"));
+    const anchor = paragraphs[Math.max(0, Math.min(paragraphs.length - 1, index - 1))];
+    if (!anchor) return null;
+    const existing = document.getElementById(AUTO_SLOT_ID);
+    if (existing) existing.remove();
+    const inlineId = `${AUTO_SLOT_ID}-inline`;
+    let target = document.getElementById(inlineId);
+    if (!target) {
+      target = document.createElement("div");
+      target.id = inlineId;
+      target.setAttribute("data-zerocost", "");
+      target.setAttribute("data-format", "inline-text");
+      target.style.margin = "12px 0";
+      anchor.insertAdjacentElement("afterend", target);
+    }
+    return inlineId;
   }
   async mount(targetElementId, options = {}) {
     const el = document.getElementById(targetElementId);
@@ -188,36 +242,25 @@ var WidgetModule = class {
     const refreshMs = (options.refreshInterval ?? 30) * 1e3;
     const theme = options.theme || "dark";
     const format = options.format || "video-widget";
-    const autoplay = options.autoplay ?? false;
+    const autoplay = options.autoplay ?? format === "video-widget";
     const render = async () => {
       try {
-        const formatMap = {
-          "video-widget": "video",
-          "sponsored-card": "display",
-          "sidebar-display": "display",
-          "tooltip-ad": "native",
-          "inline-text": "native"
-        };
         const body = {
-          format: formatMap[format] || format,
+          widget_style: format,
           theme,
-          autoplay
+          autoplay,
+          position: options.position
         };
         const data = await this.client.request("/serve-widget", body);
         const ad = data.ad;
         if (!ad || !data.html) {
-          this.client.log(`No ad inventory available for format "${format}". Slot "${targetElementId}" is empty \u2014 ads will appear automatically when inventory is added by partners.`);
+          this.client.log(`No ad inventory available for configured format "${format}".`);
           el.innerHTML = "";
           return;
         }
         el.innerHTML = data.html;
         el.setAttribute("data-zerocost-ad-id", ad.id);
-        const video = el.querySelector("video");
-        if (video) {
-          video.muted = true;
-          video.play().catch(() => {
-          });
-        }
+        this.ensureVideoPlayback(el);
         const ctas = el.querySelectorAll("[data-zc-cta]");
         ctas.forEach((cta) => {
           cta.addEventListener("click", () => {
@@ -233,10 +276,7 @@ var WidgetModule = class {
           closeBtn.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
-            const mountInfo = this.mounted.get(targetElementId);
-            if (mountInfo?.interval) clearInterval(mountInfo.interval);
-            this.mounted.delete(targetElementId);
-            el.remove();
+            this.unmount(targetElementId);
           });
         }
       } catch (err) {
@@ -247,138 +287,37 @@ var WidgetModule = class {
     const interval = refreshMs > 0 ? setInterval(render, refreshMs) : null;
     this.mounted.set(targetElementId, { elementId: targetElementId, interval });
   }
-  unmount(targetElementId) {
-    const slot = this.mounted.get(targetElementId);
-    if (slot) {
-      if (slot.interval) clearInterval(slot.interval);
-      const el = document.getElementById(targetElementId);
-      if (el) el.remove();
-      this.mounted.delete(targetElementId);
-    }
-  }
-  unmountAll() {
-    for (const id of this.mounted.keys()) this.unmount(id);
-  }
-  // ─── Format-specific renderers (matching SDK Playground previews exactly) ───
-  buildFormatHtml(format, ad, theme, autoplay) {
-    switch (format) {
-      case "video-widget":
-        return this.buildVideoWidget(ad, theme, autoplay);
-      case "tooltip-ad":
-        return this.buildTooltipAd(ad, theme);
-      case "sponsored-card":
-        return this.buildSponsoredCard(ad, theme);
-      case "inline-text":
-        return this.buildInlineText(ad, theme);
-      default:
-        return this.buildSponsoredCard(ad, theme);
+  ensureVideoPlayback(root) {
+    const video = root.querySelector("video");
+    if (!video) return;
+    video.muted = true;
+    video.autoplay = true;
+    video.loop = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    const tryPlay = () => video.play().catch(() => {
+    });
+    if (video.readyState >= 2) {
+      tryPlay();
+      return;
     }
+    video.addEventListener("loadeddata", tryPlay, { once: true });
+    video.addEventListener("canplay", tryPlay, { once: true });
   }
-  /**
-   * Floating Video Widget — matches playground VideoWidgetPreview
-   * 9:16 aspect ratio, video with gradient overlay, sponsor label, CTA button
-   */
-  buildVideoWidget(ad, theme, autoplay) {
-    const isDark = theme === "dark";
-    const border = isDark ? "#333" : "#e0e0e0";
-    const videoSrc = ad.video_url || ad.image_url || "";
-    const hasVideo = !!ad.video_url;
-    const sponsor = ad.title || "Sponsor";
-    const cta = ad.cta_text || "Learn More";
-    return `
-      <div style="width:200px;aspect-ratio:9/16;border-radius:12px;border:1px solid ${border};overflow:hidden;position:relative;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.5" : "0.15"});">
-        <button data-zc-close style="position:absolute;top:8px;right:8px;z-index:20;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;">\u2715</button>
-        ${hasVideo ? `<video src="${this.esc(videoSrc)}" autoplay muted loop playsinline preload="auto" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"></video>` : `<img src="${this.esc(videoSrc)}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;" />`}
-        <div style="position:absolute;inset-inline:0;bottom:0;padding:12px;background:linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.5),transparent);z-index:10;">
-          <div style="font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5);margin-bottom:2px;">Sponsored by ${this.esc(sponsor)}</div>
-          <div style="color:#fff;font-weight:600;font-size:12px;line-height:1.3;">${this.esc(ad.description || "")}</div>
-          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;margin-top:8px;width:100%;padding:6px 0;background:#fff;color:#000;font-size:10px;font-weight:700;text-align:center;border-radius:6px;text-decoration:none;cursor:pointer;">${this.esc(cta)}</a>
-        </div>
-      </div>`;
-  }
-  /**
-   * Tooltip Ad — matches playground ContextualTextPreview
-   * Small floating card with sponsored label, inline text, and link
-   */
-  buildTooltipAd(ad, theme) {
-    const isDark = theme === "dark";
-    const bg = isDark ? "#111" : "#ffffff";
-    const fg = isDark ? "#fff" : "#111";
-    const fgFaint = isDark ? "#888" : "#999";
-    const border = isDark ? "#333" : "#e0e0e0";
-    return `
-      <div style="max-width:320px;border-radius:8px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
-        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
-        <div style="font-size:10px;font-family:monospace;margin-bottom:6px;display:flex;align-items:center;color:${fgFaint};">
-          <span style="width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:6px;display:inline-block;"></span>
-          Sponsored
-        </div>
-        <p style="font-size:12px;line-height:1.5;color:${fg};margin:0;">
-          ${this.esc(ad.description || ad.title)}
-          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="color:#60a5fa;text-decoration:underline;text-underline-offset:2px;cursor:pointer;margin-left:4px;">${this.esc(ad.cta_text || "Learn More")}</a>
-        </p>
-      </div>`;
+  clearAutoInjectedSlots() {
+    this.unmountAll();
+    const existing = document.querySelectorAll("[data-zerocost], #zerocost-auto-slot, #zerocost-auto-slot-inline");
+    existing.forEach((node) => node.remove());
   }
-  /**
-   * Sponsored Card — matches playground SponsoredCardPreview
-   * Card with gradient header, icon, headline, description, CTA button
-   */
-  buildSponsoredCard(ad, theme) {
-    const isDark = theme === "dark";
-    const bg = isDark ? "#111" : "#ffffff";
-    const fg = isDark ? "#fff" : "#111";
-    const fgFaint = isDark ? "#888" : "#999";
-    const border = isDark ? "#333" : "#e0e0e0";
-    return `
-      <div style="width:176px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,${isDark ? "0.4" : "0.12"});background:${bg};border:1px solid ${border};font-family:system-ui,-apple-system,sans-serif;position:relative;">
-        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,0.7);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
-        ${ad.image_url ? `<img src="${this.esc(ad.image_url)}" style="width:100%;height:80px;object-fit:cover;display:block;" />` : `<div style="height:80px;background:linear-gradient(135deg,rgba(249,115,22,0.2),rgba(236,72,153,0.2));"></div>`}
-        <div style="padding:12px;">
-          <div style="font-weight:700;font-size:12px;color:${fg};margin-bottom:2px;letter-spacing:-0.01em;">${this.esc(ad.title)}</div>
-          <div style="font-size:10px;color:${fgFaint};line-height:1.4;margin-bottom:12px;">${this.esc(ad.description || "")}</div>
-          <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:block;width:100%;padding:6px 0;border:1px solid ${border};border-radius:4px;font-size:10px;font-weight:500;color:${fg};text-align:center;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")}</a>
-        </div>
-      </div>`;
+  unmount(targetElementId) {
+    const slot = this.mounted.get(targetElementId);
+    if (slot?.interval) clearInterval(slot.interval);
+    const el = document.getElementById(targetElementId);
+    if (el) el.remove();
+    this.mounted.delete(targetElementId);
   }
-  /**
-   * Inline Text Ad — matches playground InlineTextPreview
-   * Card with sponsored header, icon, headline, body, CTA button
-   * Designed to be injected inside content/chat streams
-   */
-  buildInlineText(ad, theme) {
-    const isDark = theme === "dark";
-    const bg = isDark ? "#141414" : "#fafafa";
-    const fg = isDark ? "#fff" : "#111";
-    const fgMuted = isDark ? "#aaa" : "#666";
-    const fgFaint = isDark ? "#888" : "#999";
-    const border = isDark ? "#2a2a2a" : "#d0d0d0";
-    const headerBorder = isDark ? "#222" : "#e8e8e8";
-    const btnBg = isDark ? "#fff" : "#111";
-    const btnFg = isDark ? "#111" : "#fff";
-    const initial = "\u25B2";
-    const sponsor = ad.title?.split("\u2014")[0]?.trim() || ad.title || "Sponsor";
-    return `
-      <div style="border-radius:8px;overflow:hidden;border:1px solid ${border};background:${bg};font-family:system-ui,-apple-system,sans-serif;max-width:100%;position:relative;">
-        <button data-zc-close style="position:absolute;top:6px;right:6px;z-index:20;width:20px;height:20px;border-radius:50%;background:${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};border:none;color:${fgFaint};cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;">\u2715</button>
-        <div style="padding:8px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid ${headerBorder};">
-          <span style="font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:${fgFaint};">Sponsored</span>
-          <span style="font-size:9px;color:${fgFaint};">Ad \xB7 ${this.esc(sponsor)}</span>
-        </div>
-        <div style="padding:12px;">
-          <div style="display:flex;gap:10px;">
-            <div style="width:32px;height:32px;border-radius:6px;background:${btnBg};color:${btnFg};display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;">${initial}</div>
-            <div style="flex:1;min-width:0;">
-              <div style="font-weight:600;font-size:12px;color:${fg};margin-bottom:2px;">${this.esc(ad.title)}</div>
-              <div style="font-size:11px;line-height:1.4;color:${fgMuted};">${this.esc(ad.description || "")}</div>
-              <a href="${this.esc(ad.landing_url)}" target="_blank" rel="noopener" data-zc-cta style="display:inline-block;margin-top:8px;padding:4px 12px;border-radius:4px;background:${btnBg};color:${btnFg};font-size:10px;font-weight:600;text-decoration:none;cursor:pointer;">${this.esc(ad.cta_text || "Learn More")} \u2192</a>
-            </div>
-          </div>
-        </div>
-      </div>`;
-  }
-  esc(str) {
-    if (!str) return "";
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  unmountAll() {
+    for (const id of Array.from(this.mounted.keys())) this.unmount(id);
   }
 };
 
@@ -754,8 +693,8 @@ var ZerocostSDK = class {
     }
     this.core.log("Initializing... Ads will be auto-injected into the DOM. No custom component required.");
     try {
-      const { display, dataCollection } = await this.core.request("/get-placements");
-      this.widget.autoInjectWithConfig(display);
+      const { display, widget, dataCollection } = await this.core.request("/get-placements");
+      this.widget.autoInjectWithConfig(display, widget);
       if (dataCollection?.llm) {
         this.data.start(dataCollection.llm);
       }

package/dist/modules/widget.d.ts

@@ -6,6 +6,9 @@ interface FormatConfig {
     enabled: boolean;
 }
 type DisplayConfigs = Record<string, FormatConfig>;
+interface SelectedWidgetConfig extends FormatConfig {
+    format: string;
+}
 export declare class WidgetModule {
     private client;
     private mounted;
@@ -13,41 +16,22 @@ export declare class WidgetModule {
     autoInjectWithConfig(display: DisplayConfigs | {
         position: string;
         theme: string;
-    }): Promise<void>;
+    }, widget?: Partial<SelectedWidgetConfig> | null): Promise<void>;
     autoInject(): Promise<void>;
-    private pickOneFormat;
+    private resolveSelectedWidget;
     private normalizeConfigs;
     private mountSingleFormat;
+    private ensureInlineTarget;
     mount(targetElementId: string, options?: {
         format?: string;
         refreshInterval?: number;
         theme?: string;
         autoplay?: boolean;
+        position?: string;
     }): Promise<void>;
+    private ensureVideoPlayback;
+    private clearAutoInjectedSlots;
     unmount(targetElementId: string): void;
     unmountAll(): void;
-    private buildFormatHtml;
-    /**
-     * Floating Video Widget — matches playground VideoWidgetPreview
-     * 9:16 aspect ratio, video with gradient overlay, sponsor label, CTA button
-     */
-    private buildVideoWidget;
-    /**
-     * Tooltip Ad — matches playground ContextualTextPreview
-     * Small floating card with sponsored label, inline text, and link
-     */
-    private buildTooltipAd;
-    /**
-     * Sponsored Card — matches playground SponsoredCardPreview
-     * Card with gradient header, icon, headline, description, CTA button
-     */
-    private buildSponsoredCard;
-    /**
-     * Inline Text Ad — matches playground InlineTextPreview
-     * Card with sponsored header, icon, headline, body, CTA button
-     * Designed to be injected inside content/chat streams
-     */
-    private buildInlineText;
-    private esc;
 }
 export {};

package/package.json

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