Offer Pages

Offer Pages

📘 User Manual – Offer Pages (updated)

The Offer Pages section lets you create promotional pages shown to members after login or by membership. Use them for upgrades, limited-time deals, or announcements.

Manage Offer Pages

Columns:

  • Offer Page ID – Unique ID.
  • Offer Page Title – Admin-only title (not shown to users).
  • Membership – Who can see it.
  • Show on Login – Show right after a successful login.
  • Login Display Order/URL – Order of appearance after login.
  • Actions – Edit/Delete.

Example:



Add Offer Page (fields)

  1. Offer Page Title
  2. Admin-only label. Not displayed on the page.
  3. Membership
  4. Choose who can see the page. “All Memberships” shows it to everyone.
  5. Show on Login
  6. Yes/No. If Yes, the page is inserted into the post-login flow.
  7. Login Display Order
  8. Lower numbers are shown first (1, 2, 3…).
  9. Important: In your Offer Page Body include a link to /dashboard (e.g., “No thanks, take me to my dashboard”).
  • If multiple Offer Pages are enabled for login, clicking /dashboard will send the user to the next Offer Page according to display order.
  • When there are no more Offer Pages pending, the user lands on the actual dashboard.


  1. Member Only
  2. Yes/No. If No, macros do not work for visitors not logged in.
  3. Offer Page Body
  4. Supports HTML, CSS, and limited JavaScript.
  5. Macros available: {{username}}, {{email}}, {{first_name}}, {{last_name}}, {{total_earnings}}, {{total_referrals}}, {{gravatar_url}}, {{membership_name}}, {{total_website_members}}, {{total_active_members}}, {{total_email_clicks}}, {{total_banner_clicks}}, {{total_text_ad_clicks}}.



🔗 Checkout URL rules (important)


Membership checkout URL:

Use /store/checkout/membership/{MEMBERSHIP_ID}.

Example: /store/checkout/membership/14 — here 14 is the internal ID of the membership you want to sell.


Other product checkout URL:

Use /store/checkout/other_product/{PRODUCT_ID}.

Example: /store/checkout/other_product/1 — here 1 is the internal ID of the product.


Tip: Find the correct ID in your admin where the membership/product is listed, and replace it in the URL.



🔧 Examples

Example 1 — Clean Welcome & Upgrade (simple)


<div style="max-width:800px;margin:0 auto;font-family:system-ui,Arial,sans-serif;line-height:1.5">
  <div style="display:flex;gap:16px;align-items:center;background:#f7f7fb;border:1px solid #e8e8f3;border-radius:14px;padding:18px">
    <img src="{{gravatar_url}}" alt="Avatar" style="width:64px;height:64px;border-radius:50%;object-fit:cover">
    <div>
      <h1 style="margin:0;font-size:22px">Welcome back, {{first_name}}!</h1>
      <p style="margin:4px 0 0 0;color:#666">Membership: <strong>{{membership_name}}</strong></p>
    </div>
  </div>


  <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0">
    <div style="background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;text-align:center">
      <div style="font-size:12px;color:#777">Total Earnings</div>
      <div style="font-size:20px;font-weight:700">{{total_earnings}}</div>
    </div>
    <div style="background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;text-align:center">
      <div style="font-size:12px;color:#777">Referrals</div>
      <div style="font-size:20px;font-weight:700">{{total_referrals}}</div>
    </div>
    <div style="background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;text-align:center">
      <div style="font-size:12px;color:#777">Active Members</div>
      <div style="font-size:20px;font-weight:700">{{total_active_members}}</div>
    </div>
  </div>


  <div style="background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white;border-radius:14px;padding:18px">
    <h2 style="margin:0 0 8px 0">Unlock more with our Lifetime Upgrade</h2>
    <ul style="margin:0 0 14px 18px">
      <li>Up to 20× faster credit earnings</li>
      <li>Recurring affiliate commissions</li>
      <li>Priority support & early features</li>
    </ul>
    <div style="display:flex;gap:10px;flex-wrap:wrap">
      <a href="/upgrade" style="background:white;color:#111;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700">Upgrade Now</a>
      <!-- Enlace correcto para avanzar al siguiente paso de ofertas o dashboard -->
      <a href="/dashboard" style="background:transparent;border:2px solid rgba(255,255,255,.8);color:white;padding:8px 14px;border-radius:10px;text-decoration:none">No thanks — take me to my dashboard</a>
    </div>
  </div>


  <p style="font-size:13px;color:#777;margin:12px 0 0">
    Logged in as <strong>{{username}}</strong> ({{email}}) • Total site members: {{total_website_members}}
  </p>
</div>


Example 2 — Offers Grid + Flow Hint


<div style="max-width:940px;margin:0 auto;font-family:Inter,Arial,sans-serif">
  <header style="text-align:center;margin:10px 0 16px">
    <h1 style="margin:0;font-size:26px">Special Offers for {{first_name}}</h1>
    <p style="margin:6px 0;color:#555">Welcome, <strong>{{username}}</strong> — current plan: <strong>{{membership_name}}</strong></p>
  </header>


  <section style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px">
    <article style="border:1px solid #e9e9ef;border-radius:14px;overflow:hidden;background:#fff">
      <div style="padding:16px">
        <h3 style="margin:0 0 6px 0">Lifetime Pro</h3>
        <p style="margin:0 0 10px;color:#666">One-time payment. Maximum perks.</p>
        <ul style="margin:0 0 12px 18px">
          <li>Fastest credit accrual</li>
          <li>Top-tier commissions</li>
          <li>Priority support</li>
        </ul>
        <a href="/upgrade/lifetime-pro" class="cta" data-offer="lifetime-pro"
           style="display:inline-block;background:#111;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px">Choose Lifetime</a>
      </div>
    </article>


    <article style="border:1px solid #e9e9ef;border-radius:14px;overflow:hidden;background:#fff">
      <div style="padding:16px">
        <h3 style="margin:0 0 6px 0">Premium Lifetime</h3>
        <p style="margin:0 0 10px;color:#666">Lifetime benefits at a lower price.</p>
        <ul style="margin:0 0 12px 18px">
          <li>Great ROI</li>
          <li>Recurring commissions</li>
          <li>Members-only tools</li>
        </ul>
        <a href="/upgrade/premium-lifetime" class="cta" data-offer="premium-lifetime"
           style="display:inline-block;background:#111;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px">Choose Premium</a>
      </div>
    </article>


    <article style="border:1px solid #e9e9ef;border-radius:14px;overflow:hidden;background:#fff">
      <div style="padding:16px">
        <h3 style="margin:0 0 6px 0">Pro Monthly</h3>
        <p style="margin:0 0 10px;color:#666">Try our best plan monthly.</p>
        <ul style="margin:0 0 12px 18px">
          <li>High credit speed</li>
          <li>Affiliate commissions</li>
          <li>Cancel anytime</li>
        </ul>
        <a href="/upgrade/pro-monthly" class="cta" data-offer="pro-monthly"
           style="display:inline-block;background:#111;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px">Choose Monthly</a>
      </div>
    </article>
  </section>


  <section style="margin:18px 0;border:1px dashed #ddd;border-radius:12px;padding:14px;background:#fafafa">
    <h4 style="margin:0 0 8px 0">Why upgrade?</h4>
    <p style="margin:0 0 6px 0;color:#555">
      {{first_name}}, upgraded members report more <strong>email clicks</strong> (you: {{total_email_clicks}}),
      better ad performance (banner: {{total_banner_clicks}}, text: {{total_text_ad_clicks}}),
      and stronger referral growth (you have {{total_referrals}} so far).
    </p>
  </section>


  <div style="display:flex;gap:10px;flex-wrap:wrap">
    <!-- Enlace correcto para continuar el flujo de ofertas o llegar al dashboard -->
    <a href="/dashboard" id="continueLoginFlow"
       style="border:1px solid #ddd;padding:10px 14px;border-radius:10px;text-decoration:none;color:#111;background:#fff">
       No thanks — take me to my dashboard
    </a>
    <a href="/help/offers" style="padding:10px 14px;border-radius:10px;text-decoration:none;color:#111">Learn more</a>
  </div>


  <script>
    (function(){
      var buttons = document.querySelectorAll('.cta');
      buttons.forEach(function(btn){
        btn.addEventListener('click', function(){
          try { localStorage.setItem('last_offer_clicked', btn.getAttribute('data-offer') || ''); } catch(e){}
        });
      });
    })();
  </script>


  <p style="font-size:12px;color:#888;margin-top:12px">
    Logged in as {{email}} • Community size: {{total_website_members}}
  </p>
</div>


Example 3 — Full-page themed


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Marketing Boost — Lifetime Pro</title>
  <meta name="description" content="Marketing Boost Lifetime Pro. One-time payment. Faster timers, monthly credits, affiliate commissions, targeting filters, and more. No rebills; instant activation." />


  <style>
    :root{
      --bg:#0f1117;
      --surface:#121826;
      --muted:#9aa4b2;
      --text:#f8fafc;
      --primary:#4f46e5;
      --accent:#f59e0b;
      --ring: rgba(79,70,229,.35);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 100% -10%, rgba(245,158,11,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(79,70,229,.12), transparent 60%),
        var(--bg);
      min-height:100dvh;
    }
    .wrap{max-width:1100px;margin-inline:auto;padding:24px 16px}


    .header{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      box-shadow:0 14px 40px rgba(0,0,0,.35);
      padding:28px 18px;
      text-align:center;
      backdrop-filter:saturate(120%) blur(2px);
    }
    .brand{display:inline-flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px;color:var(--accent);font-weight:800;letter-spacing:.3px}
    .logo-dot{width:38px;height:38px;border-radius:12px;display:inline-block;background:conic-gradient(from 180deg at 50% 50%, var(--primary), var(--accent), var(--primary));box-shadow:0 8px 26px var(--ring)}
    .headline{font-size:clamp(26px,4vw,40px);margin:6px 0 8px 0;color:#fff;letter-spacing:.2px;font-weight:900}
    .sub{opacity:.92;font-size:clamp(15px,2.2vw,18px);max-width:72ch;margin:0 auto 8px;color:var(--muted)}
    .strap{display:inline-block;margin-top:12px;background:linear-gradient(90deg,var(--primary), #7c3aed);color:white;font-weight:900;padding:8px 14px;border-radius:999px;box-shadow:0 10px 24px var(--ring)}
    .pill{display:inline-block;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.35);color:#fde68a;padding:6px 10px;border-radius:999px;font-weight:900;letter-spacing:.3px}
    .offer{margin-top:26px;display:flex;justify-content:center}
    .plan{width:min(560px,100%);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02)}
    .plan__head{background:linear-gradient(90deg, var(--primary), #7c3aed);color:#0b0911;text-align:center;padding:16px 14px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;font-size:22px}
    .price{text-align:center;color:#fff;font-size:42px;font-weight:900;padding:18px 0 8px;text-shadow:0 2px 16px rgba(79,70,229,.25)}
    .price .currency{opacity:.9}
    .list{list-style:none;margin:0;padding:0 22px 18px 38px;font-weight:700;line-height:1.7;font-size:18px}
    .list li{position:relative;margin:8px 0;color:#eef2f7}
    .list li:before{content:"✓";position:absolute;left:-22px;top:0;color:var(--accent);font-weight:900}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:14px 18px;border-radius:12px;font-weight:900;border:1px solid rgba(255,255,255,.22);background:linear-gradient(90deg,var(--primary), #7c3aed);color:#fff;text-decoration:none;box-shadow:0 14px 34px var(--ring);transition:transform .18s ease, filter .18s ease}
    .btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
    .btn.block{width:100%}
    .buy{padding:16px}
    .skip{margin:22px auto 10px;max-width:640px;text-align:center}
    .skip a{display:inline-block;width:100%;background:transparent;border:1px solid rgba(255,255,255,.22);color:#e7dfd6;padding:12px 16px;border-radius:10px;font-weight:800;text-decoration:none;transition:background .2s ease, transform .18s ease}
    .skip a:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
    @media (max-width:720px){.list{font-size:16px}.price{font-size:36px}}
  </style>
</head>
<body>
  <div class="wrap">
    <!-- Header -->
    <section class="header">
      <div class="brand">
        <span class="logo-dot" aria-hidden="true"></span>
        <span class="pill">Lifetime Pro</span>
      </div>


      <h1 class="headline">Marketing Boost — Lifetime Pro</h1>
      <p class="sub">Go <strong>lifetime</strong> today and unlock faster ad timers, larger monthly credit packs, powerful targeting (country & membership filters), private messaging, and generous affiliate commissions. Built for serious marketers—without recurring fees.</p>
      <span class="strap">One-time payment • No rebills • Instant activation</span>
    </section>


    <!-- Offer -->
    <section class="offer">
      <article class="plan">
        <header class="plan__head">Lifetime — Pro Access</header>
        <div class="price"><span class="currency">$</span>49</div>
        <ul class="list">
          <li>Membership Type: Lifetime (Status: Active after purchase)</li>
          <li>Ad & credit link timers optimized for speed</li>
          <li>Monthly Credits: Email, Banner, and Text packs included</li>
          <li>Affiliate Commission: high, recurring on referrals</li>
          <li>Private Messaging: included</li>
          <li>Targeting: Country & Membership filters</li>
          <li>Store visibility: shown</li>
        </ul>
        <div class="buy">
          <!-- Replace with your real checkout URL -->
          <a class="btn block" id="buy" href="/store/checkout/membership/lifetime-pro" data-plan-id="lifetime-pro">Upgrade Now</a>
        </div>
      </article>
    </section>


    <!-- Secondary link (correct) -->
    <div class="skip">
      <!-- Este enlace debe ser /dashboard para continuar el flujo de ofertas o llegar al dashboard -->
      <a href="/dashboard">No thanks — take me to my dashboard</a>
    </div>
  </div>


  <script>
    (function(){
      // Change currency if you need: '$' -> '€'
      var currency = '$';
      document.querySelectorAll('.currency').forEach(function(el){ el.textContent = currency; });
    })();
  </script>
</body>
</html>


2 0

Similar Articles