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
/dashboardwill 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