Widget Optionen

Das Widget wird über data- Attribute konfiguriert. Sie stehen am Container mit data-captchacore-widget, einige zusätzlich am Formular. Jede Angabe hier überschreibt die Voreinstellung, die Sie im Admin-Panel für die Site gesetzt haben.

Attribut	Werte	Standard	Beschreibung
data-theme	auto \| light \| dark	auto	Farbschema. auto folgt der Systemeinstellung des Besuchers.
data-color	Hex-Farbe	#34d399	Akzentfarbe für Checkbox und Rahmen
data-label	Text	je nach Sprache	Beschriftung neben der Checkbox
data-brand	Text oder leer	CaptchaCore	Branding rechts, leer = versteckt
data-size	normal \| compact	normal	normal ist 360 px breit, compact 300 px
data-lang	de en fr es it nl pl pt tr ja zh ko ar ru	Sprache der Seite	Sprache der Widget-Texte. Ohne Angabe zählt lang am Formular, sonst am <html>-Element.
data-start	auto \| focus \| none	auto	Wann die Prüfung beginnt: sofort, beim ersten Fokus im Formular oder erst auf Klick.
data-mode	interactive \| visible \| invisible	interactive	Überschreibt den im Admin gesetzten Modus für dieses eine Formular.
data-form-type	login register contact comment checkout password_reset newsletter custom	—	Bestimmt, welche Form-Policy greift. Gehört auf das Formular oder den Container.

Attribute am Script-Tag

Diese Angaben gehören an das <script>-Element selbst und gelten für alle Widgets der Seite.

Attribut	Pflicht	Beschreibung
data-site-key	ja	Öffentlicher Schlüssel der Site (cc_pub_…).
data-service-url	ja	https://api.captchacore.eu
data-worker-url	nein	Eigener Pfad zum PoW-Worker, nur bei abweichendem Hosting nötig.
data-memory-hard-worker-url	nein	Wie oben, für den Argon2-Worker.

Widget Modi

Der Modus wird über data-captchacore="..." auf dem <form> gesetzt.

interactive Empfohlen

Widget immer sichtbar. PoW löst automatisch. Checkbox setzt sich selbst wenn genug menschliche Interaktion erkannt wird (3+ Zeichen getippt, Mausbewegung, 2+ Sekunden). Kein Klick nötig für echte User. Fallback: manueller Klick.

visible

Widget sichtbar. User muss die Checkbox klicken um die Verifikation zu starten. Ähnlich wie reCAPTCHA v2.

invisible

Kein sichtbares UI. PoW löst komplett im Hintergrund. Token wird automatisch beim Submit eingefügt. Ideal wenn kein visueller Schutz gewünscht ist.

JavaScript-API des Widgets

Das Script legt das globale Objekt CaptchaCoreV2 an. Für statische Seiten brauchen Sie davon nichts — das Widget bindet sich beim Laden selbst an alle passenden Formulare. Interessant wird die API, sobald Formulare per JavaScript nachgeladen werden, also bei Shop-Systemen, Single-Page-Anwendungen und Modal-Dialogen.

Methode	Zweck
CaptchaCoreV2.init(config)	Manuelle Initialisierung, wenn das Script ohne data-Attribute eingebunden wurde. Erwartet mindestens siteKey und serviceUrl.
CaptchaCoreV2.attach()	Sucht erneut nach Formularen und bindet neue an. Nach jedem Austausch des DOM aufrufen.
CaptchaCoreV2.destroy()	Löst alle Widgets, stoppt den Beobachter und räumt auf. Vor einem Seitenwechsel in einer SPA sinnvoll.
CaptchaCoreV2.getWidgets()	Liefert die aktuell gebundenen Widget-Instanzen.
CaptchaCoreV2.getLanguages()	Liste der 14 unterstützten Sprachcodes.
CaptchaCoreV2.on(event, fn)	Ereignis abonnieren.
CaptchaCoreV2.off(event, fn)	Abonnement wieder lösen.

Ereignisse

CaptchaCoreV2.on('ready', function (data) {
  // Widget ist gebunden und einsatzbereit
});

CaptchaCoreV2.on('error', function (err) {
  // Netzwerkfehler, abgelaufener Nonce, ungültiger Schlüssel
  console.warn('CaptchaCore:', err);
});

Nachgeladene Formulare

Das Widget beobachtet den Seiteninhalt und greift neue Formulare mit data-captchacore von selbst auf. Das deckt die meisten Fälle ab. Wird ein Formular jedoch im selben Zug ausgetauscht und sofort abgeschickt, kann der Beobachter zu spät kommen — rufen Sie dann nach dem Einfügen ausdrücklich attach() auf.

// Beispiel: Formular per fetch nachgeladen
const html = await (await fetch(url)).text();
container.innerHTML = html;
CaptchaCoreV2.attach();   // bindet das neue Formular an

Für Shop- und Forensysteme

Systeme wie Shopware, WooCommerce oder phpBB tauschen Registrierung, Adressformulare und Kommentarfelder häufig per AJAX aus. Hängen Sie attach() an das jeweilige Ereignis des Systems, nachdem der neue Inhalt im DOM ist. Ein zweiter Aufruf schadet nicht: bereits gebundene Formulare werden übersprungen.