---
title: "How to use the Steady Paywall on your own website"
description: "A paywall hides selected content on your website and prompts visitors to become members to keep reading"
url: https://help.steady.page/en/articles/6265620-how-to-use-the-steady-paywall-on-your-own-website
collection: "Website integration"
updated: 2026-10-12
language: en
alternates: [de, fr, it]
---

# How to use the Steady Paywall on your own website

A paywall hides selected content on your website and prompts visitors to become members to keep reading

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:

1.  Set up how it looks and whether it's soft or hard in your [Paywall settings](https://steady.page/backend/publications/default/integrations/paywall/edit).
    
2.  [Integrate Steady into your website](https://help.steadyhq.com/en/articles/6265610-how-to-integrate-steady-on-your-website) — via a JavaScript snippet or the WordPress plugin.
    
3.  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](https://help.steadyhq.com/en/articles/6265595-how-to-integrate-a-paywall-in-your-posts-on-steady).

# Content & design

First, set your paywall's appearance and copy in your [Paywall settings](https://steady.page/backend/publications/default/integrations/paywall/edit) — 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/](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](https://help.steadyhq.com/en/articles/6265610-how-to-integrate-steady-on-your-website). There are two options — a JavaScript snippet or the WordPress plugin — and they behave differently. Here's how they compare:

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="padding: 8px;"><p class="no-margin"><strong>JavaScript</strong></p></td><td colspan="1" rowspan="1" style="padding: 8px; border-left-width: 1px; border-left-style: solid; border-left-color: #c6c9c0;"><p class="no-margin"><strong>WordPress Plugin</strong></p></td></tr><tr><td colspan="1" rowspan="1" style="padding: 8px; border-top-width: 1px; border-top-style: solid; border-top-color: #c6c9c0;"><p class="no-margin">Works on all CMS</p></td><td colspan="1" rowspan="1" style="padding: 8px; border-left-width: 1px; border-left-style: solid; border-left-color: #c6c9c0; border-top-width: 1px; border-top-style: solid; border-top-color: #c6c9c0;"><p class="no-margin">WordPress only</p></td></tr><tr><td colspan="1" rowspan="1" style="padding: 8px; border-top-width: 1px; border-top-style: solid; border-top-color: #c6c9c0;"><p class="no-margin">Can be bypassed by turning off JavaScript — even on hard paywall setting</p></td><td colspan="1" rowspan="1" style="padding: 8px; border-left-width: 1px; border-left-style: solid; border-left-color: #c6c9c0; border-top-width: 1px; border-top-style: solid; border-top-color: #c6c9c0;"><p class="no-margin">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</p></td></tr><tr><td colspan="1" rowspan="1" style="padding: 8px; border-top-width: 1px; border-top-style: solid; border-top-color: #c6c9c0;"><p class="no-margin">Does not affect search engine visibility</p></td><td colspan="1" rowspan="1" style="padding: 8px; border-left-width: 1px; border-left-style: solid; border-left-color: #c6c9c0; border-top-width: 1px; border-top-style: solid; border-top-color: #c6c9c0;"><p class="no-margin">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</p></td></tr></tbody></table>

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](https://help.steadyhq.com/en/articles/6265603-steady-checkout-offer-memberships-directly-on-your-website), 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

Demo: https://demo.steadyhq.com/paywall-2-0/

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.

![](https://staticfiles.gleap.io/helpcenter/6aaa6158a5f91e2089745e08/20260916100820_4284.png)

Alternatively, add this invisible HTML element in your post's HTML editor:

```javascript
<div id="steady_paywall" style="display: none;"></div>
```

## Option 2: Hide only part of the page

Demo: https://demo.steadyhq.com/paywall-2-0-between-text/

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:

```javascript
<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

Demo: 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.

![](https://staticfiles.gleap.io/helpcenter/6aaa6158a5f91e2089745e08/20260916100820_4295.png)

To use it, define a container with the CSS class `steady-paywall-container` and the HTML attribute `data-small="true"`:

```javascript
<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](https://help.steadyhq.com/articles/6265607):

```javascript
<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](https://help.steadyhq.com/articles/6265609) for more detail.

# Still need help?

Email us at [support@steadyhq.com](mailto:support@steadyhq.com) and we'll be glad to help.

**Related articles**

-   [How to integrate Steady on your website](https://help.steadyhq.com/en/articles/6265610-how-to-integrate-steady-on-your-website)
    
-   [How to integrate a paywall in your posts on Steady](https://help.steadyhq.com/en/articles/6265595-how-to-integrate-a-paywall-in-your-posts-on-steady)
