HTML Buttons

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.

Login button

Opens the login modal when the user is not authenticated.
And opens the User dashboard when the user is authenticated.

<button class="pelcro-login-button">Login</button>

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-login-text and data-dashboard-text, See the next example.

<button class="pelcro-login-button" data-login-text="Sign in" data-dashboard-text="My Dashboard">Login</button>

Dashboard button

Opens the dashboard only when the user is authenticated.

<button class="pelcro-dashboard-button">Dashboard</button>

Register button

Opens the register modal.

<button class="pelcro-register-button">Register</button>

Subscribe button

Opens the plan selection modal for the user to select the product & plan.

<button class="pelcro-subscribe-button">Subscribe</button>

Subscribe to offline plan

You specify an offline plan that your users can subscribe to.

<button class="pelcro-offline-subscribe-button"

data-product-id="853"

data-plan-id="44372"

>

Subscribe

</button>

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.

<button class="pelcro-subscribe-button" data-product-id="123">

Subscribe to product 123

</button>

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.

<button

class="pelcro-subscribe-button"

data-product-id="123"

data-plan-id="1234"

>

Subscribe to plan 1234

</button>

Gifting flow

You can direct the user to gift a subscription by adding the data-is-gift="true" to the subscribe button.

<button class="pelcro-gift-button" data-is-gift="true">

Gift a subscription

</button>

update selected newsletters button

Opens the update newsletters modal.

<button class="pelcro-update-newsletters-button">Update selected newsletters</button>

E-commerce

Show your ecommerce products

To list all your ecommerce products in a static page, add an HTML container with the pelcro-shop id.

<div id="“pelcro-shop”"></div>

Open the user's cart

<button class="pelcro-cart-button">Cart</button>

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.

<button class="pelcro-add-to-cart-button" data-sku-id="123">Add to cart</button>

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.

<button class="pelcro-purchase-button" data-sku-id="123">

Purchase product 123

</button>

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].

<button

class="pelcro-save-button"

data-key="articles"

data-link="https://www.news.com/test-atricle"

data-title="Which states have the highest of lowest teaching salaries?"

data-image="https://via.placeholder.com/500"

data-author="Kate Baker"

data-date="May 2"

data-duration="4 min read"

>

Save article

</button>

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 pelcro-is-active class.
Clicking the button again would set the pelcro-is-loading class then remove pelcro-is-active when the item is removed from the metadata.

caution

title property is required for state classes.