Web Ad API

Authorization: Bearer YOUR_WEB_API_KEY
Content-Type: application/json

// ── 1. Page route — call cvServeAd and pass the result to your template ──────
app.get('/feed', requireDiscordAuth, async (req, res) => {
  const adData = await cvServeAd(req);

  res.render('feed', {
    adBannerUrl:  adData?.ad?.banner_url ?? null,
    adClickUrl:   adData?.ad?.join_url ?? adData?.ad?.button_url ?? null,
    adColor:      adData?.ad?.embed_color ?? null,
    adLabel:      adData?.ad?.button_name ?? null,
    viewToken:    adData?.view_token ?? null,   // null = house ad or no ad
    referralUrl:  adData?.referral_url ?? null, // for "Ads by Cordvertise" link
  });
});

// ── 2. Confirm route — your frontend posts here after the banner renders ──────
app.post('/cv-confirm', requireDiscordAuth, async (req, res) => {
  const { viewToken } = req.body;
  if (!viewToken) return res.json({ ok: true });  // house ad or no ad — skip
  await cvConfirmAd(viewToken, req.session.discordUserId);
  res.json({ ok: true });
});

// ── 3. In your page template — fire confirm once banner is 50% visible ────────
// Render the widget (see "Ad widget" section below) then observe it:
//
// const widget = document.getElementById('cv-ad');
// const token  = widget?.dataset.viewToken;
// if (widget && token) {
//   new IntersectionObserver(([e], obs) => {
//     if (!e.isIntersecting) return;
//     obs.disconnect();
//     fetch('/cv-confirm', {
//       method: 'POST',
//       headers: { 'Content-Type': 'application/json' },
//       body: JSON.stringify({ viewToken: token }),
//     });
//   }, { threshold: 0.5 }).observe(widget);
// }

<!-- Cordvertise ad widget — place anywhere in your page -->
<div id="cv-ad"
     data-view-token="<%= viewToken %>"
     style="
       display: inline-block;
       border-radius: 10px;
       overflow: hidden;
       border: 1px solid <%= adColor %>;
       background: #0d0d11;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       max-width: 400px;
       width: 100%;
     ">

  <!-- Clickable banner image -->
  <a href="<%= adClickUrl %>"
     target="_blank"
     rel="noopener"
     aria-label="<%= adLabel %>"
     style="display:block;line-height:0;">
    <img src="<%= adBannerUrl %>"
         alt="<%= adLabel %>"
         style="width:100%;display:block;border-radius:9px 9px 0 0;" />
  </a>

  <!-- Attribution bar -->
  <div style="
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #0d0d11;
  ">
    <span style="font-size:11px;font-weight:700;color:#7a8499;letter-spacing:.04em;">Ad</span>
    <a href="<%= referralUrl %>"
       target="_blank"
       rel="noopener"
       style="font-size:11px;color:#7a8499;text-decoration:none;"
       onmouseover="this.style.color='#00e5a0'"
       onmouseout="this.style.color='#7a8499'">
      Ads by Cordvertise
    </a>
  </div>
</div>

{
  "ok": true,
  "ad": {
    "ad_id": "42",
    "banner_url": "https://...",           // image — use as clickable banner
    "button_url": "https://.../c/TOKEN",   // tracking redirect (views/clicks) — wrap the banner in this
    "button_name": "Join Now",             // CTA label (use in tooltip / aria-label)
    "embed_color": "#6D5EFC",             // brand accent color — use for border/shadow
    "target_type": "views",               // "views" | "clicks" | "joins" | "stays"
    "join_url": "https://.../j/TOKEN"     // only present for joins/stays — use instead of button_url
  },
  "view_token": "eyJ...",                 // pass to web/ads/confirm
  "expires_in_seconds": 120,
  "referral_url": "https://cordvertise.com/r/YOURCODE"  // use in "Ads by Cordvertise" attribution link
}

{
  "ok": true,
  "ad": null,
  "view_token": null,
  "denied_reason": "user_daily_cap"   // see Errors section
}

// Billed
{ "ok": true, "billed": true, "ad_id": "uuid", "auto_paused": false, "daily_cap_reached": false }

// Not billed
{ "ok": true, "billed": false, "reason": "token_expired" }

<!-- Drop anywhere in your page. Replace template vars with your backend values. -->
<div id="cv-ad"
     data-view-token="<%= viewToken %>"
     style="max-width:400px;width:100%;border-radius:10px;overflow:hidden;
            border:1px solid <%= adColor %>;background:#0d0d11;
            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
  <a href="<%= adClickUrl %>" target="_blank" rel="noopener" aria-label="<%= adLabel %>"
     style="display:block;line-height:0;">
    <img src="<%= adBannerUrl %>" alt="<%= adLabel %>"
         style="width:100%;display:block;border-radius:9px 9px 0 0;" />
  </a>
  <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#0d0d11;">
    <span style="font-size:11px;font-weight:700;color:#7a8499;">Ad</span>
    <a href="<%= referralUrl %>" target="_blank" rel="noopener"
       style="font-size:11px;color:#7a8499;text-decoration:none;"
       onmouseover="this.style.color='#00e5a0'" onmouseout="this.style.color='#7a8499'">
      Ads by Cordvertise
    </a>
  </div>
</div>

<script>
(function() {
  const widget = document.getElementById('cv-ad');
  const token  = widget?.dataset.viewToken;
  if (!widget || !token) return;
  new IntersectionObserver(function(entries, obs) {
    if (!entries[0].isIntersecting) return;
    obs.disconnect();
    fetch('/cv-confirm', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ viewToken: token }),
    });
  }, { threshold: 0.5 }).observe(widget);
})();
</script>

<!-- Popup backdrop + widget. Replace template vars with your backend values. -->
<!-- Add to end of <body>. Hidden by default, shown via JS below. -->
<div id="cv-popup-backdrop"
     style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
            z-index:9999;align-items:center;justify-content:center;"
     onclick="document.getElementById('cv-popup-backdrop').style.display='none'">
  <div id="cv-ad"
       data-view-token="<%= viewToken %>"
       onclick="event.stopPropagation()"
       style="max-width:400px;width:90%;border-radius:10px;overflow:hidden;
              border:1px solid <%= adColor %>;background:#0d0d11;
              font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
    <a href="<%= adClickUrl %>" target="_blank" rel="noopener" aria-label="<%= adLabel %>"
       style="display:block;line-height:0;">
      <img src="<%= adBannerUrl %>" alt="<%= adLabel %>"
           style="width:100%;display:block;border-radius:9px 9px 0 0;" />
    </a>
    <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#0d0d11;">
      <span style="font-size:11px;font-weight:700;color:#7a8499;">Ad</span>
      <a href="<%= referralUrl %>" target="_blank" rel="noopener"
         style="font-size:11px;color:#7a8499;text-decoration:none;"
         onmouseover="this.style.color='#00e5a0'" onmouseout="this.style.color='#7a8499'">
        Ads by Cordvertise
      </a>
    </div>
  </div>
</div>

<script>
(function() {
  const token    = '<%= viewToken %>';
  const backdrop = document.getElementById('cv-popup-backdrop');
  if (!backdrop || !token) return;

  // Show popup after 1.5 seconds
  setTimeout(function() {
    backdrop.style.display = 'flex';

    // Confirm once the ad is visible
    const widget = document.getElementById('cv-ad');
    new IntersectionObserver(function(entries, obs) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect();
      fetch('/cv-confirm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ viewToken: token }),
      });
    }, { threshold: 0.5 }).observe(widget);
  }, 1500);
})();
</script>

<!-- Trigger button — replace with whatever action makes sense on your page -->
<button id="cv-trigger-btn">See your result</button>

<!-- Popup backdrop + widget -->
<div id="cv-popup-backdrop"
     style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
            z-index:9999;align-items:center;justify-content:center;">
  <div id="cv-ad"
       data-view-token="<%= viewToken %>"
       style="max-width:400px;width:90%;border-radius:10px;overflow:hidden;
              border:1px solid <%= adColor %>;background:#0d0d11;
              font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
              position:relative;">

    <!-- Countdown dismiss button — hidden until timer finishes -->
    <button id="cv-close-btn"
            style="display:none;position:absolute;top:8px;right:8px;
                   background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);
                   color:#fff;font-size:11px;padding:3px 9px;border-radius:5px;
                   cursor:pointer;z-index:10;">
      Close
    </button>
    <div id="cv-countdown"
         style="position:absolute;top:8px;right:8px;
                background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);
                color:#fff;font-size:11px;padding:3px 9px;border-radius:5px;">
      5
    </div>

    <a href="<%= adClickUrl %>" target="_blank" rel="noopener" aria-label="<%= adLabel %>"
       style="display:block;line-height:0;">
      <img src="<%= adBannerUrl %>" alt="<%= adLabel %>"
           style="width:100%;display:block;border-radius:9px 9px 0 0;" />
    </a>
    <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#0d0d11;">
      <span style="font-size:11px;font-weight:700;color:#7a8499;">Ad</span>
      <a href="<%= referralUrl %>" target="_blank" rel="noopener"
         style="font-size:11px;color:#7a8499;text-decoration:none;"
         onmouseover="this.style.color='#00e5a0'" onmouseout="this.style.color='#7a8499'">
        Ads by Cordvertise
      </a>
    </div>
  </div>
</div>

<script>
(function() {
  const token      = '<%= viewToken %>';
  const backdrop   = document.getElementById('cv-popup-backdrop');
  const widget     = document.getElementById('cv-ad');
  const closeBtn   = document.getElementById('cv-close-btn');
  const countdown  = document.getElementById('cv-countdown');
  const triggerBtn = document.getElementById('cv-trigger-btn');

  if (!backdrop || !token) return;

  function openAd() {
    backdrop.style.display = 'flex';

    // Confirm once visible
    new IntersectionObserver(function(entries, obs) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect();
      fetch('/cv-confirm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ viewToken: token }),
      });
    }, { threshold: 0.5 }).observe(widget);

    // Countdown — 5 seconds before dismiss button appears
    var secs = 5;
    var interval = setInterval(function() {
      secs--;
      if (secs > 0) {
        countdown.textContent = secs;
      } else {
        clearInterval(interval);
        countdown.style.display = 'none';
        closeBtn.style.display  = 'block';
      }
    }, 1000);
  }

  function closeAd() {
    backdrop.style.display = 'none';
  }

  triggerBtn.addEventListener('click', openAd);
  closeBtn.addEventListener('click', closeAd);
})();
</script>