How to Detect AdBlock in Webflow and Display a Message

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to detect whether a visitor is using an ad blocker on your Webflow site and display a tailored message.

Example

Understanding the principle

Ad blockers (uBlock Origin, AdBlock Plus, and others) use filter lists to hide elements whose class name or ID looks like an ad. The "bait" technique creates an invisible element with typical ad-related classes (adsbox, ad-banner, and so on). If AdBlock blocks it, the element ends up with zero size: you can then detect the presence of a blocker.

1. Create the message to display in Webflow

Create a Div with the ID adblock-message containing your message. Set it to display: none by default in your styles. This Div will only appear if AdBlock is detected.

2. Add the script in Footer code

(function() {
  var bait = document.createElement('div');
  bait.className = 'adsbox ad-banner pub_300x250';
  bait.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;';
  document.body.appendChild(bait);
  setTimeout(function() {
    var blocked = bait.offsetHeight === 0 || bait.offsetWidth === 0 || !bait.offsetParent;
    bait.remove();
    if (blocked) {
      var msg = document.getElementById('adblock-message');
      if (msg) msg.style.display = 'block';
    }
  }, 100);
})();

3. Adapt the message

The content of the adblock-message Div is up to you. Effective message examples: a subtle banner asking visitors to whitelist your site, a modal explaining the impact on your free content, or an informative message without judgment.

Conclusion

AdBlock detection lets you adapt your content or raise awareness with your visitors. Use cases:

• Free content sites funded by advertising
• Media outlets and blogs with a freemium model
• Showing an alternative (subscription, donation) to users with AdBlock

Detection result on your current browser

Detecting...