Hi, I’m Auden
and here’s my Web Monetization story
BEGIN
and here’s my Web Monetization story
I run a blog about my adventures with Chicken — my dog!
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.
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.
All I had to do to enable Web Monetization on my site was add the
monetization meta tag
with my payment pointer inside.
Try it for yourself :) Drag the <meta> tag below into the
<head> tag in the html on the right.
<meta name="monetization" content="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
(such as Coil)
stream money to me. This meta 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> <meta name="monetization" content="MY_PAYMENT_POINTER"> </head> <body> <script> </script> </body> </html>
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> <meta name="monetization" content="MY_PAYMENT_POINTER"> </head> <body> <script> </script> </body> </html>
I know if a visitor is using Web Monetization if the
document.monetization object exists.
Let’s add an empty check in the <script> tag to detect the object!
if (document.monetization) {
}
<html lang="en"> <head> <meta name="monetization" content="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 (document.monetization) {} check.
<html lang="en"> <head> <meta name="monetization" content="MY_PAYMENT_POINTER"> </head> <body> <script> if (document.monetization) { } </script> </body> </html>
If the document.monetization object exists, I can check if a
user has sent money by listening for the 'monetizationprogress' event.
Let’s listen to the event in our script!
document.monetization.addEventListener('monetizationprogress', event => {
});
<html lang="en"> <head> <meta name="monetization" content="MY_PAYMENT_POINTER"> </head> <body> <script> if (document.monetization) { } </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> <meta name="monetization" content="MY_PAYMENT_POINTER"> </head> <body> <script> if (document.monetization) { document.monetization.addEventListener('monetizationprogress', 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> <meta name="monetization" content="MY_PAYMENT_POINTER"> </head> <body> <script> if (document.monetization) { document.monetization.addEventListener('monetizationprogress', 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 monetizationprogress event handler.
document.getElementById('thank-you-note').style.display = 'block';
<html lang="en"> <head> <meta name="monetization" content="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 (document.monetization) { document.monetization.addEventListener('monetizationprogress', 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> <meta name="monetization" content="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 (document.monetization) { document.monetization.addEventListener('monetizationprogress', event => { document.getElementById('thank-you-note').style.display = 'block'; }); } </script> </body> </html>
To get a payment pointer, sign up for a
wallet provider listed here.
If you’re looking to do something further with your Web Monetization code, check out the documentation here.
It’s also great to chat with other creators using Web Monetization
and engage in the community around it.
If you run a blog on WordPress, check this out
to enable Web Monetization on your blog!
<html lang="en"> <head> <meta name="monetization" content="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 (document.monetization) { document.monetization.addEventListener('monetizationprogress', event => { document.getElementById('thank-you-note').style.display = 'block'; }); } </script> </body> </html>
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!
Or, check out the following links for more information about Web Monetization and this project:
