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>