This site is based on the November 8, 2023 version of the Web Monetization Doc.

Hi, I’m Auden

and here’s my Web Monetization story

BEGIN

I run a blog about my adventures with Chicken — my dog!

Illustration of Auden's blog

I love photographing and writing about my endeavours and funny mishaps with Chicken. It’s my passion, but it’s also a lot of time and effort, and I am always looking for ways to better support myself financially.

Illustration of a polaroid photo of Auden and Chicken

Recently, I came across something called Web Monetization. It’s a new way for online creators to monetize their sites and for website visitors to support creators. It seeks to promote a more flexible, inclusive and privacy-respecting website monetization model.

I thought it would be cool to experiment with Web Monetization, which makes it possible for readers to send me micropayments as they spend time on my blog.

Illustration of a Auden's blog

All I had to do to enable Web Monetization on my site was add the monetization link tag with my payment pointer inside.

Try it for yourself :) Drag the <link> tag below into the <head> tag in the html on the right.

<link rel="monetization" href="MY_PAYMENT_POINTER">
<html lang="en">
    <head>
        
</head> <body> <script> </script> </body> </html>

Now that I've included this single line of code, visitors of my website who use a Web Monetization Provider stream money to me. This <link> tag is all you need to have a Web Monetized site!

From here, I added a little Web Monetization feature to my site that I’d like to show you...

<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <script>
        </script>
    </body>
</html>
Illustration of a blog reader sending money to Auden. Auden says 'thanks!'
        

The rest of the tutorial will show you how I used some more Web Monetization API features to add a "thank you" note to my site. This "thank you" note is shown to my visitors who support me through Web Monetization!

Let's get started on the second part of the tutorial!

<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <script>
        </script>
    </body>
</html>
Illustration of a blog reader sending money to Auden. Auden says 'thanks!'
        

I know if a visitor is using Web Monetization if the window.MonetizationEvent object exists.

Let’s add an empty check in the <script> tag to detect the object!

if (window.MonetizationEvent) {

}
<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <script>
            
</script> </body> </html>

I can use this check to customize the website experience if a visitor is using Web Monetization.

In the next steps, we'll add some simple code inside the
if (window.MonetizationEvent) {} check.

<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <script>
            if (window.MonetizationEvent) {

            }
        </script>
    </body>
</html>
        

If the window.MonetizationEvent object exists, I can check if a user has sent money by listening for the 'monetization' event on the link element.

Let’s listen to the event in our script!

const link = document.querySelector('link[rel="monetization"]')
link.addEventListener('monetization', event => {

});
<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <script>
            if (window.MonetizationEvent) {
                
} </script> </body> </html>

I’m so grateful to my website visitors because their support allows me to do what I love — exploring the world with Chicken and sharing my experiences on my blog. Being able to express to them that I am thankful for their support is really important to me.


Let’s look at a simple way I can show my appreciation to those supporting me via Web Monetization.

<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <script>
            if (window.MonetizationEvent) {
                const link = document.querySelector('link[rel="monetization"]');
                link.addEventListener('monetization', event => {

                });
            }
        </script>
    </body>
</html>
        

I’d like to show a "thank you" note as a token of my appreciation to those sending payment to me.

First, let's add a <div> with our note of appreciation and have it hidden by default.

<div id="thank-you-note" style="display: none;">
    Thank you for supporting me via Web Monetization <3
</div>
<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        
<script> if (window.MonetizationEvent) { const link = document.querySelector('link[rel="monetization"]'); link.addEventListener('monetization', event => { }); } </script> </body> </html>

If a visitor has sent payment, we want to let them know it's appreciated!

Let’s show the <div> containing the note in the monetization event handler.

document.getElementById('thank-you-note').style.display = 'block';
<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <div id="thank-you-note" style="display: none;">
            Thank you for supporting me via Web Monetization <3
        </div>
        <script>
            if (window.MonetizationEvent) {
                const link = document.querySelector('link[rel="monetization"]');
                link.addEventListener('monetization', event => {
                    
}); } </script> </body> </html>

That’s how I got started with Web Monetization!

Since adding it to my blog and letting my visitors know, those who’ve opted in now support me with micropayments as they read about my adventures with Chicken.

<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <div id="thank-you-note" style="display: none;">
            Thank you for supporting me via Web Monetization <3
        </div>
        <script>
            if (window.MonetizationEvent) {
                const link = document.querySelector('link[rel="monetization"]');
                link.addEventListener('monetization', event => {
                    document.getElementById('thank-you-note').style.display = 'block';
                });
            }
        </script>
    </body>
</html>
Illustration of Auden's blog with a thank you message

To get a payment pointer, sign up for a Web Monetization Wallet listed here.

If you’re looking to do something further with your Web Monetization code (like Multiple Monetization Links) check out the documentation here.

Don't forget to hang out with other creators in the Interledger Community and chat with community on Slack!

<html lang="en">
    <head>
        <link rel="monetization" href="MY_PAYMENT_POINTER">
    </head>
    <body>
        <div id="thank-you-note" style="display: none;">
            Thank you for supporting me via Web Monetization <3
        </div>
        <script>
            if (window.MonetizationEvent) {
                const link = document.querySelector('link[rel="monetization"]');
                link.addEventListener('monetization', event => {
                    document.getElementById('thank-you-note').style.display = 'block';
                });
            }                   
        </script>
    </body>
</html>
        
Successful copy icon

Thanks for reading about my Web Monetization Story!

Hope to see you join the community :)

It'd be really great to hear what you think of A Web Monetization Story.



Gotta go for now...my Chicken is on the loose!

Visit this website in full-screen mode on a computer to try out an interactive Web Monetization tutorial for online creators.

Or, check out the following links for more information about Web Monetization and this project: