Delivering Premium Content with a Cookie-Based Paywall

Delivering Premium Content with a Cookie-Based Paywall

If you're looking to provide a teaser for premium content—just like platforms such as Substack—you can use a simple, effective method based on a browser cookie check.

This is perfect for blog content, downloadables, or tutorials gated for verified users.

✅ What This Does

  • Shows a teaser paragraph
  • Adds a fade-out effect to hint there's more to see
  • Offers a "Register Now" CTA
  • Automatically shows full content if the user has a cookie called verified

💡 How It Works

1. HTML: Wrap the restricted content in a .restricted-content div

2. CSS: Use a gradient fade and height restriction for teaser effect

3. JS: Check for a verified cookie and toggle visibility accordingly

Example Markup & Script 

<div class="restricted-content" id="restricted-content">
  <p>This is the first line of the restricted content.</p>
  <p>This is the second line, only visible to verified users.</p>
  <p>This is the third line, only visible to verified users.</p>
  <div class="fade-out" id="fade-out"></div>
</div>

<div class="register-notice" id="register-notice">
  Register to see the rest of this page.
  <a href="/contact" class="register-btn">Register Now</a>
</div>


.restricted-content {
  position: relative;
  height: 100px;
  overflow: hidden;
}
.restricted-content.unverified {
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, #f9f9f9 100%);
}
.fade-out {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f9f9f9);
}
.register-notice {
  display: none;
  margin-top: 10px;
  font-size: 1.2rem;
}
.register-btn {
  background-color: #007BFF;
  color: white;
  padding: 8px 16px;
  border-radius: 5px;
  text-decoration: none;
}


function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
  return null;
}

window.onload = function () {
  const isVerified = getCookie('verified');
  const restrictedContent = document.getElementById('restricted-content');
  const fadeOut = document.getElementById('fade-out');
  const registerNotice = document.getElementById('register-notice');

  if (!isVerified) {
    restrictedContent.classList.add('unverified');
    fadeOut.style.display = 'block';
    registerNotice.style.display = 'block';
  } else {
    restrictedContent.style.height = 'auto';
    fadeOut.style.display = 'none';
    registerNotice.style.display = 'none';
  }
};

✨ Why This Fits DevStack

DevStack is full-stack and media-rich. This approach is:

  • Lightweight (HTML/CSS/JS only)
  • Extendable (add user tracking or analytics)
  • Stylish (uses native browser behavior for fading)
  • Non-disruptive (doesn't block crawling bots with JS)

This technique pairs well with:

  • /contact forms
  • /pricing to monetize your premium content
  • A /devstack-powered member system that sets the verified cookie

You can also inject this into your Razor Pages layout or _PartialView, making it reusable across any restricted content section.

uxsecurity