Write content for steps about a-web-monetization-story

[vezwork]

Step 1

part 1

Get your site monetized by adding a Web Monetization meta tag. Try dragging the meta tag to its place in this example site's code.

• Developer note: hovering over meta tag could make the puzzle piece do a jumping animation.

part 2 - After dragging the piece into place

Perfect! The Web Monetization meta tag goes in the head of your website.
You'll start receiving money as users who have started using Web Monetization spend time on your site.
We’ll go over how to include your own monetization account at the end of the tutorial.

• Developer note: could provide a link on your own monetization account, so interested users can jump to this info.

[sharon-wang]

Code from https://github.com/esse-dev/web-monetization-base/blob/master/simple.html

Step 1: Add monetization meta tag -- 1 block

• may want to replace below code with <meta name="monetization" content="MY_PAYMENT_POINTER">

<meta name="monetization" content="$ilp.uphold.com/aEYQyH47UYPY">

Step 2: Check for document.monetization -- 1 block

if (document.monetization) {

}

Step 3: Listen for monetizationprogress event -- 1 block

document.monetization.addEventListener('monetizationprogress', event => {

});

Step 4: Show element -- part 1 -- 1 block

<div id="thank-you-note" style="display: none; background-color: #5D67FF; color: #FFF">thank you for supporting me via Web Monetization <3</div> // add to body

Step 4: Show element -- part 2 -- 1 block

document.getElementById('thank-you-note').style.display = 'block'; // within monetization progress event

document.getElementById('thank-you-note').style.display = 'none'; // within else case for document.monetization check

Congrats page with link to resources such as

• https://github.com/esse-dev/web-monetization-base
• https://webmonetization.org/docs/getting-started
• https://webmonetization.org/#wallets