loading...

Monetize Eleventy Posts

dancanetti profile image Daniel Canetti ・1 min read

What I built

An Eleventy plugin to monetize posts and site content by creating exclusive content areas or posts.


Submission Category: Foundational Technology


Demo

I've created a demo page on my personal site.

Link to Code

GitHub logo DanCanetti / eleventy-plugin-monetization

An Eleventy plugin to monetize posts and site content

Monetize 11ty

An Eleventy plugin to monetize posts and site content by creating exclusive content areas.

Web Monetization

A JavaScript browser API which allows the creation of a payment stream from the user agent to the website.

Find out more

Setup Coil to take payments

  1. Create an account at coil.com.
  2. Start Monetizing by becoming a creator.
  3. Once set up go to you Monetize Content in settings.
  4. Here you'll see your wallet URL in the meta tag.
  5. The provider_url will be something like $coil.xrptipbot.com depending how you chose to be paid.
  6. The unique_id is everything after the /. DO NOT include the / in your provider_url or unique_id.

Installation

npm install eleventy-plugin-monetization

Add the below to your .eleventy.js file:

// Monetize
const monetize11ty = require("eleventy-plugin-monetization")
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin( monetize11ty )
}

Usage

Add the shortcode below to the <head> of your 11ty site where you…

How I built it

This is my first real open source project, my first hackathon, and my first time building a plugin for Eleventy. Along the way I had some frustrations with getting the functionality I wanted but by just carefully reading the documentation and researching some of the projects other Eleventy users have worked on I've managed to figure it out.

Additional Resources/Info

It's all available on NPM and can be installed on an Eleventy site right now! Please let me know if there are any issues by creating a New Issue on the repo.

Posted on by:

dancanetti profile

Daniel Canetti

@dancanetti

A Web Developer living and working in Yorkshire, England.

Discussion

markdown guide
 

Great module, but your monetization.js is blocked when we uses Ublock or other content. Rename this file to webmone.js for example ✌

Console

 

Thanks for the feedback Thomas. Would you be able to raise an issue for this please and I'll look to resolve in the next release?

 
 

This is great, it will be important for content creators to play with this balance of content available for only WM users. Coil's CEO Stefan Thomas has written about this here: coil.com/p/coil/The-100-20-Rule-fo...

Thanks for taking the chance on new things here and joining the #gftwhackathon!

 

Thanks Chris! Really enjoyed it.

 

That's good. But the ads area looks weird with transparent value. I will choose same color with background menu rather than transparent.

 

Ah! That's bug from the blog posts which I based this demo template from. Thanks for flagging, I'll add it to my snag list.

 

Fix now in place. Thanks again for pointing this out!

 

Nice & useful. Thanks for sharing!