{"id":13715031,"url":"https://esse-dev.github.io/a-web-monetization-story/","last_synced_at":"2025-05-07T03:31:10.608Z","repository":{"id":49140302,"uuid":"288322476","full_name":"esse-dev/a-web-monetization-story","owner":"esse-dev","description":"An interactive, story-based Web Monetization tutorial for online creators.","archived":false,"fork":false,"pushed_at":"2025-03-01T22:04:43.000Z","size":679,"stargazers_count":11,"open_issues_count":12,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-11T22:34:16.622Z","etag":null,"topics":["hackathon","monetization","web-monetization","webmonetization"],"latest_commit_sha":null,"homepage":"https://esse-dev.github.io/a-web-monetization-story/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/esse-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-18T01:13:04.000Z","updated_at":"2025-03-01T22:04:41.000Z","dependencies_parsed_at":"2024-01-03T07:04:51.460Z","dependency_job_id":"09ae57a9-a2a3-454f-a7f7-142d54d85249","html_url":"https://github.com/esse-dev/a-web-monetization-story","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esse-dev%2Fa-web-monetization-story","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esse-dev%2Fa-web-monetization-story/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esse-dev%2Fa-web-monetization-story/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/esse-dev%2Fa-web-monetization-story/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/esse-dev","download_url":"https://codeload.github.com/esse-dev/a-web-monetization-story/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806420,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hackathon","monetization","web-monetization","webmonetization"],"created_at":"2024-08-03T00:00:53.186Z","updated_at":"2025-05-07T03:31:10.600Z","avatar_url":"https://github.com/esse-dev.png","language":"HTML","funding_links":[],"categories":["Resources"],"sub_categories":["Tutorials"],"readme":"![Polaroid of Auden and Chicken](assets/preview_1280x640.png)\n\n# [**A Web Monetization Story**](https://esse-dev.github.io/a-web-monetization-story/)\n\n[![Software License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n[![Assets License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)\n\nAn interactive [Web Monetization](https://webmonetization.org/) tutorial for online creators.\n\n_This project was originally created during the [Betahack \"Fix the Internet\" Hackathon](https://betahack.devpost.com/) (August 17th-30th, 2020) and has since become a subproject within [The Akita Project](https://esse-dev.github.io/akita-project-site)._\n\n**Try it out here:** https://esse-dev.github.io/a-web-monetization-story/\n\n**Demo video:** https://youtu.be/EqZIcUXLZgs\n\n**Devpost submission:** https://devpost.com/software/borzoi\n\n**Drag and Drop Javascript Library:** https://github.com/bevacqua/dragula\n\n---\n\n[**A Web Monetization Story**](https://esse-dev.github.io/a-web-monetization-story/) is a website that \nseeks to help creators understand how simple it is to enable [Web Monetization](https://webmonetization.org/) \non their own sites. The story of Auden and Chicken aims to engage users and help them relate to — and \nunderstand the purpose of — Web Monetization. It includes a simple drag-and-drop tutorial to show the basic \nsteps needed to get Web Monetization running on a site. We want to make the tutorial easy and fun, and ensure \nit is easily understood by those who are less technical.\n\nA Web Monetization Story starts off with an introduction to Auden, an androgynous creator who recently \ncame across Web Monetization and integrated it into their blog. As a digital creator, Auden is always \nlooking for new ways to support themself financially. At the same time, Auden wants to make sure that \nreaders have a good experience on the site, so integrating ads into Auden's site didn't sit well with \nthem. Web Monetization was especially appealing to Auden, not only because it provides a new stream of \nrevenue, but also because the community surrounding the concept strongly values openness, fairness and \ninclusivity.\n\nFollowing their personal introduction, Auden provides step-by-step instructions on how to integrate Web \nMonetization onto a site. For each step, a puzzle piece containing simple code can be dragged and dropped \nby a user into the sample website html provided. Auden provides personal anecdotes about their process in \nenabling Web Monetization on their site, as well as context and reasoning for simple code that is added. \nThe tutorial starts off with the basics needed to enable Web Monetization (adding the monetization meta \ntag) and progresses into a further example on how to customize a visitor’s experience on the site using \nthe [Web Monetization JavaScript API](https://webmonetization.org/docs/references/html-link-rel-monetization/) (showing a “thank you” note \nto visitors supporting the site via Web Monetization).\n\nThe main Web Monetization concepts introduced in the tutorial include: \n- [monetization `\u003clink\u003e` tag](https://webmonetization.org/docs/references/html-link-rel-monetization/), \n- [Payment Pointer](https://paymentpointers.org/), \n- [Web Monetization Provider](https://webmonetization.org/docs/sending), \n- [Web Monetization Wallet](https://webmonetization.org/docs/ilp-wallets), \n- [`window.MonetizationEvent` object](https://webmonetization.org/docs/references/monetizationevent/), \n- [`monetization` event and event listener](https://webmonetization.org/docs/references/attributes/amountsent/), \n- showing/hiding content based on whether a visitor is streaming payment to the site through Web Monetization.\n\nAt the end of the tutorial, Auden presents a handful of resources that a user can leverage to continue on \nwith Web Monetization and join the Web Monetization community. Users can also download or copy the sample \ncode and view the sample code on Github.\n\nFinally, Auden closes out the story with a thank you page and a user can choose to start the story again.\n\nOverall, our project provides an interactive story and tutorial that introduces creators to Web Monetization \n— guiding them through how easy it is to start monetizing a website using Web Monetization.\n\n---\n\n## Resources\n\n- [Getting started with Web Monetization](https://webmonetization.org/docs/getting-started)\n- [Web Monetization JavaScript API](https://webmonetization.org/docs/api)\n- [Web Monetization Wallets/Payment Pointers](https://webmonetization.org/docs/ilp-wallets#payment-pointers)\n- [Simple Web Monetization Example Code](https://github.com/esse-dev/web-monetization-base/blob/master/simple.html)\n- [Grant for the Web](https://grantfortheweb.org/)\n- [Grant for the Web Community Forum](https://forum.grantfortheweb.org/)\n\n---\n\n## Connect with Us\n- DEV\n  - [esse-dev](https://dev.to/esse-dev)\n  - [Elliot](https://dev.to/elliot)\n  - [Sharon](https://dev.to/sharon)\n- Twitter\n  - [Elliot](https://twitter.com/elliotokay)\n  - [Sharon](https://twitter.com/_sharonwang)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/esse-dev.github.io%2Fa-web-monetization-story%2F","html_url":"https://awesome.ecosyste.ms/projects/esse-dev.github.io%2Fa-web-monetization-story%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/esse-dev.github.io%2Fa-web-monetization-story%2F/lists"}