JavaScript Integration

Integrate SilentShield into any website using vanilla JavaScript, or use our framework-specific guides for React, Vue, and Angular.

1. Add the Script Tag

Add this script tag to your HTML, ideally before the closing </body> tag:

HTMLhtml

<script src="https://api.silentshield.io/client.js?k=YOUR_API_KEY" crossorigin="anonymous" defer></script>

2. Initialize the Widget

No manual initialization is required — client.js initializes itself and loads your widget configuration (theme, language, badge) from your dashboard settings:

JavaScriptjavascript

// No init call needed — client.js bootstraps itself as soon as it loads
// and pulls your widget configuration (theme, language, badge) from the
// dashboard: App → API keys → [your key] → Widget.

Configuration Options

apiKey: API key (required)
lang: Language code or 'auto' for browser detection (default: 'auto'). Supports 25 languages.
thresholdSuspicious: Score below this triggers a challenge (default: 0.6)
thresholdBlock: Score below this blocks the request (default: 0.3)
telemetry: Enable behavior tracking (default: true)
captchaUI: Show CAPTCHA UI when needed (default: true)
fallbackCaptcha: Enable math CAPTCHA fallback (default: true)
showBrandingBadge: Show 'Protected by SilentShield' badge (default: true)
zeroPii: Disable browser fingerprinting for maximum privacy (default: false). See Features → Zero-PII Mode.
debugOverlay: Show debug overlay (default: false)
onVerdict: Callback function called when a verdict is received

Single Page Applications (SPA)

For SPAs using client-side routing (React Router, Vue Router, etc.), SilentShield automatically observes DOM changes and detects new forms. No re-initialization needed after navigation.

Reading the Nonce

After form submission, the nonce is available as a hidden field:

HTMLhtml

const nonce = document.querySelector('input[name="behavior_nonce"]')?.value;