Tutorial: How to Web Monetize a Webflow Website

Webflow is a drag-and-drop tool that allows creators to create beautiful, responsive websites without writing a single line of code. Its interface resembles Adobe Photoshop and it writes clean, semantic code that is compatible across all browsers and devices. But Webflow does not natively support the proposed web monetization standard.

In this tutorial I will show you how I have been able to web monetize my website in Webflow.

First, open your Webflow project and then go to Project Settings.

Go to Custom Code. Under Head Code, paste the following code:

<meta name="monetization" content="PAYMENT POINTER">

Where PAYMENT POINTER is your payment pointer.

Press Save Changes.

This will allow you to receive micropayments whenever a user with the Coil browser plug-in installed visits your website.

Now that our website is monetized, we will hide content so that it is only visible to Coil members.

In order to do this, go to the Designer View.

Click Pages and select the page that you want to have content hidden on. Go to Page Settings.

Go to Custom Code. Under Head Code, paste the following code:

<style>
   .hidden {
     display: none;
   }
</style>

<script>
   if (document.monetization) {
     document.monetization.addEventListener('monetizationstart', () => {
       document.getElementById('exclusive').classList.remove('hidden')
     })
   }
</script>

Now, find a part of your page where you’d like the content to only be visible to Coil members and go to the Settings tab for that element.

For example, if you have text, click the text and go to Text Settings.

Under Style, go to Selector and type the word “hidden”. This will create a new style called hidden - you do not need to adjust it any further.

Go to Element Settings. Under Block Settings, the ID field is blank. Type the word “exclusive” into this field and choose the Tag “div”.

That’s it! This element is now hidden and will only be visible to paying subscribers.

Note that this only hides content on the client side. A user could pretend to be web monetized by using the developer console in their browser. But, I like to think that most people are honest and wouldn’t resort to doing this.