React Elements

react-pelcro-js integrates with our JS-SDK to make it easier for you to use all our features in your react application. Without ever having to worry about any of the inner workings or details. The elements are built based on our collective experience working with many clients around the world and they are designed to reduce user errors and optimize your conversions.

React Resources

HTML Buttons

Class names are used to identify buttons that will be used to trigger specific flows.
You can add those class names to multiple buttons on the same page, and they would all trigger the same flows. Find out more here

URL Triggers

We've made it easy to trigger modals via URLs so that you can trigger the modals via email campaigns, external links to your site, or to link button to the modals using anchor tags. Find out more here

uiSettings

Pelcro.uiSettings

UiSettings configure properties that enable/disable some features.

Usage

Pelcro.uiSettings = {
  enableNameFieldsInRegister: false,
  skipPaymentForFreePlans: false,
  enableReactGA4: false,
  enableLoginWithUsername: true,
  newsletters: [
    { label: "News A", id: "newsletterA" },
    { label: "News B", id: "newsletterB" }
  ],
  membershipSubscriptionStatusAccess: ["active"] //allow active members only to view content
};

Properties

Property	Description
enableNameFieldsInRegister	Enables the Firstname and Lastname fields in the Register modal if enableNameFieldsInRegister is set to true, disables if not.
skipPaymentForFreePlans	When a user subscribes to a plan, if skipPaymentForFreePlans is set to true and plan price is 0, then the user will not go through the Payment modal.
enableReactGA4	Enables GA4 instead of regular GA for google analytics if enableReactGA4 is set to true, disables if not.
enableLoginWithUsername	Enables logging in by username and updating username in the UserUpdate modal if enableLoginWithUsername is set to true, disables if not.
newsletters	Enables you to determine which newsletters you allow your end-users to subscribe to. The newsletters you determine will be synced along into Pelcro and into your ESP of choice. They will also be displayed in the Newsletter Update modal.
membershipSubscriptionStatusAccess	Enables you to define which membership statuses that can view your gated content. If not set, it will default to these values ["active", "extended", "trialing", "past_due"]