Skip to Content
Home

Getting Started

Welcome to Botdeflector! This guide will help you get up and running quickly. It is easy to get up and running with these three steps:

  1. Create a Site definition
  2. Install the Widget where you want the Botdeflector protection
  3. Validate the Botdeflector token server side

1. Create a Site definition

  1. Open the Botdeflector portal 
  2. Login or create an Account
  3. Navigate to Sites and click + Add New Site
  4. Give the new Site a name, specify the URL pattern and select one or more challenge options
ℹ️

It is easy to test your Site definition. Just click the Test button on the Sites tab  and you can try out the selected challanges. The usage of the test can easily be seen on the Monitor tab 

2. Install the Widget where you want the Botdeflector protection

  1. Click the Test button and scroll to the Installation instructions where you can copy the Widget snippet
  2. Add the widget div to your website.
<div class="botdeflector-widget-container">
  <div class="botdeflector" data-sitekey="[Your SiteKey]" data-account-id="[Your account id]"></div>
</div>
  1. Add this script tag before the closing <body> tag:
<script src="https://botdeflector.eu/client/botdeflector-widget.min.js"></script>

Usually the widget is placed inside a <form> right above the “submit” button. Here is an example:

<form id="contactForm">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <div class="botdeflector" data-sitekey="[Your SiteKey]" data-account-id="[Your account id]"></div>
  <button type="submit">Submit Form</button>
  <div id="formStatus"></div>
</form>
<script src="https://botdeflector.eu/client/botdeflector-widget.min.js"></script>
ℹ️

The Widget snippet shown under the Installation instructions will contain your SiteKey and Account id, so it’s ready to use :)

Control the “submit” button

You can control the state of the submit button via Botdeflector events botdeflector-verified and botdeflector-unverifie as shown in this example:

<script>
  const contactForm = document.getElementById('contactForm');
  const submitBtn = document.getElementById('submitBtn');
  const formStatus = document.getElementById('formStatus');
 
  // Listen to the first widget's verification status
  const botdeflectorElement = document.querySelector('.botdeflector');
  if (botdeflectorElement) {
      botdeflectorElement.addEventListener('botdeflector-verified', (e) => {
          submitBtn.disabled = false;
          formStatus.textContent = "You are human - please proceed";
      });
 
      botdeflectorElement.addEventListener('botdeflector-unverified', (e) => {
          submitBtn.disabled = true;
          formStatus.textContent = "Validation failed - please try again";
      });
  }
 
  // Initially disable submit button
  submitBtn.disabled = true;
 
  // Handle form submission
  contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    // Here you would normally send the form data to your server
    formStatus.textContent = "Thank you for submitting the form";
  });
</script>
Last updated on