How to Add a Trial Expiration Banner to Your SaaS App

<!-- trial-banner.html -->

<div
  id="trial-banner"
  role="status"
  aria-live="polite"
  class="trial-banner trial-banner--info"
>
  <div class="trial-banner__content">
    <span class="trial-banner__icon" aria-hidden="true">
      &#9200;
    </span>
    <p class="trial-banner__message">
      Your free trial ends in
      <strong id="trial-days-left">14 days</strong>.
      Upgrade now to keep all your data and features.
    </p>
  </div>
  <div class="trial-banner__actions">
    <a
      href="/billing/upgrade"
      class="trial-banner__cta"
    >
      Upgrade Now
    </a>
    <button
      class="trial-banner__dismiss"
      aria-label="Dismiss trial banner"
      onclick="dismissTrialBanner()"
    >
      &times;
    </button>
  </div>
</div>

/* trial-banner.css */

.trial-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  font-size: 14px;
  line-height: 1.4;
  transition: background-color 0.3s ease,
              color 0.3s ease;
}

.trial-banner__content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.trial-banner__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.trial-banner__cta {
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.trial-banner__cta:hover {
  opacity: 0.9;
}

.trial-banner__dismiss {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.trial-banner__dismiss:hover {
  opacity: 1;
}

/* Progressive Urgency Colors */

/* Info: 7+ days remaining (green) */
.trial-banner--info {
  background-color: #ecfdf5;
  color: #065f46;
}
.trial-banner--info .trial-banner__cta {
  background-color: #059669;
  color: white;
}

/* Warning: 3-7 days remaining (yellow) */
.trial-banner--warning {
  background-color: #fefce8;
  color: #854d0e;
}
.trial-banner--warning .trial-banner__cta {
  background-color: #ca8a04;
  color: white;
}

/* Urgent: 1-3 days remaining (orange) */
.trial-banner--urgent {
  background-color: #fff7ed;
  color: #9a3412;
}
.trial-banner--urgent .trial-banner__cta {
  background-color: #ea580c;
  color: white;
}

/* Critical: <24 hours remaining (red) */
.trial-banner--critical {
  background-color: #fef2f2;
  color: #991b1b;
}
.trial-banner--critical .trial-banner__cta {
  background-color: #dc2626;
  color: white;
}

/* Responsive: Stack vertically on mobile */
@media (max-width: 640px) {
  .trial-banner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 12px 16px;
  }
  .trial-banner__actions {
    width: 100%;
    justify-content: center;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .trial-banner {
    transition: none;
  }
}

// trial-banner.js

class TrialBanner {
  constructor(trialEndDate, upgradeUrl) {
    this.trialEndDate = new Date(trialEndDate);
    this.upgradeUrl = upgradeUrl;
    this.banner = document.getElementById('trial-banner');
    this.daysLeftEl = document.getElementById('trial-days-left');
    this.interval = null;
  }

  init() {
    // Check if banner was dismissed this session
    const dismissed = sessionStorage.getItem('trial-banner-dismissed');
    if (dismissed) {
      this.banner.style.display = 'none';
      return;
    }

    this.update();
    // Update every minute
    this.interval = setInterval(() => this.update(), 60000);
  }

  getTimeRemaining() {
    const now = new Date();
    const diff = this.trialEndDate - now;
    return {
      total: diff,
      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
      hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((diff / (1000 * 60)) % 60),
    };
  }

  getUrgencyLevel(days, hours) {
    if (days < 1) return 'critical';
    if (days < 3) return 'urgent';
    if (days < 7) return 'warning';
    return 'info';
  }

  formatTimeLeft(time) {
    if (time.total <= 0) return 'Your trial has expired';
    if (time.days > 1) return `${time.days} days`;
    if (time.days === 1) return '1 day';
    if (time.hours > 0) return `${time.hours} hours`;
    return `${time.minutes} minutes`;
  }

  update() {
    const time = this.getTimeRemaining();

    if (time.total <= 0) {
      this.daysLeftEl.textContent = 'expired';
      this.banner.querySelector('.trial-banner__message')
        .innerHTML = 'Your trial has <strong>expired</strong>. '
        + 'Upgrade now to restore access to all features.';
      this.setUrgency('critical');
      clearInterval(this.interval);
      return;
    }

    this.daysLeftEl.textContent = this.formatTimeLeft(time);
    this.setUrgency(
      this.getUrgencyLevel(time.days, time.hours)
    );
  }

  setUrgency(level) {
    // Remove all urgency classes
    this.banner.classList.remove(
      'trial-banner--info',
      'trial-banner--warning',
      'trial-banner--urgent',
      'trial-banner--critical'
    );
    this.banner.classList.add(`trial-banner--${level}`);
  }

  dismiss() {
    this.banner.style.display = 'none';
    sessionStorage.setItem(
      'trial-banner-dismissed', 'true'
    );
  }
}

// Initialize
const banner = new TrialBanner(
  '2026-04-03T00:00:00Z', // from your backend
  '/billing/upgrade'
);
banner.init();

// Global dismiss function for onclick
window.dismissTrialBanner = () => banner.dismiss();

// Approach 1: Session-based dismissal (Recommended)
// Banner reappears on every new session
function dismiss() {
  sessionStorage.setItem('trial-banner-dismissed', 'true');
  banner.style.display = 'none';
}

// Approach 2: Time-based re-show
// Banner reappears after N hours
function dismiss() {
  const reappearAt = Date.now() + (8 * 60 * 60 * 1000);
  localStorage.setItem('trial-banner-reappear', reappearAt);
  banner.style.display = 'none';
}

function shouldShow() {
  const reappearAt = localStorage.getItem(
    'trial-banner-reappear'
  );
  return !reappearAt || Date.now() >= Number(reappearAt);
}

// Approach 3: Urgency-level re-show
// Banner reappears when urgency level changes
function dismiss(currentLevel) {
  localStorage.setItem(
    'trial-banner-dismissed-level', currentLevel
  );
  banner.style.display = 'none';
}

function shouldShow(currentLevel) {
  const dismissedLevel = localStorage.getItem(
    'trial-banner-dismissed-level'
  );
  return currentLevel !== dismissedLevel;
}

// TrialBanner.tsx

import { useState, useEffect, useCallback } from 'react';

type UrgencyLevel = 'info' | 'warning' | 'urgent' | 'critical';

interface TrialBannerProps {
  trialEndsAt: string;
  upgradeUrl: string;
}

export function TrialBanner({ trialEndsAt, upgradeUrl }: TrialBannerProps) {
  const [timeLeft, setTimeLeft] = useState('');
  const [urgency, setUrgency] = useState<UrgencyLevel>('info');
  const [dismissed, setDismissed] = useState(false);

  const calculate = useCallback(() => {
    const diff = new Date(trialEndsAt).getTime() - Date.now();
    const days = Math.floor(diff / 86400000);
    const hours = Math.floor((diff % 86400000) / 3600000);

    if (diff <= 0) {
      setTimeLeft('expired');
      setUrgency('critical');
      return;
    }

    setTimeLeft(days > 0 ? `${days}d ${hours}h` : `${hours}h`);
    setUrgency(
      days < 1 ? 'critical' :
      days < 3 ? 'urgent' :
      days < 7 ? 'warning' : 'info'
    );
  }, [trialEndsAt]);

  useEffect(() => {
    calculate();
    const interval = setInterval(calculate, 60000);
    return () => clearInterval(interval);
  }, [calculate]);

  useEffect(() => {
    const dismissedLevel = sessionStorage.getItem(
      'trial-banner-dismissed-level'
    );
    if (dismissedLevel === urgency) setDismissed(true);
    else setDismissed(false);
  }, [urgency]);

  const handleDismiss = () => {
    sessionStorage.setItem(
      'trial-banner-dismissed-level', urgency
    );
    setDismissed(true);
  };

  if (dismissed) return null;

  const colors = {
    info: 'bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100',
    warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100',
    urgent: 'bg-orange-50 text-orange-900 dark:bg-orange-950 dark:text-orange-100',
    critical: 'bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100',
  };

  return (
    <div role="status" aria-live="polite"
      className={`sticky top-0 z-50 flex items-center
        justify-between px-6 py-3 text-sm ${colors[urgency]}`}
    >
      <p>
        Trial {timeLeft === 'expired' ? 'has' : 'ends in'}
        {' '}<strong>{timeLeft}</strong>.
        {' '}Upgrade to keep all features.
      </p>
      <div className="flex items-center gap-3">
        <a href={upgradeUrl}
          className="px-4 py-1.5 rounded-md font-semibold
            bg-current/20 hover:bg-current/30"
        >
          Upgrade Now
        </a>
        <button onClick={handleDismiss}
          aria-label="Dismiss trial banner"
          className="opacity-70 hover:opacity-100 text-lg"
        >
          &times;
        </button>
      </div>
    </div>
  );
}