Pre-built classes between buttons and our default flows are implemented in a streamlined manner making it easy to trigger flows directly from your page.
Class names are used to identify buttons that will be used to trigger specific flows.
All our class names are prefixed with
pelcro- to ensure no conflict arises with your class names.
You can add those class names to multiple buttons on the same page, and they would all trigger the same flows.
Override the Login button text.
By default, the
pelcro-login-button button class will override the HTML button text to "Login" in case the user is not authenticated, and to "My account" in case the user is authenticated, in order to override this behaviour, you will need to provide two
data attributes to your
button HTML element, these are
data-dashboard-text, See the next example.
Opens the register modal.
Opens the plan selection modal for the user to select the product & plan.
You specify an offline plan that your users can subscribe to.
You can specify a certain product to be selected by using the data attributes by passing that product id as a data attribute.
You can directly move the user to the checkout flow of a specific plan by setting the product & plan IDs using the data attributes.
You can direct the user to gift a subscription by adding the
data-is-gift="true" to the subscribe button.
Opens the update newsletters modal.
To list all your ecommerce products in a static page, add an HTML container with the
You can add a specific ecommerce product to the user's shopping cart by setting the product's
sku-id data attribute.
You can directly move the user to the checkout flow of a specific ecommerce product using the purchase button class.
You can save data to the user's metadata in order to retrieve it later in the future. This could be useful if you want to save the user's favorite articles, events, products, and more.
To save data to the user's metadata, add the class
pelcro-save-button to the button. The
key data attribute will be used as the category of the saved item, to later pull the saved data.
You can save any property to the metadata by adding
data-[name of the property to be saved].
If you want to know the current state of the save buttons, whether it's loading or already saved, for styling proposes for example.
We inject state classes to reflect the current state of the button.
Clicking the button once will set the
pelcro-is-loading class until it's saved, then we set the
Clicking the button again would set the
pelcro-is-loading class then remove
pelcro-is-active when the item is removed from the metadata.
title property is required for state classes.