PaywallProtect Widget

Official JavaScript widget for PaywallProtect - bot detection and content protection.

Installation

Via CDN (Easiest - No Build Step)

<script 
  src="https://cdn.jsdelivr.net/npm/@paywallprotect/widget@1/dist/paywall-widget.min.js"
  data-site-id="your_site_id"
  data-api-key="your_api_key"
  data-api-url="https://your-project.supabase.co/functions/v1"
  async
></script>

Via npm (For Build Tools)

npm install @paywallprotect/widget

import PaywallProtect from '@paywallprotect/widget';

PaywallProtect.init({
  siteId: 'your_site_id',
  apiKey: 'your_api_key',
  apiUrl: 'https://your-project.supabase.co/functions/v1'
});

Usage

Mark Protected Content

<article class="paywall-protected">
  Your premium content here
</article>

Or use data attribute:

<div data-paywall="true">
  Premium content
</div>

API

// Manual initialization
PaywallProtect.init({
  siteId: 'site_xxx',
  apiKey: 'pk_live_xxx',
  apiUrl: 'https://...',
  subscribeUrl: '/pricing',
  loginUrl: '/login',
  mode: 'auto' // or 'always', 'never'
});

// Show paywall manually
PaywallProtect.showPaywall({
  type: 'hard',
  title: 'Premium Content',
  message: 'Subscribe to continue'
});

// Hide paywall
PaywallProtect.hidePaywall();

// Reload protection
PaywallProtect.reload();

License

MIT