Integracja JavaScript

Zintegruj SilentShield z dowolną witryną za pomocą czystego JavaScript lub skorzystaj z naszych dedykowanych przewodników dla React, Vue i Angular.

1. Dodaj tag skryptu

Dodaj ten tag skryptu do swojego kodu HTML, najlepiej przed zamykającym tagiem </body>:

HTMLhtml
<script src="https://api.silentshield.io/client.js?key=YOUR_API_KEY" defer></script>

2. Zainicjalizuj widget

Wywołaj SilentShield.init() po załadowaniu DOM:

JavaScriptjavascript
document.addEventListener('DOMContentLoaded', function() {
  SilentShield.init({
    apiKey: 'YOUR_API_KEY',
    lang: 'auto',
    features: {
      telemetry: true,
      captchaUI: true,
      fallbackCaptcha: true,
      showBrandingBadge: true,
    },
    onVerdict: function(response) {
      console.log('SilentShield verdict:', response);
    }
  });
});

Opcje konfiguracji

apiKey
Klucz API (wymagany)
lang
Kod języka lub 'auto' dla automatycznego wykrywania przeglądarki (domyślnie: 'auto'). Obsługuje 25 języków.
thresholdSuspicious
Wynik poniżej tego progu uruchamia wyzwanie (domyślnie: 0.6)
thresholdBlock
Wynik poniżej tego progu blokuje żądanie (domyślnie: 0.3)
telemetry
Włącz śledzenie zachowań (domyślnie: true)
captchaUI
Wyświetlaj interfejs CAPTCHA w razie potrzeby (domyślnie: true)
fallbackCaptcha
Włącz matematyczną CAPTCHA jako rozwiązanie awaryjne (domyślnie: true)
showBrandingBadge
Wyświetlaj znaczek „Chronione przez SilentShield" (domyślnie: true)
zeroPii
Disable browser fingerprinting for maximum privacy (default: false). See Features → Zero-PII Mode.
debugOverlay
Wyświetlaj nakładkę debugowania (domyślnie: false)
onVerdict
Funkcja zwrotna wywoływana po otrzymaniu werdyktu

Aplikacje jednostronicowe (SPA)

W przypadku SPA z routingiem po stronie klienta (React Router, Vue Router itp.) SilentShield automatycznie obserwuje zmiany w DOM i wykrywa nowe formularze. Po nawigacji nie jest wymagana ponowna inicjalizacja.

Odczytywanie nonce

Po przesłaniu formularza nonce jest dostępny jako ukryte pole:

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