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.
Opens the login modal when the user is not authenticated.
And opens the User dashboard when the user is authenticated.
Opens the register modal.
Opens the plan selection modal for the user to select the product & plan.
#Preselect a specific product
You can specify a certain product to be selected by using the data attributes by passing that product id as a data attribute.
#Directly checkout a specific plan
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.
#Show your ecommerce products
To list all your ecommerce products in a static page, add an HTML container with the
#Open the user's cart
#Add an ecommerce product to the user's cart
You can add a specific ecommerce product to the user's shopping cart by setting the product's
sku-id data attribute.
#Immediately purchase an ecommerce product
You can directly move the user to the checkout flow of a specific ecommerce product using the purchase button class.
#Save & Follow
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].
#Saving state for the button
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.