Pelcro | Content Subscription Platform

Documentation

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


JS SDK Docs

  • 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="//cdn.pelcro.com/js/bab/min.js" 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 = "https://staging.pelcro.com";</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 = "https://staging.pelcro.com";
    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.

    Authentication

    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.

    Customer/User

    Create a user with his email and password

    Pelcro.user.register(email, password, callback)

    Very credentials of a user with the login function

    Pelcro.user.login(email, password, callback)

    Logout current user by removing any authentication cookies.

    Pelcro.user.logout()

    Check if the user has been authenticated

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

    Create a subscription for a user

    Pelcro.subscription.create(cardToken, authToken, planId, callback)

    Cancel a subscription for a user

    Pelcro.subscription.remove(subscriptionId, authToken, callback)

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

    Pelcro.subscription.isSubscribedToPlan(plan)

    Is the user subscribe to this site

    Pelcro.subscription.isSubscribedToSite()
    Newsletter

    Create a newsletter for an email

    Pelcro.newsletter.create(email, callback)
    Address

    Create an address for an authenticated user

    Pelcro.address.create(authToken, type (shipping or billing), firstName, lastName, line1, city, state, country, postalCode, callback)
    Paywall

    # of free visits left

    Pelcro.paywall.freeVisitsLeft()

    Should the newsletter paywall be displayed based on site configurations?

    Pelcro.paywall.displayNewsletterPaywall()

    Should the meter paywall be displayed based on site configurations?

    Pelcro.paywall.displayMeterPaywall()

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

    Pelcro.paywall.displayPaywall()

    Get the paywall product targeting the user based on site configuration

    Pelcro.paywall.getPaywallProduct()
  • 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