Introduction

• When the requirement is to utilize the Cloudflare's CAPTCHA service in a web component or shadow DOM implementation, Cloudflare's script for their CAPTCHA service only queries the document in the DOM tree which presents a problem that this component solves.
• The <turnstile-widget> is a custom iframe that makes the use of cloudflare's CAPTCHA easier in your application without the above mentioned issue.

Usage

1️⃣   Install the library in your project.

npm install cloudflare-turnstile-widget

2️⃣   Import the package

import 'cloudflare-turnstile-widget';

3️⃣   Use the widget in your application.

<turnstile-widget site-key="1x00000000000000000000AA" size="compact" theme="dark"></turnstile-widget>

4️⃣   Use event listeners to receive messages from the widget.

document.querySelector('turnstile-widget').addEventListener('success', function (e) {
	console.log(e.detail.content);
});

Contributors

Thanks goes to these wonderful people:

License

Licensed under MIT

Based on omni-widget licensed under MIT