Webpage (HTML)

HTML DOM API

From a content owner/developer perspective, the monetization <link> element is one of the two key pieces to web monetizing an HTML page. The second piece is a wallet address.

Prerequisites

To web monetize an HTML page:

You must have an account with a compatible wallet provider
You must have the wallet address from your wallet provider
Your document must be served over HTTPS

Monetization `<link>` element

Syntax

<link rel="monetization" href="https://(walletaddress)" />

The rel attribute is always monetization
The href attribute equals your wallet address

For example:

<link rel="monetization" href="https://wallet.example.com/alice" />

Placement

A monetization <link> is body-ok, meaning it’s allowed in your page’s <head> and/or <body>.

Multiple monetization links

An HTML page can contain multiple monetization <link> elements, but your site visitor’s Web Monetization agent could be designed to handle multiple links in a particular way. For example, an agent could:

Split payments evenly between all links
Split payments between the first few links it finds
Send the amount only to the first link it finds and ignore all others

The Web Monetization agent built into the Interledger Foundation’s extension splits payments evenly between all links, even if the same wallet address is used in multiple links.

Iframes

Nested browsing contexts (iframes) can contain monetization <link> elements, but your site visitor’s Web Monetization agent determines how iframes are monetized. A few examples of how a Web Monetization agent can monetize iframes include:

Splitting payments evenly between all monetization links within both the parent and the iframe
Splitting payments evenly between all monetization links in the parent and the first monetization link it finds in the iframe’s <head>, while ignoring any other monetization links in the iframe
This is the approach used in the Interledger Foundation’s extension.
Sending payments to the first monetization link it finds in the parent browsing context and ignoring all other monetization links in the parent and the iframe

Audio, video, and picture elements

The following HTML elements can be web monetized by adding the <link> element between the open and close tags.

<audio src="music.mp3">
    <link rel="monetization" href="https://wallet.example.com/bob">
</audio>

<video src="myvideo">
    <link rel="monetization" href="https://wallet.example.com/bob">
</video>

<picture srcset="cat.jpeg">
    <link rel="monetization" href="https://wallet.example.com/bob">
</picture>

How it works

HTMLLinkElement

The HTML DOM API’s HTMLLinkElement interface defines how the <link> element functions. The <link> element is what allows you to link your HTML page to a resource.

The two most recognizable HTMLLinkElement properties are href and rel. The href property defines the URL to the resource. The rel property indicates the type of link, or relationship, the resource has to the current page.

rel=“monetization” link type

Browsers already know how to interpret certain rel values because of web standards. One such standard is stylesheet. When a browser loads a page that contains <link href="styles.css" rel="stylesheet">, the browser automatically knows to import a style sheet from the given URL.

The monetization link type, however, isn’t a standard yet. Major web browsers don’t automatically know what to do when encountering this link type in a page. Until monetization becomes a standard, browsers must rely on a Web Monetization agent, like the one built into Interledger Foundation’s Web Monetization extension.

Web Monetization agent

A Web Monetization agent is a non-user facing component of the Interledger Foundation’s extension.

The purpose of the Web Monetization agent is to recognize when a page is web monetized and automatically carry out certain tasks. These tasks include:

Extending the HTML DOM API so that monetization is a valid link type
Processing the monetization link or links within an HTML page
Instrumenting payments by calling the Open Payments APIs, which are APIs implemented by wallet providers
Firing monetization events after an outgoing payment is created
Processing monetization events sent to the browser window via the onmonetization event handler
Enabling the Content Security Policy (CSP) monetization-src and Permissions Policy monetization directives

Until Web Monetization agents are natively built into web browsers, an agent must be added to browsers in some other way. That’s why the agent is included as part of Interledger Foundation’s extension.

	desktop	mobile
`rel.monetization`	Yes	Yes	Yes	No	Yes	No	No	No	No	No	No	No	Yes

Continuous payments

If your visitor is sending continuous payments, the payments will continue for as long as your web monetized page is active and in view. Continuous payments stop if your visitor:

Disables the extension
Disables continuous payments within the extension’s settings
Minimizes their browser
Changes focus away from your site/switches to a different tab
Closes your site or their browser
Spends all of their budget

Specification

Specification
Web Monetization #link-type-monetization