A paywall hides selected content (for example, most of an article) on your website. The paywall prompts the viewer to become a member in order to continue reading. Those who are already signed up as members do not see the paywall and are able to keep reading – view a demo.
Soft and hard Paywalls
A soft paywall allows users to click away and continue reading the article without first having to become a member of your publication. In this way, you can remind your audience that your content is valuable and worth paying for. Many will ignore the prompt, but you will still be able to convince some people.
A hard paywall can't be skipped over. When a publisher uses this paywall, they are making their content available exclusively to paying members.
JavaScript Paywall or WordPress Plugin
There are two different ways to install a paywall with Steady. You can either use our JavaScript Paywall or activate the Paywall with our WordPress Plugin.
⚠️ Please note that we currently do not provide technical support for the WordPress Plugin.
How to install the respective paywalls is explained below. There are differences between these two paywalls – think about which alternative makes more sense for you.
JavaScript | WordPress Plugin |
Can be both soft and hard | Can be both soft and hard |
Works on all CMS | Can only be used on WordPress |
The user can bypass the paywall by turning off JavaScript – even if the website is using the hard paywall* | Loads content behind the paywall only after the user has signed in as a member – so it cannot be bypassed by turning off JavaScript |
Does not change search engine findability and ranking | Makes content behind the paywall invisible to search engines, which can have a negative effect on a page’s search rankings |
* Despite having a hard JavaScript paywall, non-members can still access your content. A handful of people may take advantage of this, but in our experience it's not worth worrying about. Normally, members are motivated by wanting to support a publication rather than accessing exclusive content. As a publisher, you stand to gain more from putting your energy into your work and maintaining a good relationship with your community.
How to set up the right paywall
First, you have to enable and configure the paywall in your Steady backend. Here you can adjust the texts and images that appear in your paywall.
If you use the Steady Checkout, please note that you cannot install the paywall on the same page as the checkout.
Steady Paywall as WordPress plugin
Steady Paywall as JavaScript
You can decide how and where to restrict access to your content in each article by using the Steady Paywall. To do so, simply select the preferred starting point in your article and paste the keyword ___STEADY_PAYWALL___. Steady will then fade out the remaining text and display an editable message.
Alternatively, you activate the paywall by pasting the following invisible HTML element. Go into the HTML editor of your article and paste the following code snippet:
<div id="steady_paywall" style="display: none;"></div>
If you only want to display the Paywall in a certain area of your page, you have to give the CSS class steady-paywall-container to the surrounding container. For example, the structure could look like this:
<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>The Paywall plugin then directs your non-paying followers to your Steady page, where they can purchase a membership plan.
Advanced Paywall Options with Steady Code 2.0 (Beta)
If your project has already been upgraded to version 2.0 of the website integration, there are two advanced options that you can activate in the source code of your website.
Mini-Paywall
This smaller version of the paywall is ideal if you only want to hide individual elements on your page - for example, images, videos, visualizations, or download buttons. It only occupies one line and blurs the content behind it with a blur effect.
If you want to use this variant of the paywall, you must define a container element with the CSS class steady-paywall-container and the HTML attribute data-small. Here's what your code could look like:
<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>
Passing Tracking Parameters
To measure the success of your marketing campaigns or the conversion rate of individual articles, you can pass a UTM Campaign parameter to the paywall. You can then see this parameter in the CSV export or transfer it to other tools via Zapier. To do this, you need to add a data-utm-campaign attribute to the paywall marker. It could look like this, for example:
<div id="steady_paywall" data-utm-campaign="staging-paywall-campaign" style="display: none;"></div>
Steady Paywall and compatibility
Please note that the paywall may not work on "Accelerated Mobile Pages" or in combination with Infinite Scrolling. More information about the compatibility of Steady integrations can be found here.
Do you have a question and did not find an answer in our help area? Then feel free to contact us at support@steadyhq.com.