Documentation

AdBlock Detector Pro | Pure JavaScript Plugin

Thank you so much for purchasing.

  • Created: 26 Jan, 2023
  • Updated: 27th Aug, 2023

If you have any questions that are beyond the scope of this help file, Please feel free to email via Support Page.

Installation

Follow the steps below to setup the plugin:

  1. Unzip the downloaded package and open the /SourceCode/ABDetectorPro folder to find all the files.
  2. Below is the folder structure and and details about folders/files:
    • ABDetectorPro/
      • /css - Contains stylesheets
        • abdetectorpro.style.css - Plugin CSS
      • /js - Contains scripts
        • abdetectorpro.script.js - plugin scripts
    • ABDetectorPro/index.html - Index HTML reference file
  3. You should add all or specific files in your project as per your need.

Integration

The bare minimum for using AdBlock Detector Pro on a web page is linking to the plugin javascript and the styles then finally initializing the pluin.

Link the plugin stylesheets & scripts:
<head>
  <link rel="stylesheet" href="./style/abdetector.style.min.css" />
  <script src="./js/abdetector.script.min.js"></script>
</head>

Initialization

Once you have added the link path of necessary JS or CSS files, you can initialize the plugin either by using JS or jQuery using the onload methods.

jQuery Initialization:
$(document).ready(function() {
  abDetectorPro.init();
});
Javascript Initialization:
window.addEventListener('load', function (event) {
  abDetectorPro.init();
});

There is already initialization code in the index.html file.

Configuration

AdBlock Detector Pro is highly customisable. You can customise the colors, add or remove elements as per your needs and requirements.

You need to edit the values of config object present in abdetectorpro.script.js file.

const config = {
  .....
  .....
  .....
}

Theme Colors

Change the color code and behaviour as per need of your website. You will find the settings in config object in abdetectorpro.script.js

const config = {
  popupBackgroundColor:"#007bff", // Background color of popup
  popupBackdropColor: "rgba(0, 0, 0, 0.6)",, // Backdrop overlay color
  .....
  .....
}
Option Defult Value Values Description
popupBackgroundColor #ffffff Any hex/rgb/rgba color code The background color of popup
popupBackdropColor rgba(0, 0, 0, 0.6) Any hex/rgb/rgba color code Backdrop or overlay color behind popup
iconColor #E2535C Any hex/rgb/rgba color code Icon color of popup (Please note there are 3 icons already in abdetector.script.js file (handIcon, adIcon, faceIcon) you can use any of the icons, just change icon name in constructModal function)
btnBackgroundColor #E2535C Any hex/rgb/rgba color code Button(I've disabled AdBlock) background color
btnColor #ffffff Any hex/rgb/rgba color code Button(I've disabled AdBlock) font color
titleColor #000000 Any hex/rgb/rgba color code Title color of popup
descColor #000000 Any hex/rgb/rgba color code Description color of popup
descColor #000000 Any hex/rgb/rgba color code Help Text(How do I disable my adblocker?/Okay, I understand!) color of popup
screenTwoStepsColor #000000 Any hex/rgb/rgba color code Screen two ad block disable steps color

Textual Changes

Set the text of various elements and links as per your requirements.

const config = {
  titleText:"AdBlock Detected!",
  descText:"It looks like you have an adblocker enabled. In order to support our website and continue accessing our content, please disable your ad blocker for this site.",
  .....
  .....
}
Option Defult Value Description
titleText AdBlock Detected! Popup Title Text
descText It looks like you have an adblocker enabled. In order to support our website and continue accessing our content, please disable your ad blocker for this site. Popup description text
btnText I've disabled AdBlock Button(I've disabled AdBlock) text
screenOneHelpText How do I disable my adblocker? Screen one toggle helper text
screenTwoHelpText Okay, I understand! Screen toggle toggle helper text
screenTwoSteps
  • Click on the adblocker extension icon located at the top right corner of your browser
  • From the menu choose "Disable on this site" or "Pause on this site"
  • Refresh the page if not automatically refreshed
 Screen two adblock disable steps text

Locale Support for Multiple Languages

Our plugin auto-detects visitor's browser's language settings. The plugin is pre-configured to display messages in German, Italian, French, and Spanish. Want more languages? You can easily extend the language options to better suit your needs.

 const localizedTexts = {
    'de': { // Deutsch
      titleText: "AdBlocker erkannt!",
      descText: "Es scheint, dass Sie einen AdBlocker aktiviert haben. Um unsere Website zu unterstützen und weiterhin auf unsere Inhalte zuzugreifen, deaktivieren Sie bitte Ihren AdBlocker für diese Seite.",
      btnText: "Ich habe AdBlock deaktiviert",
      screenOneHelpText: "Wie deaktiviere ich meinen AdBlocker?",
      screenTwoHelpText: "Okay, verstanden!",
      screenTwoTitle: "Um den AdBlocker für diese Seite zu deaktivieren:",
      ...
    },
    'it': {}// Italiano,
    'fr': {} // Français,
    'es': {}// Español
    'zh': {}, // 中文 (Chinese)
    'hi': {}, // हिन्दी (Hindi)
    'ar': {}, // العربية (Arabic)
    'pt': {}, // Português (Portuguese)
    'ru': {}, // Русский (Russian)
    'ja': {}, // 日本語 (Japanese)
    ...
  };

Callbacks & Others

The details about callback functions and other variables in config object.

const config = {
  onDetected:function(){}, // Callback function which runs if ad blocker is detected
  onDisabledAdblockBtnClick:function(){} // Callback function which runs on button(I'have disabled AdBlock) click
  onCloseIconClick:function(){} / Callback function which runs on close icon click (if: showCloseIcon: true)
  showCloseIcon: false // Show close icon to hide popup
  zIndex:999, // Z-index property of popup
  .....
  .....
}
Option Defult Value Description
onDetected - Callback function which runs if ad blocker is detected. You can add code which you want to execute when ad blocker popup opens
onBtnClick - Callback function which runs on button(I'have disabled AdBlock) click. You can add code which you want to execute when button is clicked
zIndex 99999 Z-index property of popup. You can increase or decrease as per your theme requirements
popupBorderRadius 24 Border radius of the popup(rounded corners)
popupMaxWidth 500 Max width of the popup
secureMode true true|false - If true, right-click and element inspection will be disabled hence protection from source code changes through developers browser tool.
showCloseIcon true true|false - If true, close icon will be visible and user will be able to close popup

If popup or button is hiding behind other elements you can increase/decrease the zIndex value accordingly

Learn more about z-index here: z-index

FAQ

List of commonly asked questions and answers related to the plugin setup, configuration, troubleshooting and other important questions.

AdBlock Detector Pro is a JavaScript plugin that detects the presence of ad blockers on a user's browser and prompts them with a message to disable it for an optimal website experience. It's lightweight, easy to implement, and does not require any external libraries.
Ad Block Detector Pro uses JavaScript to detect the presence of ad blockers on a user's browser. If an ad-blocker is detected, it displays a customizable message asking the user to disable the ad-blocker for a better website experience.
No, Ad Block Detector Pro is not foolproof. More advanced ad-blockers or users who know how to disable them can circumvent the detector. It's recommended to provide alternative ways for users to access your content, such as a subscription-based model or a paywall, instead of relying solely on Ad Block Detector Pro.
Yes, you can customize the message displayed by Ad Block Detector Pro to match your website's design and language.
Ad Block Detector Pro is designed to work with the most popular ad-blockers, including AdBlock, AdBlock Plus, and uBlock Origin. However, it may not be compatible with every ad-blocker.
No, Ad Block Detector Pro is not designed to block ads completely. Its purpose is to detect the presence of ad-blockers and notify users with a customizable message, it doesn't block the ads.
Yes, Ad Block Detector Pro is a JavaScript-based solution and can be used on both desktop and mobile websites.
No, you don't need technical knowledge to use Ad Block Detector Pro. It is designed to be easy to implement, and the documentation provides step-by-step instructions to help you set it up.
Our plugin automatically recognizes the language setting of visitor's browser to offer a personalized user experience. Initially configured to support German, Italian, French, and Spanish, it also allows you to effortlessly add more languages to meet your specific needs.

Support

If this documentation doesn't answer your questions, please send us email via Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our plugin like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this plugin

Please Add your Review (Opinion) for plugin. It would be a great support for us.
Go to your Codecanyon Profile > Downloads Tab > & then You can Rate & Review for our plugin.
Thank You.

More Products

Checkout Our Other Products Below: View Portfolio

EmailGPT | Effortless Email Generation, Powered By OpenAI
EmailGPT | Effortless Email Generation, Powered By OpenAI
Cookie Notice Pro | Advanced jQuery Plugin
Cookie Notice Pro | Advanced jQuery Plugin
iCaptcha | Frontend & Backend reCaptcha Verification
iCaptcha | Frontend & Backend reCaptcha Verification
Floating Help Center | Advanced jQuery Plugin
Floating Help Center | Advanced jQuery Plugin

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

For Future Updates Follow Us @Codecanyon / @facebook / @twitter / @Instagram

Version 1.3.0 - Locale Support (27th Aug, 2023)

  • AddedAutomatically detects visitor's browser language and display's popup text in their language. Refer Locale Settings
  • UpdatedDetection issues for uBlock Origin
  • Updated /abdetectorpro.script.js
  • Deleted /abdetector.script.min.js
  • Deleted /abdetector.style.min.css

Version 1.2.0 - Close popup functionality added(10 Mar, 2023)

  • AddedPopup Close Icon: Now you can change config to hide or show popup close button
  • Updated /abdetector.style.css
  • Updated /abdetector.script.js

Version 1.0.0 (26 Jan, 2023)

Initial Release