DEV Community

Fast4word
Fast4word

Posted on

BlockWall: A Tiny Script That Blocks Ad Blockers

#showdev #webdev #opensource #javascript

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 disable their ad blocker for your site and click the button, the message disappears and they can continue browsing.

Getting Started

Download the ZIP file from the latest GitHub release, add blockwall.js to your website, wrap the content you want to protect, and include these two lines:

<script src="blockwall.js"></script>
<script>
  AdBlockWall.init({ target: "#content" });
</script>
Enter fullscreen mode Exit fullscreen mode

That's the entire setup!

Customization Options

BlockWall gives you control over how the wall looks and behaves:

  • Appearance: Blur the content behind the message or hide it completely.
  • Text: Customize the title, message, and button text. Explain to visitors what their ad support helps fund.
  • Target: Choose whether to lock the entire page or just specific areas, such as articles or games.
  • Callbacks: Run your own code when the wall is activated or deactivated.
  • Styling: Easily customize the appearance with a few lines of CSS to match your website's design.

The wall works as a proper dialog, supports keyboard navigation and screen readers, and can be dismissed once the visitor has disabled their ad blocker.

Small and Simple

BlockWall is designed to stay out of your way:

  • No dependencies.
  • No build step.
  • No account required.
  • Works on websites hosted anywhere, including static hosts like Cloudflare Pages and GitHub Pages.
  • Free and GNU-licensed.

Get BlockWall

Give it a try, and I'd love to hear what you think! Feedback, suggestions, and contributions are always welcome.

Top comments (0)