SaaS Trial Gating: Feature Access Control in JavaScript

Feature gating in a SaaS trial is the practice of restricting access to certain features during the free trial period to create upgrade motivation. Instead of giving trial users full access to everything, you strategically limit premium features so users experience your core value while understanding what they'd unlock by upgrading.

Done right, feature gating increases trial-to-paid conversion by 12-22%. Done wrong, it kills activation and drives users away before they experience your product's value. The difference comes down to which features you gate, how you present the gate, and how you measure the impact.

This guide covers the technical implementation of feature gating -- client-side, server-side, and hybrid approaches -- with JavaScript code examples. We'll also cover the strategy layer: which features to gate, UX patterns for the gate itself, and the most common pitfalls that reduce conversion instead of improving it.

Three Feature Gating Strategies

Every feature gate has two concerns: enforcement (preventing access) and experience (what the user sees). Here are three strategies that combine both differently:

// Client-side feature gate
const FEATURE_ACCESS = {
  trial: [
    'dashboard', 'basic-reports', 'single-project',
    'email-support', 'basic-export'
  ],
  pro: [
    'dashboard', 'basic-reports', 'single-project',
    'email-support', 'basic-export',
    'advanced-reports', 'unlimited-projects',
    'team-collaboration', 'api-access',
    'custom-branding', 'priority-support',
    'advanced-export', 'integrations'
  ],
};

function hasFeatureAccess(userPlan, featureName) {
  const allowedFeatures = FEATURE_ACCESS[userPlan] || [];
  return allowedFeatures.includes(featureName);
}

// In your UI code:
function renderFeatureButton(featureName, label) {
  const button = document.createElement('button');
  button.textContent = label;

  if (!hasFeatureAccess(currentUser.plan, featureName)) {
    // Option A: Show lock icon
    button.innerHTML = `🔒 ${label} <span class="badge">Pro</span>`;
    button.addEventListener('click', () => {
      showUpgradePrompt(featureName);
    });
  } else {
    button.addEventListener('click', () => {
      executeFeature(featureName);
    });
  }

  return button;
}

// Server-side feature gate middleware (Node.js/Express)
const PLAN_FEATURES = {
  trial: ['dashboard', 'basic-reports', 'basic-export'],
  pro: ['*'], // all features
};

function requireFeature(featureName) {
  return (req, res, next) => {
    const { plan } = req.user.subscription;
    const allowed = PLAN_FEATURES[plan] || [];

    if (allowed.includes('*') || allowed.includes(featureName)) {
      return next();
    }

    return res.status(403).json({
      error: 'feature_gated',
      feature: featureName,
      requiredPlan: 'pro',
      message: `${featureName} requires a Pro plan.`,
      upgradeUrl: '/upgrade',
    });
  };
}

// Apply to routes:
app.get('/api/reports/advanced',
  authenticate,
  requireFeature('advanced-reports'),
  advancedReportsHandler
);

app.post('/api/export/csv',
  authenticate,
  requireFeature('advanced-export'),
  csvExportHandler
);

app.post('/api/team/invite',
  authenticate,
  requireFeature('team-collaboration'),
  teamInviteHandler
);

// Hybrid approach: server tells client what's available,
// client handles the UX, server enforces on every request.

// 1. Server sends feature access list with auth response
app.get('/api/me', authenticate, (req, res) => {
  const { plan } = req.user.subscription;
  res.json({
    user: req.user,
    features: PLAN_FEATURES[plan],
    plan: plan,
    upgradeUrl: '/upgrade',
  });
});

// 2. Client stores and uses the feature list
let userFeatures = [];

async function initFeatureAccess() {
  const res = await fetch('/api/me');
  const data = await res.json();
  userFeatures = data.features;
  return data;
}

function canAccess(featureName) {
  return userFeatures.includes('*')
    || userFeatures.includes(featureName);
}

// 3. Client intercepts gated feature clicks
function onFeatureClick(featureName, callback) {
  if (canAccess(featureName)) {
    callback(); // proceed normally
  } else {
    showUpgradePrompt(featureName); // show upgrade UX
  }
}

// 4. Server still enforces (defense in depth)
// Even if client-side check is bypassed,
// the API returns 403 for gated features

Which Features to Gate: The Value Matrix

Not all features should be gated. Gate the wrong features and you kill activation. Gate the right ones and you create powerful upgrade motivation. Use this value matrix:

Gating UX: Show vs. Hide vs. Tease

How you present a gated feature is as important as which features you gate. There are three UX patterns:

// Anti-pattern: hiding gated features
function renderSidebar(userPlan) {
  return `
    <nav>
      <a href="/dashboard">Dashboard</a>
      <a href="/projects">Projects</a>
      ${userPlan === 'pro' ? '<a href="/team">Team</a>' : ''}
      ${userPlan === 'pro' ? '<a href="/api">API</a>' : ''}
    </nav>
  `;
  // Trial users never see Team or API options
  // They have no idea these features exist
  // Zero upgrade motivation created
}

// Better: show but disable with visual indicator
function renderSidebar(userPlan) {
  const isTrialUser = userPlan === 'trial';
  return `
    <nav>
      <a href="/dashboard">Dashboard</a>
      <a href="/projects">Projects</a>
      <a href="/team" class="${isTrialUser ? 'gated' : ''}">
        ${isTrialUser ? '🔒 ' : ''}Team
        ${isTrialUser ? '<span class="badge-pro">Pro</span>' : ''}
      </a>
      <a href="/api" class="${isTrialUser ? 'gated' : ''}">
        ${isTrialUser ? '🔒 ' : ''}API Access
        ${isTrialUser ? '<span class="badge-pro">Pro</span>' : ''}
      </a>
    </nav>
  `;
}

// Best: tease with contextual upgrade prompt
function renderSidebar(userPlan) {
  return `
    <nav>
      <a href="/dashboard">Dashboard</a>
      <a href="/projects">Projects</a>
      <a href="#" onclick="handleGatedClick('team')">
        Team <span class="badge-pro">Pro</span>
      </a>
      <a href="#" onclick="handleGatedClick('api')">
        API Access <span class="badge-pro">Pro</span>
      </a>
    </nav>
  `;
}

function handleGatedClick(featureName) {
  // With TrialMoments — one line:
  TrialMoments.triggerBlockedFeature(featureName);

  // Or manually — 50+ lines of modal code:
  // showUpgradeModal({
  //   feature: featureName,
  //   title: `Unlock ${featureName}`,
  //   description: getFeatureDescription(featureName),
  //   upgradeUrl: '/upgrade',
  // });
}

Common Pitfalls That Kill Conversion

Measuring Gating Effectiveness

You can't optimize what you don't measure. Track these three metrics to evaluate and improve your gating strategy:

// Track gating events for measurement
function trackGateEvent(featureName, action) {
  // Send to your analytics platform
  analytics.track('feature_gate_interaction', {
    feature: featureName,
    action: action, // 'viewed', 'clicked', 'upgraded', 'dismissed'
    userPlan: currentUser.plan,
    daysInTrial: getDaysInTrial(currentUser),
    timestamp: new Date().toISOString(),
  });
}

// Track when user sees a gated feature indicator
trackGateEvent('advanced-export', 'viewed');

// Track when user clicks on the gated feature
trackGateEvent('advanced-export', 'clicked');

// Track when user upgrades from the gate prompt
trackGateEvent('advanced-export', 'upgraded');

// Track when user dismisses the upgrade prompt
trackGateEvent('advanced-export', 'dismissed');

// TrialMoments tracks all of these automatically
// in its analytics dashboard

Done-for-You Gating UX: TrialMoments Blocked Feature Prompt

TrialMoments provides a purpose-built Blocked Feature Prompt that handles the "tease" pattern automatically. When a trial user clicks on a gated feature, one function call displays a professional upgrade modal with the feature name, value explanation, and direct upgrade link.

<!-- 1. Add the TrialMoments SDK -->
<script src="https://cdn.trialmoments.com/sdk.js"></script>
<script>
  TrialMoments.init({
    accountId: 'your-account-id',
    trialEndDate: '2026-04-15',
    upgradeUrl: 'https://yourapp.com/upgrade'
  });
</script>

<!-- 2. Trigger blocked feature prompt anywhere -->
<script>
  // When user clicks a gated feature:
  document.querySelector('#team-invite-btn')
    .addEventListener('click', function() {
      if (!canAccess('team-collaboration')) {
        TrialMoments.triggerBlockedFeature('team-collaboration');
        return;
      }
      openTeamInviteDialog();
    });

  document.querySelector('#export-csv-btn')
    .addEventListener('click', function() {
      if (!canAccess('advanced-export')) {
        TrialMoments.triggerBlockedFeature('advanced-export');
        return;
      }
      exportToCSV();
    });

  document.querySelector('#api-keys-btn')
    .addEventListener('click', function() {
      if (!canAccess('api-access')) {
        TrialMoments.triggerBlockedFeature('api-access');
        return;
      }
      showAPIKeys();
    });
</script>

Frequently Asked Questions