ChangelogGuidesRecipesAPI ReferenceRoadmap
Guides
START FREE TRIALSCHEDULE A DEMO
Start typing to search…

Blox

Pelcro Integration Guide for Blox

A quick-start guide for Blox users to integrate Pelcro's subscription management, paywalls, and user authentication.

Table of Contents

  1. Adding the Pelcro Script
  2. Adding Login & Subscribe Buttons
  3. Implementing the Paywall
  4. Using URL Triggers
  5. Implementing the User Dashboard
  6. E-Reader Integration

1. Adding the Pelcro Script

Add this code to your site's <head> section:

<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>

Do not self-host the script — always load from Pelcro's CDN to receive automatic updates.

2. Adding Login & Subscribe Buttons

Login Button

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

Subscribe 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>

All Button Classes

ClassFunctionAttributes
pelcro-login-buttonLogin / Dashboarddata-login-text, data-dashboard-text
pelcro-register-buttonRegistration—
pelcro-subscribe-buttonSubscription flowdata-product-id, data-plan-id
pelcro-dashboard-buttonUser dashboard—
pelcro-gift-buttonGift purchasedata-product-id, data-plan-id
pelcro-cart-buttonShopping cart—
pelcro-add-to-cart-buttonAdd to cartdata-sku-id (required)
pelcro-purchase-buttonDirect purchasedata-sku-id (required)
pelcro-update-newsletters-buttonNewsletter prefs—
pelcro-offline-subscribe-buttonOffline plansdata-product-id, data-plan-id
pelcro-manage-members-buttonManage membersdata-subscription-id

3. Implementing the Paywall

Paywalls are configured in your Pelcro Dashboard — no code required.

  1. Go to Products → click ... → Configure
  2. Set as Paywall Product
  3. Choose targeting: metered (X free articles) or premium (full restriction)

Client-Side Content Protection (Optional)

Blur content for non-subscribers:

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

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

4. Using URL Triggers

Open Pelcro modals via URL parameters.

Basic Triggers

ActionURL
Login?view=login
Register?view=register
Plan Selection?view=plan-select
Gift Redemption?view=gift-redeem
Password Reset?view=password-forgot
Edit Profile?view=user-edit
Newsletter?view=newsletter

With Parameters

ActionURL
Specific Plan?view=plan-select&product_id=123&plan_id=456
Apply Coupon?view=plan-select&coupon_code=SAVE20
Gift Purchase?view=plan-select&is_gift=true
Redeem Gift Code?view=gift-redeem&gift_code=ABC123
Update Payment?view=payment-method-update&source_id=XXX
Newsletter Update?view=newsletter-update&[email protected]
Cart with Items?view=cart&sku_id=32,33,34

5. Implementing the User Dashboard

Option A: Login Button (Recommended)

Shows login for guests, dashboard for authenticated users:

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

Option B: Dashboard Only

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

Customization

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

6. E-Reader Integration

Check Subscription Status

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
  }
});

Check Entitlement-Based Access

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

Require Login for E-Reader

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

Subscription Status Reference

StatusDescription
activeActive subscription
trialingIn trial period
extendedGrace period access
past_duePayment overdue (optional)
canceledCanceled
expiredExpired

document.addEventListener('PelcroUserLoggedIn', function() {
  const { subscriptions } = window.Pelcro.user.read();

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

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

Require Login for E-Reader

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

JavaScript Events

Listen for Pelcro events:

// User logged in
document.addEventListener('PelcroUserLoggedIn', callback);

// User logged out
document.addEventListener('PelcroUserLogout', callback);

// Subscription created
document.addEventListener('PelcroSubscriptionCreate', callback);

// Paywall displayed
document.addEventListener('PelcroPaywallDisplayed', callback);

// Paywall triggered (with article counts)
document.addEventListener('PelcroPaywallMatch', function(e) {
  console.log(e.detail.count_of_articles_read);
  console.log(e.detail.count_of_articles_left);
});

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

Support


Updated 2 days ago