Developer Hub

Publisher Monetization Examples for gvm.js

Production-minded strategy templates for paid content, downloads, redirects, and inline premium modules.

Use these examples to launch faster, test conversion safely on real traffic, and adapt paywall UX to your editorial product.

Hide
Client-side article preview and unlock flow Blur
Content covered with a blur layer, layout kept intact Blur-mangle
Blur layer plus shuffled text for extra obfuscation Blur-mangle + sticky bar
Bottom bar pinned to the viewport all the time Hide (Mobile only)
Conditional paywall activation for mobile audiences Download
Per-file monetization with controlled delivery Redirect
Paid access to protected destination pages Inject
On-page premium module insertion after payment

Baseline setup: Every example uses the same body-level gvm bootstrap and highlights only the strategy-specific data-gvm-* attributes.

Paywall Templates · 7 concepts

Seven paywall layouts, one data-gvm API

Seven different `data-gvm-template="paywall"` concepts, all pure HTML + CSS. Every demo runs in `data-gvm-env="demo"`, so you can click through the full payment flow without any real charge.

Pick a layout, open the page, try the unlock. Each demo locks the same premium article copy — five with the blur strategy, the inline card with hide — only the paywall template differs.

inlineInline card
Paywall panel sits in the article flow where the premium part begins overlayCentered overlay
Modal card with dimmed backdrop over the blurred content sticky bottomSticky bottom bar
Full-width bar pinned to the viewport bottom at all times sticky rightSticky side card
Floating card docked to the right edge while scrolling widget + dialogCorner widget
Compact floating widget that expands into a payment dialog top bannerSticky top banner
Slim banner fixed to the top, collapses to a pill after scroll drawerUnlock drawer
Side panel that explains SMS, premium-SMS, and when the charge settles

How it works: every concept page declares a paywall template (injected into body or #article) and a payment template (dialog). The premium part is gated with data-gvm-hide-strategy — blur for the fixed layouts, hide for the inline card. Switching layouts is a pure template/CSS change, no strategy or backend tweaks.

Overlay · gvm-overlay.js

Config-driven paywall demo

Prices and blocking rules come from a static JSON config — the article only marks its content with a single `data-gvm-reference`.

Loading gvm-overlay.js (instead of gvm.js) turns on overlay mode; the config URL is derived from data-gvm-env + data-gvm-tenant. Long-form editorial demo articles with inline SVG image placeholders, editable in-page via ?gvm_admin=1.

The invisible checkout
blur · 2.99 PLN · the phone bill as a wallet The town that read the fine print
hide · 0.75 PLN · a ledger against the archive The last hand-made page
mangle-blur · 4.99 PLN · scissors, wax, deadlines

No-flash pattern: each article wraps its gated body in .gvm-cloak (rule declared in <head>) so the paywalled content stays invisible until the overlay has booted gvm.js.