Entitlement based content

You can visually blur parts of your content based on whether or not the user is subscribed to a plan that provides them with a specific entitlement, blurring also disables any interactions with the content, and notifies the user that they need to subscribe in order to see the blurred content, if they do subscribe, the blurring will be removed without having to refresh the page.

You can blur any HTML element(s) (text, images, videos, etc..) in your page by adding the data-pelcro-entitlements attribute to it. the value of the attribute is a case-sensitive comma-separated list of the required entitlements to see the content, if the user is entitled to at least one of them, they'll be able to see the content, otherwise the content will be blurred.

<div data-pelcro-entitlements="vip,gold,silver">

<h1>Lorem ipsum</h1>

<div>

<h2>consectetur adipiscing</h2>

<img src="/myImage.png" alt="article image" />

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

<button>submit</button>

</div>

</div>

Note that in the previous example, all HTML elements under the <div> element are blurred, you don't have to add the data-pelcro-entitlements attribute to every single HTML element you want to blur, you can simply wrap them in a <div> (or any container element) and add the attribute to it instead.

All page elements that use the data-pelcro-entitlements attribute must have the exact same attribute value, having different entitlements on different elements that are in the same page, or having empty attribute values, would disable the blurring.

When content is blurred, a message would show up in the bottom right corner telling the user that they have to subscribe in order to see the blurred content, if you click on the subscribe link in the message, you'll be taken to the subscription flow, but, only the plans that give the user at least one of the required entitlements are listed, so if a plan doesn't give a user any of the required entitlements, it's not shown in the product and plan selection modal.

You can also add data-product-id and data-plan-id attributes with the desired values to HTML elements that have the data-pelcro-entitlements attribute to pre-select a specific plan in the product and plan selection modal, so when the user clicks the subscribe link in the notification, they'll see that the plan is pre-selected.

caution

This feature only works on HTML that is part of the when it's loaded, it doesn't work with HTML that is dynamically injected after the page is loaded.