Botblockers NPM

Installation

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>

Usage

HTML Setup

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>

JavaScript Initialization

The initializeBotBlocker function is called when the document is fully loaded. It requires an options object to configure the CAPTCHA.

Configuration Options

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.

CAPTCHA Types

Text CAPTCHA

Generates a CAPTCHA with random alphanumeric characters.

Emoji CAPTCHA

Generates a CAPTCHA with random emojis.

Letter CAPTCHA

Generates a CAPTCHA with random letters.

Color CAPTCHA

Generates a CAPTCHA with random colors. Users need to select the correct colors from a palette.

Shape CAPTCHA

Generates a CAPTCHA with random shapes. Users need to select the correct shapes from a palette.

Example

<!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>

captcha bot security verification protection Bot Blocker Captcha color captcha text captcha emoji captcha

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago