API Reference

<!-- Once, on every logged-in dashboard page: the config + the module -->
<script>
  window.BS_FUNNEL = {
    stagename: "SARAH",          // <- the logged-in creator's stagename (template it server-side)
    aff: "your-affiliate-slug"   // <- optional: your BranditScan affiliate slug
  };
</script>
<script src="/js/bs-funnel.js" defer></script>  <!-- the module: copy it from the block below -->

/* bs-funnel.js — BranditScan protection funnel, v1.
   Config: window.BS_FUNNEL = { stagename, aff } (set before this runs). */
(function () {
  'use strict';

  var cfg = window.BS_FUNNEL || {};
  var STAGENAME = (cfg.stagename || '').trim();
  if (!STAGENAME) return;                       // viewers, no-stagename users: do nothing

  var ORIGIN = 'https://branditscan.com';
  var CACHE_KEY = 'bs-leak-check:' + STAGENAME.toLowerCase();
  var DAY = 24 * 60 * 60 * 1000;

  /* ---------- pub/sub ---------- */

  function publish(result) {
    window.bsLeakData = result;                 // for late-joining code
    document.dispatchEvent(new CustomEvent('bs-leak-data', { detail: result }));
  }

  /* ---------- normalization ---------- */

  function toResult(d) {
    // Google-Images pirated thumbs first, then per-site samples as fill —
    // deduped, capped. Covers creators whose Google-Images page is clean
    // but whose proof images live on the pirate sites themselves.
    var thumbs = (d.thumbs || []).concat(d.samples || [])
      .filter(function (src, i, all) { return all.indexOf(src) === i; })
      .slice(0, 12);
    return {
      standing: d.standing,
      traffic: d.traffic || null,               // { pct, surface: 'web'|'images' }
      pirates: d.pirates || 0,
      domains: (d.domains || []).slice(0, 6),
      thumbs: thumbs,
      estimatedLoss: d.estimatedLoss || null,
      at: Date.now()
    };
  }

  /* ---------- verified accept (probe + visible embed share this) ---------- */

  function isOwnResult(event, frame) {
    if (event.origin !== ORIGIN) return false;
    if (!frame || !frame.contentWindow || event.source !== frame.contentWindow) return false;
    var d = event.data || {};
    if (d.type !== 'bs-leak-check:result') return false;
    // Poisoning guard: only the logged-in creator's own name may be cached.
    return (d.stagename || '').toLowerCase() === STAGENAME.toLowerCase();
  }

  function accept(data) {
    var result = toResult(data);
    try { localStorage.setItem(CACHE_KEY, JSON.stringify(result)); } catch (e) { /* storage blocked — in-memory only */ }
    publish(result);                            // latest verified message wins
  }

  /* ---------- the hidden probe ---------- */

  function embedUrl() {
    return ORIGIN + '/embed/leak-check?branding=0&border=0'
      + (cfg.aff ? '&aff=' + encodeURIComponent(cfg.aff) : '')
      + '&stagename=' + encodeURIComponent(STAGENAME);
  }

  function startProbe() {
    var frame = document.createElement('iframe');
    frame.src = embedUrl();
    frame.referrerPolicy = 'no-referrer';       // scans 403 silently without this
    frame.style.cssText = 'position:absolute;width:2px;height:2px;left:-9999px;top:0;border:0;';
    frame.setAttribute('aria-hidden', 'true');
    frame.setAttribute('tabindex', '-1');

    var gotFirst = false;
    function teardown() {
      window.removeEventListener('message', onMsg);
      if (frame.parentNode) frame.parentNode.removeChild(frame);
    }
    function onMsg(event) {
      if (!isOwnResult(event, frame)) return;
      accept(event.data);
      if (!gotFirst) {
        gotFirst = true;
        setTimeout(teardown, 15000);            // linger: catch the enriched samples re-post
      }
    }
    window.addEventListener('message', onMsg);
    setTimeout(function () { if (!gotFirst) teardown(); }, 180000);  // fail silent
    document.body.appendChild(frame);
  }

  /* ---------- consumers ---------- */

  document.addEventListener('bs-leak-data', function (e) { renderAll(e.detail); });

  function renderAll(r) {
    if (!r || !r.standing) return;
    renderNavBadge(r);
    renderBanner(r);
    renderTakedownsPage(r);
  }

  /* Nav badge: red % pill when at risk, green check for members, nothing
     when clean. Compact by design — long badges truncate nav labels. */
  function renderNavBadge(r) {
    document.querySelectorAll('[data-bs-nav-badge]').forEach(function (slot) {
      if (slot.dataset.done) return;
      if (r.standing === 'at_risk') {
        slot.textContent = (r.traffic && r.traffic.pct > 0)
          ? '\u25B2 ' + Math.round(r.traffic.pct) + '%'
          : r.pirates + ' leaks';
        slot.className = 'bs-badge bs-badge--alert';
        slot.hidden = false;
      } else if (r.standing === 'account') {
        slot.textContent = '\u2713';
        slot.className = 'bs-badge bs-badge--ok';
        slot.hidden = false;
      }
      slot.dataset.done = '1';                  // decide once per pageview
    });
  }

  /* Banner: server-rendered generic copy is the default state; this only
     upgrades it when there is something personal to say. */
  function renderBanner(r) {
    var el = document.querySelector('[data-bs-banner]');
    if (!el || el.dataset.done) return;
    el.dataset.done = '1';

    function setText(sel, text) {
      var n = el.querySelector(sel);
      if (n) { n.textContent = text; n.hidden = false; }
    }

    if (r.standing === 'account') {
      el.classList.add('bs-banner--protected');
      setText('[data-bs-banner-headline]', 'Your content is protected');
      setText('[data-bs-banner-sub]',
        'BranditScan is watching your name 24/7 \u2014 new leaks get found and taken down for you.');
      return;
    }
    if (r.standing !== 'at_risk' || r.pirates < 1) return;   // keep the generic pitch

    var name = (el.getAttribute('data-user-name') || '').trim();
    setText('[data-bs-banner-headline]',
      (name ? name + ', we' : 'We') + ' found your content on pirate sites.');
    setText('[data-bs-banner-sub]',
      'Take it down free \u2014 takedowns are covered for every creator.');

    if (r.domains.length) {
      setText('[data-bs-banner-domains]',
        'Found on: ' + r.domains.slice(0, 2).join(' \u00B7 ')
        + (r.domains.length > 2 ? ' \u00B7 +' + (r.domains.length - 2) + ' more' : ''));
    }

    var statNum = el.querySelector('[data-bs-banner-stat]');
    var statLabel = el.querySelector('[data-bs-banner-stat-label]');
    if (statNum && statLabel) {
      if (r.traffic && r.traffic.pct > 0) {
        statNum.textContent = '+' + Math.round(r.traffic.pct) + '%';
        statLabel.textContent = 'revenue to reclaim';
      } else {
        statNum.textContent = String(r.pirates);
        statLabel.textContent = 'leaks to remove';
      }
      statNum.hidden = statLabel.hidden = false;
    }

    var strip = el.querySelector('[data-bs-banner-thumbs]');
    if (strip && r.thumbs.length) renderThumbStrip(strip, r.thumbs);
  }

  /* Leaked-image strip: preload off-DOM, render only survivors (hotlinked
     images die unpredictably), favicon-badge each tile, blur via YOUR css.
     Tiles land in a .bs-leak-track; with 4+ survivors the set is duplicated
     and the track tagged --loop, so the CSS marquee slides it seamlessly.
     Too few tiles = no duplication, no animation — a static row. */
  function renderThumbStrip(strip, urls) {
    var loaded = [];
    var pending = urls.length;
    var rendered = false;

    function makeTile(src, isClone) {
      var tile = document.createElement('span');
      tile.className = 'bs-leak-tile';
      if (isClone) tile.setAttribute('aria-hidden', 'true');
      var img = document.createElement('img');
      img.src = src;
      img.referrerPolicy = 'no-referrer';
      img.alt = '';
      tile.appendChild(img);
      try {
        var host = new URL(src).hostname.replace(/^www\./, '');
        var fav = document.createElement('img');
        fav.className = 'bs-leak-tile__favicon';
        fav.src = 'https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=32&url=https://' + host;
        fav.onerror = function () { fav.remove(); };
        tile.appendChild(fav);
        tile.title = host;
      } catch (e) {}
      return tile;
    }

    function render() {
      if (rendered || !loaded.length) return;
      rendered = true;
      var set = loaded.slice(0, 8);
      var track = document.createElement('div');
      track.className = 'bs-leak-track' + (set.length >= 4 ? ' bs-leak-track--loop' : '');
      set.forEach(function (src) { track.appendChild(makeTile(src, false)); });
      if (set.length >= 4) {
        set.forEach(function (src) { track.appendChild(makeTile(src, true)); });
      }
      strip.appendChild(track);
      strip.hidden = false;
    }

    urls.forEach(function (src) {
      var probe = new Image();
      probe.referrerPolicy = 'no-referrer';
      probe.onload = function () { loaded.push(src); if (--pending === 0) render(); };
      probe.onerror = function () { if (--pending === 0) render(); };
      probe.src = src;
    });
    setTimeout(render, 8000);                   // straggler cutoff: show what loaded
  }

  /* Takedowns page: fill the automation card's %, decide the leak embed
     once (a late probe result must never yank a loaded widget). */
  function renderTakedownsPage(r) {
    var pct = document.querySelector('[data-bs-pct]');
    if (pct && r.standing === 'at_risk' && r.traffic && r.traffic.pct > 0) {
      pct.textContent = '+' + Math.round(r.traffic.pct) + '%';
    }
    var frame = document.getElementById('bs-leakcheck');
    if (!frame || frame.dataset.decided || frame.getAttribute('src')) return;
    frame.dataset.decided = '1';
    var section = document.querySelector('[data-bs-leak-section]');
    if (r.standing === 'good' || r.standing === 'account') {
      if (section) section.hidden = true;       // nothing to look at; saves scan quota
    } else if (frame.dataset.srcPrefilled) {
      frame.src = frame.dataset.srcPrefilled;   // at_risk: auto-run the full report
    }
  }

  /* ---------- iframe heights + visible-embed harvesting ---------- */

  window.addEventListener('message', function (e) {
    if (e.origin !== ORIGIN) return;
    var d = e.data || {};
    var lk = document.getElementById('bs-leakcheck');
    var tw = document.getElementById('bs-takedowns');
    if (d.type === 'bs-leak-check:height' && lk && e.source === lk.contentWindow) {
      lk.style.height = Math.ceil(d.height) + 'px';
    }
    if (d.type === 'bs-takedowns:height' && tw && e.source === tw.contentWindow) {
      tw.style.height = Math.ceil(d.height) + 'px';
    }
    // The visible embed keeps refreshing the cache for the whole visit —
    // including manual re-scans of the creator's OWN name (others rejected).
    if (lk && isOwnResult(e, lk)) accept(d);
  });

  /* ---------- boot ---------- */

  var cached = null;
  try { cached = JSON.parse(localStorage.getItem(CACHE_KEY) || 'null'); } catch (e) {}

  var visibleEmbed = document.getElementById('bs-leakcheck');
  if (cached && (Date.now() - cached.at) < DAY) {
    publish(cached);                            // instant, zero network
  } else if (visibleEmbed && visibleEmbed.dataset.srcPrefilled) {
    visibleEmbed.dataset.decided = '1';         // no data: the VISIBLE embed is the probe
    visibleEmbed.src = visibleEmbed.dataset.srcPrefilled;
  } else {
    startProbe();                               // any other page: hidden probe
  }
})();

<!-- /takedowns — two simple cards, style them your way (see the screenshots) -->
<div class="cards">

  <div class="card">                            <!-- FREE — self submission -->
    <h4>Submit takedowns — free</h4>
    <p>Paste a stolen link — a formal DMCA notice gets filed for you. Unlimited.</p>
    <a href="#takedown-widget" data-bs-open-takedowns>Submit a link</a>
  </div>

  <div class="card">                            <!-- AUTOMATED — your aff link -->
    <h4>Want it fully automated?</h4>
    <p>24/7 scanning and takedowns handled for you — reclaim up to
       <b data-bs-pct>+22%</b> of your traffic.</p>
    <a href="https://branditscan.com/register?aff=your-affiliate-slug"
       target="_blank" rel="noopener">Get protected</a>
  </div>

</div>

<!-- Self Submissions widget — hidden until the free card is clicked; the
     iframe never loads for visitors who don't ask for it. Signing secret:
     email help@branditscan.com when you START building (guide section 5.2). -->
<section id="takedown-widget" hidden>
  <iframe id="bs-takedowns" data-src="https://branditscan.com/embed/takedowns?t=TOKEN&funnel=off"
          referrerpolicy="no-referrer" scrolling="no" style="width:100%;border:0;height:520px;"></iframe>
</section>
<script>
  /* the free card's CTA reveals the widget and loads its iframe */
  document.addEventListener('click', function (e) {
    var t = e.target.closest('[data-bs-open-takedowns]');
    if (!t) return;
    e.preventDefault();
    var s = document.getElementById('takedown-widget');
    var f = document.getElementById('bs-takedowns');
    s.hidden = false;
    if (f && !f.getAttribute('src') && f.dataset.src) f.src = f.dataset.src;
    s.scrollIntoView();
  });
</script>

<!-- Leak Check report — loads by itself; the module decides once per pageview:
     at risk           -> auto-runs, creators see their leaks the moment they land
     clean / protected -> this WHOLE SECTION stays hidden (and those creators
                          get no nav badge either — silence is the reward)
     no data yet       -> loads prefilled and doubles as that day's probe -->
<section data-bs-leak-section>
  <iframe id="bs-leakcheck"
          data-src-prefilled="https://branditscan.com/embed/leak-check?aff=your-affiliate-slug&border=0&stagename=SARAH"
          referrerpolicy="no-referrer" scrolling="no" style="width:100%;border:0;height:600px;"></iframe>
</section>

<a href="/takedowns">
  Takedowns <span data-bs-nav-badge hidden></span>
</a>
<!-- the module fills it: at risk -> red "▲ 18%" · member -> green ✓ · clean -> nothing -->

<!-- Server-render your generic pitch; the module upgrades it in place when
     the cache has something personal to say — the sample above is exactly
     what this renders for an at-risk creator. One [data-bs-banner] per
     page: dashboard, settings, an empty state... -->
<div class="bs-banner" data-bs-banner data-user-name="Sarah"
     onclick="if (!event.target.closest('a')) location.href='/takedowns'">
  <span class="bs-banner__stat">
    <b data-bs-banner-stat hidden></b>          <!-- "+18%" (green — opportunity framing) -->
    <i data-bs-banner-stat-label hidden></i>    <!-- "revenue to reclaim" -->
  </span>
  <h3 data-bs-banner-headline>Protect your content</h3>
  <p data-bs-banner-sub>Pirate sites repost creator content within days of upload.
     Run a free scan and see what's out there with your name on it.</p>
  <p data-bs-banner-domains hidden></p>         <!-- "Found on: site1 · site2 · +2 more" -->
  <div data-bs-banner-thumbs hidden></div>      <!-- their leaked images: blurred sliding tiles -->
  <a href="/takedowns">Check my name &rarr;</a>
  <small>Powered by BranditScan</small>
</div>

<style>
/* The banner above, verbatim — restyle freely, every class name is yours. */
.bs-banner { position: relative; overflow: hidden; cursor: pointer; border-radius: 14px;
             border: 1px solid rgba(233, 162, 0, .42); background: #fffdf2;
             padding: 18px 128px 14px 20px; }
.bs-banner h3 { margin: 0 0 3px; font-size: 15.5px; }
.bs-banner p  { margin: 0; font-size: 12.5px; line-height: 1.55; color: #606662; }
.bs-banner [data-bs-banner-domains] { margin-top: 6px; font-size: 11.5px; color: #8c928e; }
.bs-banner__stat { position: absolute; top: 18px; right: 20px; text-align: right;
                   color: #1f9d5b; font-size: 22px; line-height: 1.1; font-weight: 600; }
.bs-banner__stat i { display: block; font-style: normal; font-weight: 400;
                     font-size: 10.5px; color: #7a807c; margin-top: 2px; }
.bs-banner > a { display: inline-block; margin-top: 10px; font-size: 12.5px;
                 font-weight: 600; color: #7f42fd; text-decoration: none; }
.bs-banner > small { display: block; margin-top: 10px; font-size: 10.5px; color: #969c98; }
.bs-banner--protected { border-color: rgba(31, 157, 91, .4); background: #f3fbf6; }

/* The proof strip — the module fills [data-bs-banner-thumbs] with a
   .bs-leak-track and duplicates the tiles, so -50% loops seamlessly. */
[data-bs-banner-thumbs] { margin-top: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bs-leak-track { display: flex; width: max-content; }
.bs-leak-track--loop { animation: bsLeakSlide 32s linear infinite; }
[data-bs-banner-thumbs]:hover .bs-leak-track { animation-play-state: paused; }
.bs-leak-tile { position: relative; flex-shrink: 0; width: 64px; height: 64px; margin-right: 8px;
                border: 2px solid #e5484d; border-radius: 10px; overflow: hidden; }
.bs-leak-tile img:first-child { width: 100%; height: 100%; object-fit: cover;
                                filter: blur(7px); transform: scale(1.15); }  /* the blur is non-negotiable */
.bs-leak-tile__favicon { position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px;
                         border-radius: 4px; background: #fff; padding: 1px; }
@keyframes bsLeakSlide { to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .bs-banner { padding-right: 20px; }
  .bs-banner__stat { position: static; display: block; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .bs-leak-track--loop { animation: none; } }
</style>