Detect AdBlocker and Show a Message to
Whitelist your Website in the AdBlocker

How to Detect AdBlocker and Show a Popup Message to Whitelist Website

Here is the HTML and JavaScript code snippet to detect Adblocker in the browser and show whitelist popup to the visitor, open your HTML page in the code editor, copy this HTML markup and paste it before the closing body tag

To add this code in your WordPress website install Insert Headers and Footers WordPress plugin in your website and add this code into Scripts in Footer input box.

 <div class="adbn-wrap">
<div>
<p>We have detected an adblocker in your browser, <br/>please consider supporting us by disabling your ad blocker.</p>
<button id="adbnrb" type="button" name="button">I've disabled AdBlocker</button>
</div>
</div>

<style>
.adbn-wrap{
    display: none;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(217 217 217 / 88%);
    backdrop-filter: blur(3px);
    z-index: 999;
}
.adbn-wrap div{
    align-self: center;
    width: 30vw;
    background: #010a26;
    padding: 30px 20px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 35px 20px -20px #ababab;
    color: #fff;
    border-top: 2px solid #ff8d00;
    animation: popupanim ease-out 0.5s;
    animation-iteration-count: 1;
}
.adbn-wrap div p{
    line-height: 1.8;
    margin-bottom: 0;
    font-size: 16px;
}
.adbn-wrap div button{
    margin-top: 14px;
    background: #ffffff;
    color: #000;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    padding: 3px 12px;
}
@keyframes popupanim{
    from{
        opacity:0.3;
        transform:translate(0px,40px);
    }
    to{
        opacity:1;
        transform:translate(0px,0px)  ;
    }
}
@media screen and (max-width: 1200px) {
  .adbn-wrap div{
      width: 70vw;
  }
}
</style>

<script>
      try {
        var request = new Request(
          "http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
          { method: "HEAD", mode: "no-cors" }
        );
        fetch(request)
          .then(function (request) {
          })
          .catch(function (request) {
	     let adbnwrap = document.querySelector(".adbn-wrap");
             adbnwrap.style.display = "flex";
          });
      } catch (err) {
      }
      let adbnrefresh = document.querySelector("#adbnrb");
      adbnrefresh.addEventListener("click", function () {
        location.reload();
      });
</script>