Skip to main content

Integrating and configuring the widget

First insert our JavaScript to then integrate the widget into your form.

<script src="https://cdn.power-captcha.com/v1/power-captcha-1.2.8.min.js" type="text/javascript" defer></script>

The JavaScript can be placed either in the <head> section or at the end of the page (before the </body> element).

Integration with HTML​

Add the following <div> element within the form you want to protect and replace the placeholders in the data-pc-api-key and data-pc-client-uid attributes. The POWER CAPTCHA widget is displayed within the <div> element.

<form>
     ...
     <div data-pc-api-key="<apiKey>"
          data-pc-client-uid="<uniqueClientId>">
     </div>
     ...
</form>
Replace placeholder <apiKey>​

The placeholder <apiKey> must be replaced with your API key.

Replace placeholder <uniqueClientId>​

The placeholder <uniqueClientId> must be replaced with a dynamic value that uniquely identifies the client. For example, this can be the IP address of the client. It is important that the exact same value is also passed during the token verification.

The widget should then be displayed in your form.

Extended configuration options​

In addition to the two required attributes data-pc-api-key and data-pc-client-uid, there are other attributes for customizing the widget.

The following table shows which attributes are available and how they can be used.

AttributeValue / Description
data-pc-api-keyYour API key (required attribute).
data-pc-client-uidUnique client ID (e.g. IP address of the client (required attribute)).
data-pc-check-modeConfigure the widget display and the check behavior (see Check mode). Check mode auto is default.
data-pc-langConfigure the language (possible values de, en, da, nb, sv). By default, the language of the browser is detected and used.
data-pc-debugToggle the debug mode (possible values true or false), by default false is selected. When debug mode is activated, detailed information are logged in the browser console.
data-pc-user-input-fieldCSS selector to protect an additional input field (e.g. user name or e-mail address). Can be used as an alternative to the data-pc-user attribute on the input field (Enterprise license only).
data-pc-endpointBase URL of the self-hosted POWER CAPTCHA endpoint (on-premises solution only).

Check mode / Hidden widget​

By default, the widget is always visible and the security check starts automatically as soon as the form is entered (focus event). If the attribute data-pc-user was added to a field, the check will start after the field has been filled in (change event on the input field).

However, you can individually configure the display and the check behavior. You can choose between three check modes, e.g. to deactivate the automatic security check or to display the widget only when necessary. You can set the check mode via the data-pc-check-mode attribute. You can choose between the values auto, hidden or manu. Each value stands for a specific check mode:

Check modes​

Check modeDescription
autoThe widget is visible by default. The security check starts as soon as the form is entered or after the field (e.g. user name or e-mail address) has been filled in. A manual click on the widget is only necessary if a captcha needs to be solved.
hiddenThe widget is not initially visible. The security check starts as soon as the form is entered or after the field (e.g. user name or e-mail address) has been filled in. If the check detects that a captcha must be solved, the widget is displayed.
manuThe widget is always visible. POWER CAPTCHA only starts the security check after a manual click on the widget.

Example​

For example, you can activate hidden mode as follows:

<form>
    ...
    <div data-pc-api-key="<apiKey>"
         data-pc-client-uid="<uniqueClientId>"
         data-pc-check-mode="hidden">
    </div>
    ...
</form>