Content & Design
First, configure your paywall appearance and copy in your Paywall settings. You can also choose whether it's soft or hard there.
➡️ Check out the demo of the different paywall versions (as well as all other layers) on our demo page: https://demo.steadyhq.com/
Soft and hard paywalls
A soft paywall allows visitors to dismiss it and keep reading without becoming a member. It's a nudge or a reminder that your content has value. Many will dismiss it, but some will convert over time.
A hard paywall can't be skipped. Visitors must become a member to continue reading. There is no x on the top right corner to close the paywall. Use this for content you want to reserve exclusively for paying members. More than 75 percent of media makers on Steady use the hard paywall.
How to use the paywall on your own site
The remainder of this article covers adding the paywall to your own website. If you want to add a paywall to posts you publish on your Steady page, see How to integrate a paywall in your posts on Steady.
In order to use the paywall on your own site, you first need to integrate Steady into your website. There are two options, via JavaScript snippet or WordPress Plugin.
Here's how the two options compare on the paywall specifically.
JavaScript | WordPress Plugin |
Works on all CMS | WordPress only |
Can be bypassed by turning off JavaScript — even on hard paywall setting | Content only loads after the user is authenticated as a member — cannot be bypassed by turning off JavaScript |
Does not affect search engine visibility | Content behind the paywall is invisible to search engines, which may affect search rankings |
Despite the JavaScript paywall's bypass risk, in practice it's not worth worrying about. Most members support publications because they want to, not just to access exclusive content.
Please note: If you use Steady Checkout, note that you cannot add the paywall to the same page as the checkout.
How much content to hide behind the paywall
Add the paywall to each post where you want it to appear. The paywall on external sites is binary: active paying members see the content, everyone else sees the paywall. On Steady posts, you can choose which specific plan should have access to the paywall on a per-post level.
In general, our recommendation is to place the paywall as early as possible to increase the likelihood that users will see it. If you place it low on the page, most readers will never scroll that far.
Option 1: Hide rest of page behind paywall
➡️ Check out the demo here: https://demo.steadyhq.com/paywall-2-0/
To place the paywall, add the keyword ___STEADY_PAYWALL___ as a new paragraph at the point where you want content to be gated. Steady will fade out everything below it and display your paywall.
Alternatively, add this invisible HTML element in your post's HTML editor:
<div id="steady_paywall" style="display: none;"></div>
Option 2: Hide only a portion of the page behind the paywall
➡️ Check out the demo here: https://demo.steadyhq.com/paywall-2-0-between-text/
If you only want the paywall to cover a specific area of your page (not the full page), give the surrounding container the CSS class steady-paywall-container. For example:
<body>
<div id="sidebar">
This content is visible
</div>
<div id="main">
<div class="entry-content steady-paywall-container">
This content is visible
<div id="steady_paywall" style="display: none;"></div>
This content is behind the paywall
</div>
<div class="entry-footer">
This content is visible
</div>
</div>
</body>
Option 3: Hide only individual elements behind the paywall
➡️ Check out the demo here: https://demo.steadyhq.com/paywall-2-0-small/
The mini-paywall is a compact version ideal for hiding individual elements — images, videos, download buttons, and so on. It takes up only one line and blurs the content behind it.
To use it, define a container with the CSS class steady-paywall-container and the HTML attribute data-small="true":
<p>This content is visible.</p> <div class="steady-paywall-container" data-small="true"> <div id="steady_paywall" style="display: none;"></div> <p>This content is hidden behind the small paywall.</p> </div> <p>This content is visible again after the paywall.</p>
Advanced options
Passing tracking parameters
To track conversions by article or campaign, add a data-utm-campaign attribute to the paywall marker. The value appears in your CSV export and can be passed to other tools via Zapier:
<div id="steady_paywall" data-utm-campaign="your-campaign-name" style="display: none;"></div>
Compatibility
The paywall may not work on Accelerated Mobile Pages (AMP) or in combination with Infinite Scrolling. See compatibility of Steady integrations for more detail.