Bot Blockers is a lightweight CAPTCHA library designed to be easy to integrate into any website. It provides multiple CAPTCHA types including text, emojis, letters, colors, and shapes. This documentation will guide you through the installation, configuration, and usage of Bot Blockers.
To use Bot Blockers, include the CSS and JavaScript files from the CDN:
<script src="https://npmjs-cdn-app.vercel.app/cdn/npm/botblockers/botblocker.js" defer></script>Add the following script to your HTML file to initialize Bot Blockers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usage Bot Blockers</title>
<script src="https://npmjs-cdn-app.vercel.app/cdn/npm/botblockers/botblocker.js" defer></script>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
initializeBotBlocker({
type: 'emoji', // Change this to 'text', 'letters', 'colors', or 'shapes' to switch CAPTCHA type
cssPath: 'https://npmjs-cdn-app.vercel.app/cdn/npm/botblockers/botblocker.css',
canvasId: 'captcha',
inputId: 'captcha-input',
buttonId: 'captcha-submit',
checkboxContainerId: 'robot-checkbox-container',
modalOverlayId: 'modal-overlay',
captchaContainerId: 'captcha-container'
});
});
</script>
</body>
</html>The initializeBotBlocker function is called when the document is fully loaded. It requires an options object to configure the CAPTCHA.
type: Specifies the type of CAPTCHA (text, emoji, letters, colors, shapes).cssPath: Path to the CSS file.canvasId: D of the CAPTCHA canvas element.inputId: ID of the input element for the CAPTCHA.buttonId: ID of the submit button for the CAPTCHA form.checkboxContainerId: ID of the container for the "I'm not a robot" checkbox.modalOverlayId: ID of the modal overlay element.captchaContainerId: ID of the CAPTCHA container element.
Generates a CAPTCHA with random alphanumeric characters.
Generates a CAPTCHA with random emojis.
Generates a CAPTCHA with random letters.
Generates a CAPTCHA with random colors. Users need to select the correct colors from a palette.
Generates a CAPTCHA with random shapes. Users need to select the correct shapes from a palette.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bot Blockers Example Usage</title>
<script src="https://npmjs-cdn-app.vercel.app/cdn/npm/botblockers/botblocker.js" defer></script>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function () {
initializeBotBlocker({
type: 'colors',
cssPath: 'botblocker.css',
canvasId: 'captcha',
inputId: 'captcha-input',
buttonId: 'captcha-submit',
checkboxContainerId: 'robot-checkbox-container',
modalOverlayId: 'modal-overlay',
captchaContainerId: 'captcha-container'
});
});
</script>
</body>
</html>