An interactive Web Monetization tutorial for online creators.
This project was originally created during the MLH "Hack The Runway" Hackathon (July 15th-17th, 2022).
Try it out here: https://shivamagarwal-code.github.io/web-monetization/
Demo video:
Drag and Drop Javascript Library: https://github.com/bevacqua/dragula
A Web Monetization Project is a website that seeks to help creators understand how simple it is to enable Web Monetization on their own sites. The story of Shivam and Bob aims to engage users and help them relate to — and understand the purpose of — Web Monetization. It includes a simple drag-and-drop tutorial to show the basic steps needed to get Web Monetization running on a site. We want to make the tutorial easy and fun, and ensure it is easily understood by those who are less technical.
A Web Monetization starts off with an introduction to Shivam, an androgynous creator who recently came across Web Monetization and integrated it into their blog. As a digital creator, Shivam is always looking for new ways to support themself financially. At the same time, he wants to make sure that readers have a good experience on the site, so integrating ads into Shivam's site didn't sit well with them. Web Monetization was especially appealing to him, not only because it provides a new stream of revenue, but also because the community surrounding the concept strongly values openness, fairness and inclusivity.
Following their personal introduction, Shivam provides step-by-step instructions on how to integrate Web Monetization onto a site. For each step, a puzzle piece containing simple code can be dragged and dropped by a user into the sample website html provided. Shivam provides personal anecdotes about their process in enabling Web Monetization on their site, as well as context and reasoning for simple code that is added. The tutorial starts off with the basics needed to enable Web Monetization (adding the monetization meta tag) and progresses into a further example on how to customize a visitor’s experience on the site using the Web Monetization JavaScript API (showing a “thank you” note to visitors supporting the site via Web Monetization).
The main Web Monetization concepts introduced in the tutorial include:
- monetization
<meta>tag, - Payment Pointer,
- Web Monetization Provider,
- Web Monetization Wallet,
document.monetizationobject,‘monetizationprogress’event and event listener,- showing/hiding content based on whether a visitor is streaming payment to the site through Web Monetization.
At the end of the tutorial, Shivam presents a handful of resources that a user can leverage to continue on with Web Monetization and join the Web Monetization community. Users can also download or copy the sample code and view the sample code on Github.
Finally, Shivam closes out the story with a thank you page and a user can choose to start the story again.
Overall, our project provides an interactive story and tutorial that introduces creators to Web Monetization — guiding them through how easy it is to start monetizing a website using Web Monetization.
- Getting started with Web Monetization
- Web Monetization JavaScript API
- Web Monetization Wallets/Payment Pointers
- Simple Web Monetization Example Code
- Grant for the Web
- Grant for the Web Community Forum