How to Add the Coil Counter to Any Website
The infamous real-time payment stream counter that was visible in many places that had Coil integrated from its early days, has disappeared from most places.
For me, seeing that little counter was definitely a mind-changing moment after discovering Coil. The fact that I could visually see micropayments being streamed from me (via Coil) to another creator, directly arriving in his own connected wallet, was something completely new to me and convinced me of this use case for digital assets and the Interledger Protocol in an instant.
As the Coil community is growing continuously now, many haven't actually seen that counter in action anymore or not at all yet. Therefore, and because of getting questions lately on how I got the counter to appear on my blog, I wanted to gather all the information about the current state of the Coil counter in one post.
Where did it go?
Last year Coil's CTO Ben Sharafian informed us about an important step towards Simplifying Web Monetization, which helps explaining that situation.
With an update of the extension, Coil made a switch from using a JavaScript code snippet to recognize whether or not a website was web-monetized to a much simpler approach, which only requires now to add a meta tag to your website.
As the meta tag alone literally only serves the most basic information to the Coil extension, by providing the payment pointer as the address to send the payments to, this has lead to the extra functionality provided by the previous JavaScript — including the counter — to be gone.
How to get it back
According to this logic, there should be a way to bring the counter back by bringing part of the old JavaScript back — and luckily Ben has also provided us with exactly that.
When you take a look at the Interledger GitHub repository, you will find the small code snippet that is required to bring the counter back:
<script src="https://cdn.coil.com/counter.js"></script>
<script>
window.WebMonetizationScripts.createCounter()
</script>
Embedding this code snippet on your website is all it takes to have the counter pop up in the bottom left corner for everyone who is visiting your website with an active Coil subscription.
It shouldn't be difficult to find the right way to integrate a script into your website, but it depends on what you are using to build your website. For WordPress for example, it also depends on which theme you are using.
A quick Google search for “how to add script code to [insert your website's platform]” should help you get that done easily.
What is it good for?
It is exciting to see that more and more people are giving Coil a try, but we are still a very small crowd in this corner of the internet.
That makes me even more excited, whenever I stumble onto a website and find out that it is web-monetized as I see my Coil extension icon light up. But that is not a very prominent indicator.
The little counter popping up on each website has the potential to make that much more obvious and recognizable. Therefore, it could play its role in increasing the perceived adoption across the web.
I would love to browse on a random website and suddenly see the counter pop up, because each and every single website joining in makes me hopeful about a better internet experience in the future.
Looking forward to see more of those popping up again!
💻 Check out my Blog
🔔 Follow me on Coil
📺 Subscribe on YouTube
🐦 Reach out on Twitter
As a Coil subscriber — read on to find out about the way I discovered to track the adoption of Coil and Web Monetization across the web!
Continue reading with a Coil membership.