Ein Widget lässt sich auf zwei Arten konfigurieren: mit HTML-Attributen am Element (wenn Sie das Script-Tag nutzen) oder mit Optionen für CDPCaptcha.createWidget() (wenn Sie Widgets per JavaScript anlegen).
HTML-Attribute
| Attribut | Bedeutung | Beispiel |
|---|---|---|
data-sitekey | Pflicht. Der öffentliche Sitekey der Website. | data-sitekey="…" |
data-start | Wann das Lösen beginnt. auto: sobald das Widget eingesetzt ist. focus: beim ersten Fokus im umgebenden Formular oder per Klick (Standard). none: nur per Klick oder mit start(). | data-start="auto" |
data-theme | light (Standard), dark oder auto (folgt der Einstellung des Betriebssystems). | data-theme="dark" |
lang | Erzwingt eine Widget-Sprache. Ohne Angabe nimmt das Widget das nächste lang-Attribut darüber, dann die Browsersprache, dann Englisch. | lang="de" |
data-form-field-name | Name des versteckten Felds. Standard cdp-captcha-solution. | data-form-field-name="captcha" |
data-api-endpoint | Basisadresse der API, für Installationen auf einem anderen Host als das Script. Standard: der Host, von dem das Script geladen wurde, plus /api/v1. | data-api-endpoint="https://captcha.example.com/api/v1" |
data-width | Breite des Widgets (CSS-Länge). Standard 320px; 100% füllt die Formularspalte. | data-width="100%" |
HTML
<div class="cdp-captcha" data-sitekey="YOUR_SITEKEY" data-start="auto" data-theme="auto" lang="de" data-width="100%"></div>JavaScript-Optionen
| Option | Typ | Bedeutung |
|---|---|---|
element | HTMLElement | Pflicht. Das Element, in das das Widget gesetzt wird. |
sitekey | string | Pflicht, außer das Element hat data-sitekey. |
startMode | "auto" | "focus" | "none" | Standard „focus“. |
language | string | „en“ oder „de“; siehe Sprachen. |
theme | "light" | "dark" | "auto" | Standard „light“. |
formFieldName | string | Standard „cdp-captcha-solution“. |
apiEndpoint | string | Basisadresse der API. |
width | string | CSS-Länge. |
JavaScript
const widget = CDPCaptcha.createWidget({
element: document.querySelector('#captcha'),
sitekey: 'YOUR_SITEKEY',
startMode: 'auto',
theme: 'auto',
language: 'en'
});Widget-Modus (auf dem Server festgelegt)
Die Startart bestimmt, wann das Lösen beginnt.
Ob das Widget von selbst fertig wird oder einen Klick braucht, ist der Widget-Modus.
Er wird je Sitekey in Ihrem Konto festgelegt, nicht im HTML, damit ein Bot ihn nicht ändern kann:
- Zero-Click (Standard): das Widget ist fertig, sobald das Rätsel gelöst ist.
- One-Click: das Widget löst im Hintergrund, zeigt aber „Klicken, um die Prüfung abzuschließen“ und ist nach diesem Klick fertig (oder beim Absenden des Formulars).
Mehrere Widgets auf einer Seite
Jedes Element bekommt ein eigenes Widget und ein eigenes verstecktes Feld.
Widgets in verschiedenen Formularen sind unabhängig.
Nutzen Sie data-form-field-name, wenn sich zwei Widgets ein Formular teilen.