Integration Guides

Complete documentation for integrating with Button Solutions.

Introduction

Welcome to the documentation for Button Solutions.

Ok so first off, let's talk integration.

We have a few levels of protection, and all are opt-in:

  • Frontend / Client-side
  • Silent captcha
  • Site protection (coming soon)

For newcomers, we suggest first observing traffic for a bit, and then enabling protection.

Frontend / Client-side integration

Integration with the client side is as easy as adding this line to your header (first script loaded):

<html>
<head>
<script src="https://script.button.solutions/hi" defer async></script>
<!-- ... -->
</html>

Hide the twirling space button:

<script src="https://script.button.solutions/hi?invisible=true" defer async></script>

Enable waf-style redirection to main page when the button cookie is missing:

<script src="https://script.button.solutions/hi?mode=redirect" defer async></script>
Silent captcha integration into forms

We replace recaptcha / turnstile-style verification with a silent option.

<form>
  <!-- ... -->
  <div class="button-solutions-captcha"></div>
  <!-- ... -->
</form>

Endpoint:

POST https://js.buttons.solutions/siteverify

Request:

{
  "sitekey": "[your site key]",
  "response": "[response inserted into the \"button-solutions-captcha\" div]"
}

Response:

{
  "success": true,
  "error": [error detail object],
  "challenge": {
    "timestamp": "[timestamp string]",
    "origin": "[origin]"
  }
}
Vue captcha integration example
const submitUser = async () => {
  try {
    const buttonUser = document.querySelector('.button-solutions-captcha input[type="hidden"]')
    const res = await fetch(`${apiUrl}/signup`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        fullname: form.fullname,
        email: form.email,
        password: form.password,
        passwordConfirmation: form.passwordConfirmation,
        button: buttonUser.value,
      })
    });
  } catch (e) {
    // ...
  }
}
How it works (technical details)

Protection flow overview:

sequenceDiagram
participant unprotected.com [server]
participant unprotected.com [client]
participant script.button.solutions
unprotected.com [server]->>unprotected.com [client]: [normal webpage rendering]
unprotected.com [client]->>script.button.solutions: GET /hi
script.button.solutions-->>unprotected.com [client]: [dynamic script load]
unprotected.com [client]-->>unprotected.com [client]: [make button cookie and talk with script]
unprotected.com [client]->>unprotected.com [server]: [add button cookie]
unprotected.com [server]->>script.button.solutions: POST /siteverify
script.button.solutions-->>unprotected.com [server]: [block decision]
  • We load your client script and start challenge-response collection.
  • Signals are focused on automation detection, not user identity.
  • Classification updates as more evidence arrives.
  • Server-side integration is required for complete protection.
Classification Types
  • Unclassified - We did not manage to classify confidently.
  • UntrustedIp - Known proxy/datacenter access.
  • RequestBot - Basic HTTP automation (curl, requests).
  • SimpleFakeBrowser - JS-rendering automation with strong bot signals.
  • SeoCrawler - SEO-related crawler traffic.
  • AiCrawler - Tooling such as firecrawl.ai.
  • RealEnoughBrowser - Human traffic.
  • ErrorInClassification - Internal classification failure.

Coming soon: AdvancedRequestBot, AdvancedStealthBrowser, AiSeo, AuthenticatedTesting, PaidUser.

Configuration

We recommend starting with traffic visibility, then moving to clickguard/blocking.

  • analytics_only - view only.
  • troll_bad_access - dom deletion for simple fake browsers.
  • create_clickguard - requires removing GTM and passing analytics tag.
{
  "analytics_tag": "[YOUR TAG HERE]"
}

Need Help?

If you have questions or need assistance, please contact our support team.

[email protected]