An easy-to-implement, lightweight CAPTCHA system that protects your website from bots without frustrating your users with complex challenges, and Bot Detector.
Get StartedOur solution adds minimal load to your pages with just 71KB of JavaScript delivered via fast CDN.
Simple math problems effectively block automated bots while remaining accessible to humans, and powerful Bot Detector.
Easily customize behavior, style and messages.
Create a div element where you want the CAPTCHA to appear:
<div id="captcha-container"></div>Add this script tag to your page (preferably before the closing </body> tag):
<script src="https://cdn.jsdelivr.net/gh/Danielcosta78/CatchMe@main/cdn/captcha.js"></script>Customize the behavior by adding a configuration object before the script tag:
<script>
// CAPTCHA Configuration - Add this before loading the CAPTCHA script
window.captchaConfig = {
licenseKey: "SC-ACTIVATE-1234-5678-ABCD", // To remove the mark Powered by CatchMe
redirectUrl: '#', // Redirection URL (use '#' if handling via callback)
/* Optional settings below */
maxAttempts: 3, // Maximum allowed attempts before lockout
captchaTitle: 'Security Verification',
captchaInstructions: 'Solve the simple math problem to continue',
successMessage: 'Verification successful!',
containerId: 'captcha-container', // ID of your container element
// Callback functions
onSuccess: function() {
// Handle successful verification
alert('CAPTCHA validation passed!');
// Enable your form submission here
},
onFailure: function(attempts) {
// Handle failed attempts
console.warn(`CAPTCHA failed after ${attempts} attempts`);
},
onInit: function() {
// Runs when CAPTCHA loads
console.log('CAPTCHA initialized successfully');
},
// Custom CSS overrides
customStyle: `
/* Main container */
.captcha-container {
background: #f8f9fa !important;
border: 1px solid #dee2e6 !important;
}
/* Title text */
.captcha-title {
color: #2c3e50 !important;
}
/* Verify button */
.verify-button {
background: #3498db !important;
transition: all 0.3s ease !important;
}
/* Hover state for button */
.verify-button:hover {
background: #2980b9 !important;
}
/* Input field */
.answer-input {
border: 2px solid #ddd !important;
}
/* ↓ more ↓
.captcha-instructions
.equation-container
.equation-display
.refresh-button
.status-message
.status-message.success
.status-message.error */
`
};
</script>This is an example used on this page:
<script>
window.captchaConfig = {
redirectUrl: '#',
licenseKey: "",
maxAttempts: 3,
captchaTitle: 'Security Verification',
captchaInstructions: 'Solve the math problem to unlock the page',
successMessage: 'Verification successful! Page unlocked.',
containerId: 'demo-captcha-container',
customStyle: `
/* Scroll lock */
body.captcha-scroll-locked {
overflow: hidden !important;
position: fixed;
width: 100%;
}
/* Block Overlay */
.captcha-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.97);
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}
/* CAPTCHA container in modal */
.captcha-modal-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 30px rgba(0,0,0,0.15);
width: 90%;
max-width: 400px;
z-index: 9999;
}
/* Reset styles for CAPTCHA in modal */
.captcha-modal-container > #${this.containerId} {
margin: 0 !important;
width: 100% !important;
box-shadow: none !important;
}
`,
onInit: function() {
// 1. Block scrolling immediately
document.body.classList.add('captcha-scroll-locked');
// 2. Save original reference
const originalCaptcha = document.getElementById(this.containerId);
this._originalPosition = {
parent: originalCaptcha.parentNode,
nextSibling: originalCaptcha.nextSibling,
styles: window.getComputedStyle(originalCaptcha)
};
// 3. Create overlay and modal
const overlay = document.createElement('div');
overlay.className = 'captcha-overlay';
const modal = document.createElement('div');
modal.className = 'captcha-modal-container';
// 4. Move to CAPTCHA
modal.appendChild(originalCaptcha);
overlay.appendChild(modal);
document.body.appendChild(overlay);
// 5. Focus input automatically
setTimeout(() => {
const input = originalCaptcha.querySelector('input');
if (input) input.focus();
}, 300);
},
onSuccess: function() {
// 1. Get references
const originalCaptcha = document.getElementById(this.containerId);
const overlay = document.querySelector('.captcha-overlay');
// 2. Show confirmation (optional)
alert(this.successMessage);
// 3. Restore original position
setTimeout(() => {
if (this._originalPosition && overlay) {
// Remove from modal
overlay.querySelector('.captcha-modal-container').removeChild(originalCaptcha);
// Insert in original position
if (this._originalPosition.nextSibling) {
this._originalPosition.parent.insertBefore(
originalCaptcha,
this._originalPosition.nextSibling
);
} else {
this._originalPosition.parent.appendChild(originalCaptcha);
}
// Restore styles
originalCaptcha.style.margin = this._originalPosition.styles.margin;
originalCaptcha.style.width = this._originalPosition.styles.width;
originalCaptcha.style.display = this._originalPosition.styles.display;
/* Or hide the CAPTCHA after it is completed
const demoSection = document.getElementById('demo');
if (demoSection) {
demoSection.style.display = 'none';
}
originalCaptcha.style.display = 'none';
originalCaptcha.style.visibility = 'hidden';
originalCaptcha.style.height = '0';
originalCaptcha.style.padding = '0';
originalCaptcha.style.margin = '0'; */
// Remove overlay
overlay.remove();
}
// 4. Release scroll
document.body.classList.remove('captcha-scroll-locked');
}, 2000);
},
onFailure: function(attempts) {
if (attempts >= this.maxAttempts) {
// Alert (optional)
alert('Maximum attempts limit reached.');
}
}
};
</script>Create a div element where you want the Button to appear:
<div id="verification-button"></div>Add this script tag to your page (preferably before the closing </body> tag):
<script src="https://cdn.jsdelivr.net/gh/Danielcosta78/CatchMe@main/cdn/botdetector.js"></script>Example Bot Detection settings:
<script>
window.BotDetector.init({
licenseKey: "",
silent: false,
callback: (results) => {
// add your callback here
// example
if (results.isHuman) {
console.log("Human detected - proceed");
// Enable form submission, grant access, etc.
document.getElementById('submit-btn').disabled = false;
} else {
console.warn("Bot detected - take action");
// Disable features or show warning
document.getElementById('secure-content').style.display = 'none';
}
},
button: {
text: "Verify Now",
verifyingText: "Verifying...",
successText: "Verified",
failText: "Failed",
styles: {
background: "#4a6fa5",
color: "#fff",
borderRadius: "4px",
fontSize: "16px",
minWidth: "120px",
minHeight: "40px",
boxSizing: "border-box",
},
verifyingStyles: {
background: "#6c757d",
cursor: "not-allowed",
},
successStyles: {
background: "#28a745",
},
failStyles: {
background: "#d32f2f",
},
},
resultMessage: {
successText: "Human detected!",
failText: "Bot detected!",
styles: {
marginTop: "5px",
fontSize: "14px",
fontWeight: "500",
color: "#333",
textAlign: "center",
display: "block",
position: "relative",
background: "rgba(255, 255, 255, 0.9)",
padding: "5px 10px",
borderRadius: "4px",
zIndex: "1000",
},
successStyles: {
color: "#28a745",
},
failStyles: {
color: "#d32f2f",
},
},
buttonContainer: {
selector: "#verification-button",
inheritStyles: true,
},
});
</script>Start auto-check without button when opening page:
<script>
window.captchaConfig = {
licenseKey: "LICENSE KEY", // Removes branding
silent: true, // Disables console logs
sendToServer: false, // Set to true to send results to your server
buttonContainer: { selector: null }, // Hides the verification button
callback: function(results) {
if (results.isBot) {
console.log("Bot detected! (Page will be blocked automatically)");
} else {
console.log("Human user verified");
}
}
};
// Initialize the detector
window.BotDetector.init(window.captchaConfig);
// --- Force verification after short delay ---
setTimeout(() => {
if (window.BotDetector.run) {
window.BotDetector.run(); // Programmatically start verification
}
}, 500); // Delay ensures detector is fully initialized
</script>NOTE: Both CDNs use the same global variable. Using settings simultaneously will cause the operation to stop.
Automatic bot detection
● License removes brand name Powered by CatchMe.
● One-time purchase of $10