Invisible Mode

To use powCAPTCHA in invisible mode, simply add the data-invisible attribute to the <powcaptcha-widget> element. This will render the widget as invisible.

Additionally, you should choose the best moment to obtain and solve the challenge. There are several options, but you can choose or create your own, such as:

• When submitting a form.
• When focusing on a field in your form.
• When a keyup event (or after a certain number of keyups) occurs in a form field.
• After a certain amount of time.
• Combining several of the above.

Keep in mind that if you do this as soon as the page loads, no user signals will be collected, which may affect the accuracy of the challenge rating. Therefore, it is recommended to wait a bit before obtaining the invisible challenge.

Here is an example of how to integrate the widget in invisible mode:

<powcaptcha-widget data-app-id="YOUR_APP_ID" data-invisible="true"></powcaptcha-widget>

You can customize the invisible widget by adding various attributes to the <powcaptcha-widget> element. You can check the widget attributes page for a complete list of available attributes.

Execution Example

Section titled Execution Example

Here is an example of how to manually execute the widget when it is in invisible mode. This example combines two strategies:

• Each time a form field receives focus, or a keyup, and if more than 5 seconds have passed since the page loaded, the invisible challenge will be solved.
• Otherwise, the invisible challenge will be solved when the form is submitted.

HTML

<form method="POST" id="form-docs-example">
	<input type="text" name="name" placeholder="Full name" required />
	<input type="email" name="email" placeholder="Email" required />
	<textarea name="message" placeholder="Message" required></textarea>
	<powcaptcha-widget data-app-id="YOUR_APP_ID" data-invisible></powcaptcha-widget>
	<input type="submit" value="Submit" />
</form>

JavaScript

const formDocsExample = document.getElementById('form-docs-example');
const widgetDocsExample = formDocsExample.querySelector('powcaptcha-widget');
const submitButton = formDocsExample.querySelector("input[type='submit']");

widgetDocsExample.addEventListener('@powcaptcha/widget/solving/progress', function (event) {
	const { progress } = event.detail;
	submitButton.value = `Loading... ${progress}%`;
	submitButton.disabled = true;
});

widgetDocsExample.addEventListener('@powcaptcha/widget/solved', function () {
	submitButton.value = 'Submit';
	submitButton.disabled = false;
});

widgetDocsExample.addEventListener('@powcaptcha/widget/error', function () {
	submitButton.value = 'Submit';
	submitButton.disabled = false;
});

let signalsReady = false;
const timeoutMs = 5000; // 5 seconds timeout to get signals

setTimeout(() => {
	signalsReady = true;
	console.log('Signals are ready');
}, timeoutMs);

formDocsExample.addEventListener('submit', async (event) => {
	event.preventDefault();
	const token = await widgetDocsExample.execute();
	console.log('Widget executed, ready to submit', token);
	// submit your form
	widgetDocsExample.submit();
});

async function resolveIfSignalsAreReady() {
	if (!signalsReady || widgetDocsExample.isLoading() || widgetDocsExample.isValidated()) {
		return;
	}
	await widgetDocsExample.execute();
}

// watch form fields
const fields = formDocsExample.querySelectorAll('input, textarea, select');
fields.forEach((field) => {
	field.addEventListener('focus', resolveIfSignalsAreReady);
	field.addEventListener('keydown', resolveIfSignalsAreReady);
});