Terms Acceptance Demo

Test and configure the Terms of Service acceptance modal with different settings and scenarios.

Configuration

Current Status

Accepted:No
Version:None

Demo Area - Modal Mode

Click the "Show Modal" button in the configuration panel to test the modal with your current settings.

Modal Features:

  • • Animated entrance and exit
  • • Checkbox validation for reading documents
  • • Links to actual Terms and Privacy pages
  • • Keyboard navigation (ESC to close)
  • • Responsive design for mobile and desktop
  • • Loading state during acceptance

Usage Examples

Basic Modal

import TermsAcceptanceModal from '@/components/Legal/TermsAcceptanceModal'

<TermsAcceptanceModal
  isOpen={showModal}
  onAccept={() => console.log('Accepted')}
  onDecline={() => console.log('Declined')}
  onClose={() => setShowModal(false)}
/>

Content Gate

import { TermsGate } from '@/components/Legal/TermsAcceptanceWrapper'

<TermsGate message="Accept terms to access premium features">
  <PremiumContent />
</TermsGate>

Auto Prompt

import { TermsPrompt } from '@/components/Legal/TermsAcceptanceWrapper'

<TermsPrompt onAccept={() => trackAcceptance()}>
  <YourAppContent />
</TermsPrompt>