This package implements the Fair Pass web component to create an ecosystem of compensated content.
You can add it to your site either by adding the script tag directly:
<!-- in head -->
<script src="https://www.fairpass.co/dist/fair-pass.js" defer></script>
<!-- or via cdn -->
<script src="https://unpkg.com/@loremlabs/fairpass-component@latest/dist/fair-pass.js" defer></script>
<!-- then somewhere in body -->
<fair-pass></fair-pass>
or via your favorite package manager:
% npm install @loremlabs/fairpass-component
This will make the web component available to your web application. It can be added to the layout component or any part of the body of your page:
<fair-pass></fair-pass>
The <fair-pass>
web component can be customized, although the default component is likely good for most use cases.
<fair-pass
id="fairpass"
scope="global"
state="closed"
pass=""
acceptable="pass/fairpass, webmon/*, free/fairpass"
threshold="0.1"
mode="lax"
simulate="false"
disabled="false"
hurrah="true" // "true" "false" "watermark" "splash"
/>
Various events are available to further customize the page based on the user's state:
<script>
// advanced usage, optional
window.addEventListener("fairpass:change", function (e) {
// variant could be:
// - closed-pass
// - closed-nopass-lax
// - closed-nopass-strict
// - open-pass
// - open-free
const { state, isFree, mode, variant } = e.detail;
console.group("fairpass:change");
console.log({ state, isFree, mode, variant });
console.groupEnd();
if (variant.startsWith("closed-nopass")) {
// do something because the page is closed
// const paywalls = document.querySelectorAll('.paywall');
// paywalls.forEach((el) => {
// el.style.display = 'none';
// console.log('hiding', el);
// });
}
});
window.addEventListener("fairpass:modal:close", function (e) {
// do something when the modal is closed
console.group("fairpass:modal:close");
if (e.detail.type === "cancel") {
console.log("---modal cancelled---", e.detail);
} else {
console.log("---modal closed---", e.detail);
}
console.groupEnd();
});
</script>