Blog

Adding meta tag to enable monetization

May 22, 2020

To enable web monetization on our website, we have to add a special <meta> tag inside <head>. It contains an Interledger Payment Pointer, that can be obtained on Uphold website (according to this tutorial).

<html>
  <head>
    <title>My Monetized Website</title>
    <meta name="monetization" content="$wallet.example.com/yourcode"/>
  </head>
</html>

Adding new tag to <head> in Gatsby is not as straightforward as with normal html pages. We have to use React Helmet plugin. On any page you want to enable web monetization, add 

<Helmet>
    <meta name="monetization" content="$wallet.example.com/yourcode"/>
</Helmet>

as part of the rendered component.

When you visit the page with enabled monetization, you can see the status in the Chrome extension.

chrome coil extension showing paying status

Another option is to add 

wallet: `$wallet.example.com/yourcode`

inside gatsby-config.js.

After that, find the SEO component. It renders <Helmet> component which has a property meta. Add the following to the meta array.

{
  name: `monetization`,
  content: site.siteMetadata.wallet,
}

Don’t forget to adjust the query by adding wallet

const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            wallet
          }
        }
      }
    `
  )

Now all your blog posts have web monetization enabled.

Created by Petr Janík, a student of informatics in Brno, Czech Republic and a huge fan of web development. Follow me Twitter