Quick Start

One script tag, zero configuration. Add Babel Shield to any website in under a minute.

Add the Script Tag

Add this line before </body> in your HTML:


<script src="https://cdn.babelshield.ai/v1/babel-shield.js"
        data-api-token="YOUR_API_TOKEN"></script>

Every form on the page is now protected. When a user submits a form, Babel Shield checks the content for spam, profanity, hate speech, and other categories. Flagged content is blocked with an inline message. Clean content submits normally.

What Happens Automatically

  • Form detection -- every <form> element on the page is found and intercepted
  • Field extraction -- only user-generated text fields are sent for moderation (text inputs, textareas). Selects, checkboxes, and other constrained inputs are skipped.
  • API moderation -- content is scored across 13 categories (spam, profanity, hate speech, prompt injection, and more)
  • Inline feedback -- if content is flagged, the user sees a message explaining why
  • Fail-open -- if the API is unavailable, forms submit normally so users are never blocked

Configuration via Data Attributes

Customize behavior by adding data attributes to the script tag:

Attribute Default Description
data-api-token (required) Your Babel Shield API token
data-feedback-mode inline Feedback display: inline, modal, or silent
data-blocked-message (default) Custom message shown when content is blocked
data-debug false Enable console debug logging
data-fail-open true Allow form submission if the API is unavailable
data-api-url (production) Custom API endpoint URL

Security: data-api-url controls where form data is sent. Only use this on pages you fully control.

Examples

Custom blocked message:


<script src="https://cdn.babelshield.ai/v1/babel-shield.js"
        data-api-token="YOUR_API_TOKEN"
        data-blocked-message="Please revise your message."></script>

Modal popup instead of inline message:


<script src="https://cdn.babelshield.ai/v1/babel-shield.js"
        data-api-token="YOUR_API_TOKEN"
        data-feedback-mode="modal"></script>

Exclude a form from protection:


<form data-babel-shield-ignore
      action="/search">
  <!-- This form is NOT moderated -->
</form>

Alternative Initialization

There are three ways to initialize Babel Shield. Pick one -- they are mutually exclusive.

Using window.BabelShieldConfig

Define window.BabelShieldConfig before the script loads. Do not include data-api-token on the script tag.


<script>
  window.BabelShieldConfig = {
    apiToken: 'YOUR_API_TOKEN',
    feedback: {
      mode: 'inline',
      messages: {default: 'Content blocked.'}
    }
  };
</script>
<script src="https://cdn.babelshield.ai/v1/babel-shield.js"></script>

Manual Initialization

Omit data-api-token from the script tag and call BabelShield.init() yourself:

BabelShield.init({
  apiToken: 'YOUR_API_TOKEN',
  thresholds: {spam: 80, profanity: 60}, // Custom overrides
  feedback: {mode: 'modal'}
});

This gives you full control over when initialization happens and what options are set.

Security

The API token is visible in your HTML source. This is by design -- the same model used by Google reCAPTCHA and Stripe publishable keys. Your token is protected by:

  • Domain restrictions -- tokens are validated against your domain on the server
  • Rate limiting -- 60 requests per minute, 1000 per hour
  • CORS policies -- unauthorized domains cannot use your token

Next Steps