Shows as a popup in the lower right if the user is not subsctibed to the site.

Loading...

info

The title and paywall limit of this modal is configured on every product on the platform.

info

The number of articles left is based on the number of the configured paywall limit - number of unique articles read.
We get the number of articles left for the user using the window.Pelcro.paywall.freeVisitsLeft() SDK method.

Usage

import React from "react";

import {

MeterModal,

PelcroModalController,

usePelcro,

} from "@pelcro/react-pelcro-js";

import "@pelcro/react-pelcro-js/dist/pelcro.css";

export const MeterExample = () => {

const { switchView } = usePelcro();

return (

<>

<button onClick={() => switchView("meter")}>Click to open meter</button>

<PelcroModalController>

<MeterModal />

</PelcroModalController>

</>

);

};

Reference

Props

onDisplay

() ⇒ void

Callback function called when the modal is first displayed.

onClose

() ⇒ void

Callback function called when the modal is closed.