Botpoison logo

Getting started with HTML

1. Import the @botpoison/browser script.
2. Add your public key to the data-botpoison-public-key attribute.
3. The solution will automatically be attached to the submission (as the _botpoison field).
markup
<!-- 1. Import the @botpoison/browser script -->
<script src="https://unpkg.com/@botpoison/browser" async></script>


<!-- 2. Add your public key to the data-botpoison-public-key attribute -->
<form
  action="https://example.demo"
  data-botpoison-public-key="pk_xxxxxxxx"
>
  <input type="text" name="message" />
  <button type="submit">Send</button>
</form>

Your form will emit custom Botpoison events, you can listen for these events to temporarily disable a submit button or add a loading indicator.

markup
<form
  id="form"
  action="https://example.demo"
  data-botpoison-public-key="pk_xxxxxxxx"
>
  <input type="text" name="message" />
  <button id="button" type="submit">Send</button>
</form>
<script>
  var formElement = document.getElementById("form");
  var buttonElement = document.getElementById("button");
  formElement.addEventListener("botpoison-challenge-start", function () {
    buttonElement.setAttribute("disabled", "disabled");
  });
  formElement.addEventListener("botpoison-challenge-success", function () {
    buttonElement.removeAttribute("disabled");
  });
  formElement.addEventListener("botpoison-challenge-error", function () {
    buttonElement.removeAttribute("disabled");
  });
</script>