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 document, such as a web page:

You must have an account with a compatible wallet
You must have the wallet address, or payment pointer in URL format, from your wallet provider
Your document must be secure and 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, there are a few factors that determine if and how a multiple link scenario is monetized.

First, most browsers enforce a maximum limit of six parallel HTTP connections to the same server. When the maximum is reached, the browser will wait until one of the existing HTTP connections is closed before it initiates the next connection.

Second, your site visitor’s Web Monetization agent could be coded to handle multiple links in a particular way. For example, one visitor’s Web Monetization agent may split payments evenly between all links while another Web Monetization agent only sends payments to the first monetization link it finds.

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

HTML DOM API

Due to the efforts of the W3C, there are a number of APIs that all major browser vendors build into their browsers. One such API is the HTML DOM API, which defines the functionality of HTML elements.

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 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