A paywall hides selected content on your website — exclusive articles, for example — and prompts visitors to become a member to keep reading. Members who are logged in never see it.
Adding it to your own site takes three steps:
Set up how it looks and whether it's soft or hard in your Paywall settings.
Integrate Steady into your website — via a JavaScript snippet or the WordPress plugin.
Mark where the paywall should start by adding
___STEADY_PAYWALL___to your content.
The rest of this article walks through each step. To add a paywall to posts you publish on your Steady page instead, see How to integrate a paywall in your posts on Steady.
Content & design
First, set your paywall's appearance and copy in your Paywall settings — you can also choose whether it's soft or hard there. These settings apply to the paywall both on your own website and in posts on Steady.
Preview the different paywall versions (and all other layers) on our demo page: https://demo.steadyhq.com/
Soft and hard paywalls
A soft paywall lets visitors dismiss it and keep reading without becoming a member. It's a nudge — 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 have to become a member to continue reading, and there's no close button. Use it for content you want to reserve exclusively for paying members. More than 75 percent of media makers on Steady use the hard paywall.
Add the paywall to your own website
To use the paywall on your own site, first integrate Steady into your website. There are two options — a JavaScript snippet or the WordPress plugin — and they behave differently. Here's how they compare:
JavaScript | WordPress Plugin |
Works on all CMS | WordPress only |
Can be bypassed by turning off JavaScript — even on hard paywall setting | With a hard paywall, the content (apart from a short excerpt) is only delivered after the user is authenticated as a member and cannot be bypassed by turning off JavaScript. With a soft (skippable) paywall, the full content is delivered and only hidden visually |
Does not affect search engine visibility | With a hard paywall, content behind the paywall is largely invisible to search engines, which may affect search rankings. With a soft paywall, content remains visible to search engines |
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.
Note: If you use Steady Checkout, you can't add the paywall to the same page as the checkout.
Choose how much to hide
Add the paywall to each post where you want it to appear. On external sites it's binary: active paying members see the content, everyone else sees the paywall. (On Steady posts, you can choose which specific plan gets access on a per-post level.)
Place the paywall as early as possible so more readers see it — if you put it low on the page, most people won't scroll that far. You have three options for where it kicks in.
Option 1: Hide the rest of the page
Add the keyword ___STEADY_PAYWALL___ as a new paragraph at the point where you want content to be gated. Steady fades out everything below it and displays 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 part of the page
To cover only a specific area of your page (not the whole 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 individual elements
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.
Still need help?
Email us at support@steadyhq.com and we'll be glad to help.
Related articles