<script>
  window.Pelcro = {};
  window.Pelcro.siteid = 1232; // replace with your PRODUCTION Site ID
  window.Pelcro.environment = {
    domain: "https://www.pelcro.com",
    ui: "https://ui.pelcro.com/bundle.js",
    stripe: "pk_live_Wdef2LjEQXsgFWult6IVFobB"
  };    
</script>
<script defer src="https://js.pelcro.com/sdk/main.min.js" type="text/javascript"></script>

<button class="pelcro-login-button">Sign In</button>

<!-- Basic -->
<button class="pelcro-subscribe-button">Subscribe</button>

<!-- Pre-select a plan -->
<button class="pelcro-subscribe-button"
        data-product-id="123"
        data-plan-id="456">
  Subscribe to Premium
</button>

<!-- Save an article -->
<button class="pelcro-save-button"
        data-key="articles"
        data-title="Article Title"
        data-link="https://yoursite.com/article/123"
        data-image="https://yoursite.com/image.jpg">
  Save Article
</button>

<!-- Follow an author -->
<button class="pelcro-save-button"
        data-key="authors"
        data-title="John Smith"
        data-link="https://yoursite.com/author/john-smith">
  Follow Author
</button>

<!-- Follow a topic -->
<button class="pelcro-save-button"
        data-key="topics"
        data-title="Technology"
        data-link="https://yoursite.com/topic/technology">
  Follow
</button>

<div id="pelcro-inline-paywall">
  <!-- Your article content goes here -->
  <p>Article text...</p>
</div>

<div data-pelcro-entitlements="premium">
  This content is blurred until user subscribes
</div>

<!-- With pre-selected plan for subscription -->
<div data-pelcro-entitlements="premium"
     data-product-id="123"
     data-plan-id="456">
  Protected content
</div>

<button class="pelcro-login-button"
        data-login-text="Sign In"
        data-dashboard-text="My Account">
  Sign In
</button>

<button class="pelcro-dashboard-button">My Account</button>

<script>
  window.Pelcro = {};
  window.Pelcro.siteid = YOUR_SITE_ID;
  window.Pelcro.uiSettings = {
    enableLoginWithUsername: true,
    enableNameFieldsInRegister: true,
    newsletters: [
      { "id": "daily", "label": "Daily Digest" }
    ]
  };
</script>
<script defer src="https://js.pelcro.com/sdk/main.min.js"></script>

const user = window.Pelcro.user.read();
const allMetadata = user.metadata;

// Get all saved categories
const savedItems = Object.entries(allMetadata || {})
  .filter(([key]) => key.startsWith("metadata_saved_"))
  .map(([key, value]) => ({
    category: key.replace("metadata_saved_", ""),
    items: value
  }));

console.log(savedItems);
// Example output:
// [
//   { category: "articles", items: [{title: "...", link: "..."}, ...] },
//   { category: "authors", items: [{title: "...", link: "..."}, ...] }
// ]

// Get saved articles
const savedArticles = window.Pelcro.user.read().metadata?.metadata_saved_articles || [];

// Get followed authors
const followedAuthors = window.Pelcro.user.read().metadata?.metadata_saved_authors || [];

// Get followed topics
const followedTopics = window.Pelcro.user.read().metadata?.metadata_saved_topics || [];

document.addEventListener('PelcroUserLoggedIn', function() {
  const subscriptions = window.Pelcro.subscription.list() || [];

  const hasAccess = subscriptions.some(sub =>
    ['active', 'trialing', 'extended'].includes(sub.status)
  );

  if (hasAccess) {
    // Grant e-Reader access
  }
});

// If you've configured entitlements in Pelcro Dashboard
if (window.Pelcro.user.isEntitledTo('ereader-access')) {
  // Grant e-Reader access
}

if (!window.Pelcro.user.isAuthenticated()) {
  window.location.href = '?view=login';
}

// User authentication events (from SDK)
document.addEventListener('PelcroUserLoggedIn', function() {
  console.log('User logged in');
});

document.addEventListener('PelcroUserLogout', function() {
  console.log('User logged out');
});

document.addEventListener('PelcroUserLoaded', function() {
  const user = window.Pelcro.user.read();
  console.log('User data loaded:', user);
});

// Subscription events (from SDK)
document.addEventListener('PelcroSubscriptionCreate', function(e) {
  console.log('New subscription:', e.detail.data);
});

// Site loaded (from SDK)
document.addEventListener('PelcroSiteLoaded', function() {
  const site = window.Pelcro.site.read();
  console.log('Site config loaded:', site);
});

// Modal opened (from React Elements)
document.addEventListener('PelcroModalDisplay', function(e) {
  console.log('Modal opened:', e.detail.modalName);
});

// Cart events (from React Elements)
document.addEventListener('PelcroElementsCartOpened', function() {
  console.log('Cart opened');
});

document.addEventListener('PelcroElementsCartClosed', function() {
  console.log('Cart closed');
});

document.addEventListener('PelcroElementsCartItemAdded', function(e) {
  console.log('Item added to cart:', e.detail);
});

document.addEventListener('PelcroElementsCartItemRemoved', function(e) {
  console.log('Item removed from cart:', e.detail);
});

<script>
  window.Pelcro = {};
  window.Pelcro.siteid = YOUR_SITE_ID;
  window.Pelcro.uiSettings = {
    enableLoginWithUsername: true,
    enableNameFieldsInRegister: true,
    requireNameFieldsInRegister: true,
    addNewslettersSelectionToRegistration: true,
    newsletters: [
      { "id": "daily", "label": "Daily Newsletter" }
    ],
    skipPaymentForFreePlans: true,
    enableDateOfBirth: true,
    hideGiftForAutoRenew: true
  };
</script>

// Check if current article requires subscription
window.Pelcro.paywall.isArticleRestricted()

// Check if paywall should display
window.Pelcro.paywall.displayPaywall()

// Get remaining free article visits
window.Pelcro.paywall.freeVisitsLeft()

// Check user entitlement
window.Pelcro.user.isEntitledTo('entitlement-name')

// Get user subscriptions
window.Pelcro.subscription.list()

// Check authentication
window.Pelcro.user.isAuthenticated()

// Read user data
window.Pelcro.user.read()