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)
- Offer Page Title
- Admin-only label. Not displayed on the page.
- Membership
- Choose who can see the page. “All Memberships” shows it to everyone.
- Show on Login
- Yes/No. If Yes, the page is inserted into the post-login flow.
- Login Display Order
- Lower numbers are shown first (1, 2, 3…).
- 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.
- Member Only
- Yes/No. If No, macros do not work for visitors not logged in.
- Offer Page Body
- Supports HTML, CSS, and limited JavaScript.
- 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