Pelcro

JS

Suggest Edits

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="//js.pelcro.com/sdk/main.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="#" class="pelcro-subscribe-button">Subscribe</a>

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

<a href="#" class="pelcro-login-button">Login</a>

To trigger a specific product, add the data-product-id attribute to the subscribe button as shown below

<a href="#" class="pelcro-subscribe-button" data-product-id=1>Subscribe</a>

To trigger a specific plan, add the data-product-id and data-plan-id attributes to the subscribe button as shown below

<a href="#" class="pelcro-subscribe-button" data-product-id=1 data-plan-id=2>Subscribe</a>

To pre-select the gift in the modals, add the data-is-gift attribute to the subscribe button as shown below

<a href="#" class="pelcro-subscribe-button" data-is-gift=true>Subscribe</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.bundle.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.bundle.js";

Core module

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.

Callbacks
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: err.response.data.error.message

Errors
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: err.response.data.error.message. 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.

User

Create a user with his email and password

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

Verify user credentials with the login function. The response will also contain user addresses and invoices

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

Update user information such as name and phone number

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

Logout current user by removing any authentication cookies.

Pelcro.user.logout()

Check if the user is authenticated

Pelcro.user.isAuthenticated();

To get the user object and all its associated properties, you can read the user object as follows. This will only work for authenticated users.

window.Pelcro.user.read()

Socials

Facebook

To get the user data using a Facebook login button, connect an HTML button to the SDK function below. You can pass the required scopes to the SDK function based on your requirements.

window.Pelcro.social.getUserDataFromFacebook(
      {
        appId:
          window.Pelcro.site.read() &&
          window.Pelcro.site.read().facebook_app_id,
        scope: "email"
      },
      (err, res) => console.log(err, res)
    );

Google

To get the user data using a Google login button, connect an HTML button to the SDK function below. You can pass the required scopes to the SDK function based on your requirements.

window.Pelcro.social.getUserDataFromGoogle(
      {
        appId:
          window.Pelcro.site.read() &&
          window.Pelcro.site.read().google_app_id,
        scope: "email"
      },
      (err, res) => console.log(err, res)
    );

Password

To send a password reset email to the user, simply call this function.

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

To reset the user's password, you will need the token from the URL that is sent to the user by email (token)

Pelcro.password.reset({email: "", password: "", password_confirmation: "", token: ""}, callback)

Subscription

Create a subscription for a user. A Stripe token is required to create a subscription, you can use Stripe JS-SDK to tokenize a credit card. Learn more here
.

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 site

Pelcro.subscription.isSubscribedToSite()

Newsletter

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)

Update a newsletter

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

Address

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)

Paywall

Number 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 two 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.

  • Event/action type
  • Country
  • Region
  • Scroll percentage
  • Time spent
  • UTM tags (source, medium, campaign, content, term)
  • OGP tags (article:tag, article:section, etc) - learn more here
  • Ad blocking status
  • Device
  • Referral source
  • Frequency (frequency of visitor on the site)
  • Device fingerprint
  • Local time
  • Device
  • Browser
  • Referral domain

Events

Listen to triggered events from the SDK and add your own reactions. No matter what you want to do, you can use our SDK to listen to events that are triggered. You can use these events to customize reactions for different events, integrate them with an analytics provider or customize the user experience based on them. The possibilities are endless.

PelcroUserRegister

This occurs when a user registers using the Pelcro JS-SDK.

PelcroUserLogin

This occurs when a user logs in using the Pelcro JS-SDK.

PelcroUserLogout

This occurs when a user logs out using the Pelcro JS-SDK.

PelcroSubscriptionCreate

This occurs when a subscription is created using the Pelcro JS-SDK.

PelcroSubscriptionCancel

This occurs when a subscription is canceled using the Pelcro JS-SDK.

PelcroUserLoaded

This occurs when the user object is updated via the Pelcro JS-SDK using the most up-to-date data from the API.

PelcroUserUpdated

This occurs when the user object is updated via the Pelcro JS-SDK.

PelcroAddressCreated

This occurs when the user's address object is created via the Pelcro JS-SDK.

PelcroAddressUpdated

This occurs when the user's address object is updated via the Pelcro JS-SDK.

PelcroSourceCreated

This occurs when the user's payment source object is created via the Pelcro JS-SDK.

PelcroPasswordForgot

This occurs when the password forgot is requested via the Pelcro JS-SDK.

PelcroPasswordReset

This occurs when the password gets reset via the Pelcro JS-SDK.

PelcroEcommerceProductsLoaded

This occurs when the e-commerce products are loaded. from the backend via the Pelcro JS-SDK using the most up-to-date data from the API.

<script>
    document.addEventListener("PelcroUserRegister", function (e) {
        console.log("PelcroUserRegister");
    });

    document.addEventListener("PelcroUserLogin", function (e) {
        console.log("PelcroUserLogin");
    });

    document.addEventListener("PelcroUserLogout", function (e) {
        console.log("PelcroUserLogout");
    });

    document.addEventListener("PelcroSubscriptionCreate", function (e) {
        console.log("PelcroSubscriptionCreate");
    });

    document.addEventListener("PelcroUserLoaded", function (e) {
        console.log("PelcroUserLoaded");
    });
  
    document.addEventListener("PelcroEcommerceProductsLoaded", function (e) {
        console.log("PelcroEcommerceProductsLoaded");
    });
</script>

<script>
  document.addEventListener("PelcroUserLoaded", function (e) {
      // You can access all the data available on the user as shown below
      console.log(e.detail);
  });
</script>

Integrations

Pelcro offers multiple integrations. Some of which are abstracted on the JS-SDK to make it easier to use.

Disqus

The Disqus integration provides you with an out of the box SSO integration.

  • You can only make this call if the user is authenticated.
  • You will receive a data object containing the auth key and the public key
window.Pelcro.integrations.disqus.getToken(function(resp){});

E-commerce

They enable interacting with Pelcro's E-commerce feature on the SDK-level.

Configuration

In order to enable the E-commerce feature, you have to do two steps:

  • Configure your E-commerce products on the CRM.
  • Add this variable at the end of your Pelcro configuration section in your HTML file:
<script>
  .....
  window.Pelcro.ENABLE_ECOMMERCE = true;
</script>

Read the list of your E-commerce products

Calling this function provides you with a list of all the E-commerce products that you've configured on the CRM.

window.Pelcro.ecommerce.products.read();

List the E-commerce products

If you decided to skip fetching the E-commerce products, you can skip defining the Pelcro.ENABLE_ECOMMERCE variable, or set it to false. Then use the following function to fetch the E-commerce products from our backend. 

window.Pelcro.ecommerce.products.list(callback);

Create an order

This SDK function allows you to checkout, or create an E-commerce order

window.Pelcro.ecommerce.order.create(
      {
        items: order.items,
        stripe_token: token.id,
        address_id: address.id
      },
      (err, res) => {
        console.log(err, res);
      }
    );

Updated a day ago

JS

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.