Documentation
AdBlock Detector Pro | Pure JavaScript Plugin
Thank you so much for purchasing.
- Version: 1.3.0
- Author: Flerosoft
- 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:
- Unzip the downloaded package and open the /SourceCode/ABDetectorPro folder to find all the files.
- 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
- 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 |
|
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.
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).
Don’t forget to Rate this plugin
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
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