Monetization <link> element

HTML DOM API

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

Prerequisites

To web monetize an HTML page, such as a web page:

You must have an account with a compatible wallet provider
You must have the wallet address, or payment pointer in URL format, from your wallet provider
Your document must be served over HTTPS

Monetization `<link>` element

The monetization <link> element is what indicates your HTML page supports Web Monetization.

Syntax

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

The rel attribute is always monetization
The href attribute equals your wallet address or your payment pointer in URL format

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; however, your site visitor’s Web Monetization agent could be designed to handle multiple links in a particular way. For example, an agent might:

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

Iframes

Nested browsing contexts (iframes) can contain monetization <link> elements; however, 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, is not yet a standard. 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.

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 CSP monetization-src and Permissions Policy monetization directives

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

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

Specifications

Specification
Web Monetization #link-type-monetization

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	Puma Browser
`rel.monetization`	Yes	Yes	Yes	No	Yes	No	No	No	No	No	No	No	Yes