Widget

Widget options

The widget is configured through data- attributes. They sit on the container carrying data-captchacore-widget, some additionally on the form. Every value here overrides the default you set for the site in the admin panel.

Attributes on the script tag

These values belong on the <script> element itself and apply to every widget on the page.

Widget modes

The mode is set with data-mode="..." on the widget element <div data-captchacore-widget>; without it, the site setting from the customer area applies.

The widget's JavaScript API

The script creates the global object CaptchaCoreV2. On static pages you need none of it — the widget binds itself to every matching form on load. The API becomes relevant as soon as forms are loaded in via JavaScript, that is in shop systems, single-page applications and modal dialogues.

Events

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);
});

Forms loaded later

The widget watches the page content and picks up new forms carrying data-captchacore by itself. That covers most cases. If a form is replaced and submitted in the same breath, however, the observer can be too late — then call attach() explicitly after inserting it.

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

Submitting forms via fetch()

If your form is sent via fetch() or XHR and allows several submissions per page view (search, domain check, cart), request a separate token with widget.getToken() before each request. Each token is valid for exactly one verification; the widget solves the next challenge in the background while the visitor keeps working. Concurrent calls are served one after another and never receive the same token.

const form = document.querySelector('#domaincheck');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const body = new FormData(form);
  try {
    body.set('captchacore_token', await CaptchaCoreV2.getWidget(form).getToken());
  } catch {
    // Dienst nicht erreichbar: Platzhalter senden, Ihr Server entscheidet (Fail-Open)
    body.set('captchacore_token', 'cc-unavailable');
  }
  const res = await fetch('/domaincheck', {
    method: 'POST', body,
    headers: { Accept: 'application/json' },   // Fehler als JSON statt Weiterleitung
  });
});