Pelcro | Content Subscription Platform


Welcome to Pelcro docs! Get familiar with the Pelcro products and explore their features:

API Documentation

The Pelcro API is organized around REST. Our API has predictable, resource-oriented URLs, and uses HTTP response codes to indicate API errors.

Learn More

JS SDK Documentation

Add Pelcro to your browser-based JavaScript projects to allow users to create an account, subscribe to your plans and get insight to their activity.

Learn More

Webhooks Documentation

Webhooks are used to notify your application any time an event happens on your account, for example, after a customer is subscribed.

Learn More

CSS Documentation

You can override the CSS being used in the JS application by following the a few simple steps.

Learn More


  • Install

    Copy and paste the code below before the tag on every page of your site. Click here to view a demo.

    <script>var Pelcro = window.Pelcro || (window.Pelcro = {}); Pelcro.siteid = "ID";</script>
    <script async src="//" type="text/javascript"></script>

    Copy and paste the button below anywhere you would like the user to display all plans from. You can use the element id or class to prompt the subscription or login modal

    <a href="#" id="subscribe-button" class="btn btn-primary">Subscribe</a>
    <a href="#" class="subscribe-button" class="btn btn-primary">Subscribe</a>

    Copy and paste the button below anywhere you would like the user to login from

    <a href="#" id="login-button" class="btn btn-primary">Login</a>
    <a href="#" class="login-button" class="btn btn-primary">Login</a>
  • Configure

    We offer enterprise clients access to a staging environment where they can run tests. To configure a testing environment, set the options below in the SDK. Contact our sales team to learn more about a staging environment.

    Always make sure to instantiate an empty object first.

    <script>Pelcro.environment = {};</script>

    This will override the domain to use the staging environment.

    <script>Pelcro.environment.domain = "";</script>

    To trigger your own UI layer, you can set it using the UI env as shown below. Available to specific plans only.

    <script>Pelcro.environment.ui = "ui-react.bunlde.js";</script>

    To use fake CC transactions, enter your Stripe test public key as shown below.

    <script>Pelcro.environment.stripe = "pk_test_000000000000000000000000";</script>

    Example of all steps above.

    var Pelcro = window.Pelcro || (window.Pelcro = {});
    Pelcro.siteid = "0";
    Pelcro.environment = {};
    Pelcro.environment.stripe = "pk_test_000000000000000000000000";
    Pelcro.environment.domain = "";
    Pelcro.environment.ui = "ui-react.bunlde.js";
  • Core Modules

    All examples below are JS examples of the Pelcro object that is a global variable in the window object. The default Pelcro flow and UI uses all the SDK functions below automatically without any additional coding requirements by the publisher. The functions below can allow you create your own UI and flow layer by using the SDK functions below.


    Pelcro uses JWT to authenticate users and identify them. A JSON Web Token (JWT) is a JSON object that is defined in RFC 7519 as a safe way to represent a set of information between two parties. The JWT token is reference as authToken in the documentation below.


    All call backs return a response or error object in the following order function(err, resp). Error messages returned by the API are accessible as following:


    All errors are returned back from the API. Requests will be validated by the API using server side validations. Error messages returned by the API are accessible as following: API responses for errors will be either 4xx or 5xx depending on the severity of the error. Validation errors will be 4xx while server errors will be 5xx.


    Create a user with his email and password

    Pelcro.user.register({first_name: "", last_name: "", email: "", password: "", metadata: ""}, callback)

    Very credentials of a user with the login function. The response will also contain user addresses and invoices

    Pelcro.user.login({email: "", password: ""}, callback)

    Update a user

    Pelcro.user.update({first_name: "", last_name: "", phone: "", metadata: ""}, callback)

    Logout current user by removing any authentication cookies.


    Check if the user has been authenticated

    Create a card on payment file via Stripe. This just returns a token that can be used.
    Pelcro.card.create($form, callback)

    Create a subscription for a user

    Pelcro.subscription.create({stripe_token: "", auth_token: "", plan_id: "", coupon_code: "", gift_recipient_email: ""}, callback)

    Cancel a subscription for a user

    Pelcro.subscription.cancel({auth_token: "", subscription_id: ""}, callback)

    Is the user subscribe to this plan object, object needs to include planId


    Is the user subscribe to this site


    Create a newsletter

    Pelcro.newsletter.create({email: "", source: "", lists: "", consent_url: "", consent_text: "", consent_type: ""}, callback)

    Get a newsletter by email

    Pelcro.newsletter.getByEmail(email, callback)

    Updated a newsletter

    Pelcro.newsletter.getByEmail({email: "", source: "", lists: "", consent_url: "", consent_text: "", consent_type: ""}, callback)

    Create an address for an authenticated user

    Pelcro.address.create({auth_token: "", type: "" (shipping or billing), first_name: "", last_name: "", line1: "", city: "", state: "", country: "", postal_code: ""}, callback)

    Update an address for an authenticated user

    Pelcro.address.update({auth_token: "", type: "" (shipping or billing), first_name: "", last_name: "", line1: "", city: "", state: "", country: "", postal_code: ""}, callback)

    # of free visits left


    Should the newsletter paywall be displayed based on site configurations?


    Should the meter paywall be displayed based on site configurations?


    Should the paywall (block content) be displayed based on site configurations?


    Get the paywall product targeting the user based on site configuration

  • Insight Module

    By default, page view events are tracked via Pelcro’s SDK. There is no need to trigger a custom event for every page view. Any interaction with our modals, meter or any view that Pelcro displays (if enabled) are automatically tracked and reported to your dashboard. If you are not using our default flows, then you might want to continue reading to learn how you can trigger custom events and properties.

    Events are captured programmatically using code. In this example, an event named “Button clicked” is triggered. You should plan out and prioritize all the events that are relevant and important to your business and make sure they are all tracked. You should always have to goals in mind, what do I need to track and what data do I need for machine learning.

    Pelcro.insight.track("Button clicked");

    In the example below, we are adding two custom properties to the event in the previous example. By default, we track the following properties to every event that is triggered, so there is no need to do that again.

    Pelcro.insight.track("Button clicked", {
        "name": Facebook like,
        "color": "Blue"

    Default properties:This list is not exhaustive. We frequently add to this list any property we deem useful to our clients. You can view the up to date list in the segmentation report on your dashboard.

    • Country
    • Region
    • Scroll percentage at the time of the event
    • Time spent at the time of the event
    • UTM tags (source, medium, campaign, content, term)
    • Platform
    • Ad blocking status
    • Device
    • Referral source
    • Frequency (frequency of visitor on the site)
    • Device fingerprint

CSS Docs

  • Override - Beta

    Pelcro uses the !important tag to ensure all CSS styles are prioritized. In order to override the CSS, add another CSS rule with !important , and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (before end of body). This works because in a specificity tie, the last rule defined wins. Example below to override the submit button color.

    #pelcro-app .pelcro-prefix-view .pelcro-prefix-submit-btn {background-color: #3684a8 !important; border-color: #3684a8 !important;}

    In the example above, the selector of .pelcro-prefix-submit-btn is #pelcro-prefix-app, so as shown above, we added another selector (.pelcro-prefix-modal) to give it more specificity and hence override it.

    Please note this is still in beta, if you have any questions, please email