BlockWall: A Tiny Script That Blocks Ad Blockers
If your website is funded by ads, you've probably wondered how many visitors never see them. I wanted a simple, friendly way to ask those visitors to support a site, so I built BlockWall . BlockWall is a lightweight, dependency-free JavaScript file that's completely free to use. When it detects an ad blocker, it covers your content with a clear message explaining why ads matter. Once visitors…
If you rely on advertisements to support your website, you may have wondered how many visitors are unable to view them. I created BlockWall to provide a simple and user-friendly way to ask these visitors to contribute to the site's sustainability. BlockWall is a lightweight, JavaScript script that can be utilized without any cost.
Upon detecting an ad blocker, the script covers your website's content with a clear message explaining the importance of advertisements. Once users disable their ad blocker for your site and click the provided button, the message fades away, allowing them to continue browsing as normal. To begin using BlockWall, first download the ZIP file from the latest GitHub release and add blockwall.js to your website.
Next, wrap the content you wish to protect and include the two following lines of code: script src= blockwall.js /script script AdBlockWall . init ({ target : #content }); /script This is all that's required for installation! BlockWall offers various customization options, allowing you to control the appearance and functionality of the wall.
You can choose to blur or completely hide the content behind the message, customize the title, message, and button text, and inform visitors about how their ad support contributes to your site's funding. You can also specify whether to lock the entire page or only certain areas, such as articles or games. BlockWall supports callbacks, enabling you to execute your own code when the wall is activated or deactivated.
The script can be styled using a few lines of CSS to match your website's design. As a dialog, BlockWall functions seamlessly, supporting keyboard navigation and screen readers, and can be dismissed once the visitor has deactivated their ad blocker. BlockWall is meticulously designed to remain unobtrusive: it has no dependencies, requires no build step, does not demand an account, functions across all websites, including those hosted on static platforms like Cloudflare Pages and GitHub Pages, and is offered free of charge under a GNU license.
To explore BlockWall, visit its repository at github.com/Fast4word/blockwall, check out the live demo at fast4word-blockwall.pages.dev, and review the comprehensive documentation at fast4word-blockwall.pages.dev/docs. We welcome feedback, suggestions, and contributions from anyone interested in improving BlockWall.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
