The paywall meter prompt is a small overlay element that slides in from the left to tell readers how many free articles they have left to view. It also can direct readers to either subscribe or sign in.
To add a paywall meter prompt to your site, copy the code below and paste it into the footer of your site. The code below serves as a basic starting point, but you can freely modify the HTML and inline styles to match your brand and vision. All ".pigeon-*" class names are required for the prompt to work correctly, but you can rearrange and add to the code as necessary.
<div class="pigeon-widget-prompt" style="display:none; position:fixed; bottom:20px; width:320px; background-color:#fff; box-shadow:0 2px 10px rgba(0, 0, 0, 0.2); overflow:hidden; z-index:999;">
<div style="background:#f8f8f8; border-bottom:1px solid #eee; padding:10px; position:relative;">
<span class="pigeon-close" title="Close" style="position:absolute; top:0; right:10px; height:100%; width:18px;">
<svg style="width:100%; height:100%; cursor:pointer;" fill="#333333" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</span>
<h2 style="font-size:18px; margin:0;">Thanks for visiting!</h2>
</div>
<div style="padding:25px 10px; text-align:center;">
<div class="pigeon-meter-message">You have %%pigeonMeterAvailable%% %%pigeonCopyPage%% left this month.</div>
</div>
<div style="border-top:1px solid #eee; text-align:center; font-size:13px;">
<a class="pigeon-subscribe" href="#" style="display:inline-block; padding:10px;">Subscribe</a>
<a class="pigeon-sign-in" href="#" style="display:inline-block; padding:10px;">Sign In</a>
</div>
</div>