Provide exclusive content

Give your paying visitors access to exclusive content when the monetization event fires. Since the monetization event only fires when an outgoing payment request is successfully created, your exclusive content only appears to web monetized visitors.

Example 1 - Simple

The example below illustrates a simple way to show exclusive content to web monetized visitors.

<head>
  <!-- this should be set to your own wallet address -->
  <link rel="monetization" href="https://wallet.example.com/alice" />

  <style>
    .hidden {
      display: none;
    }
  </style>

  <script>
    const link = document.querySelector('link[rel="monetization"]')
    if (link.relList.supports('monetization')) {
      link.addEventListener('monetization', (ev) => {
        document.getElementById('exclusive').classList.remove('hidden')
      })
    }
  </script>
</head>

<body>
  <p>Content will appear below here if you are Web monetized.</p>
  <hr />
  <div id="exclusive" class="hidden">Here's some exclusive content!</div>
</body>

How it works

First, we want to check whether Web Monetization is supported. We do this by calling supports() on a link element’s relList and passing "monetization" as a parameter. If this check doesn’t exist, we can’t listen for the monetization event to tell us when Web Monetization initializes.

const link = document.querySelector('link[rel="monetization"]')
if (link.relList.supports('monetization')) {

Next, we add an event listener to the link element. The monetization event is emitted when Web Monetization initializes.

link.addEventListener('monetization', (ev) => {

Finally, we select the exclusive content element we want to make available to web monetized visitors. Since we defined a CSS class to hide the content, removing the class will make the content appear.

document.getElementById('exclusive').classList.remove('hidden')

Interactive example

This example simulates hiding and showing exclusive content based on a visitor’s Web Monetization state.

The example doesn’t require you to have Web Monetization enabled in your browser and no real payments are occurring.

Click View as Web Monetized/non-Web Monetized visitor to toggle your monetization state. If source files appear instead of the example, click View App in the bottom-right corner.

Example 2 - Complex

In reality, you’ll probably want your site to do more than simply show and hide content. In this example, we illustrate how to:

Show web monetized visitors an indicator while they wait for Web Monetization to initialize
Tell non-web monetized visitors that there’s exclusive content they’re missing out on

The example below covers three states for showing:

A call-to-action to non-web monetized visitors
A loading message to web monetized visitors
Exclusive content to web monetized visitors

<head>
  <!-- this should be set to your own wallet address -->
  <link rel="monetization" href="https://wallet.example/alice" />

  <style>
    .hidden {
      display: none;
    }
  </style>

  <script>
    function showExclusiveContent() {
      document.getElementById('loading').classList.add('hidden')
      document.getElementById('cta').classList.add('hidden')
      document.getElementById('exclusive').classList.remove('hidden')
    }

    function showCTA() {
      document.getElementById('loading').classList.add('hidden')
      document.getElementById('cta').classList.remove('hidden')
    }

    function showLoading() {
      document.getElementById('loading').classList.remove('hidden')
    }

    if (window.MonetizationEvent) {
      const link = document.querySelector('link[rel="monetization"]')
      link.addEventListener('monetization', (ev) => {
        showExclusiveContent()
      })
    }

    window.addEventListener('load', () => {
      if (!window.MonetizationEvent) {
        showCTA()
      } else {
        showLoading()
      }
    })
  </script>
</head>

<body>
  <div id="loading" class="hidden">Loading exclusive content...</div>
  <div id="exclusive" class="hidden">Here's some exclusive content!</div>
  <div id="cta" class="hidden">
    Please install a Web Monetization extension to support me!
  </div>
</body>

How it works

There are three functions to activate the three states:

showLoading displays the loader
showCTA displays the call-to-action to non-web monetized users
showExclusiveContent displays the exclusive content to web monetized users

These functions work just like the simple example where we turn the hidden class on/off for our divs.

When the page loads, we’ll check whether the visitor is web monetized.

window.addEventListener('load', () => {
  if (!window.MonetizationEvent) {

The loader will appear to web monetized visitors and the CTA will appear to everyone else.

if (!window.MonetizationEvent) {
  showCTA()
} else {
  showLoading()
}

If the visitor is web monetized, we’ll listen for the monetization event that occurs when an outgoing payment request is successfully created. When this event fires, the exclusive content will appear and the other divs will be hidden.

if (window.MonetizationEvent) {
  const link = document.querySelector('link[rel="monetization"]')
  link.addEventListener('monetization', (ev) => {
    showExclusiveContent()

Interactive example

This example simulates hiding and showing exclusive content based on a visitor’s Web Monetization state. Web monetized visitors will see exclusive content while non-web monetized users will not. Conversely, non-web monetized users will see the message, “Please install a Web Monetization extension to support me!”.

The example doesn’t require you to have Web Monetization enabled in your browser and no real payments are occurring.

Click View as Web Monetized/non-Web Monetized visitor to toggle your monetization state. If source files appear instead of the example, click View App in the bottom-right corner.