Skip to content

HTML Frontend Client Example

This project is a minimal example demonstrating how to include the Prosopo Procaptcha bundle in an HTML page.

Quick Start

Save this file to your local machine and open it in a browser to see the Prosopo Procaptcha bundle in action. Remember to replace the <YOUR SITE KEY HERE> placeholder with your own site key. You can obtain this by logging into the Prosopo portal.

<!doctype html>
<html lang="en">
    <head>
        <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
        <title>Procaptcha demo: Simple page</title>
        <script id="procaptchaScript" type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
    </head>
    <body>
        <div class="mui-container">
            <form action="?" class="mui-form">
                <legend>Login</legend>
                <div class="mui-textfield mui-textfield--float-label">
                    <label>Email Address</label>
                    <input type="email" required />
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <label>Password</label>
                    <input type="password" required />
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <div id="procaptcha-container"></div>
                </div>
                <div class="mui-textfield mui-textfield--float-label">
                    <!-- Dev sitekey -->
                    <div
                        class="procaptcha"
                        data-theme="light"
                        data-sitekey="<YOUR SITE KEY HERE>"
                    ></div>
                </div>
                <input type="submit" class="mui-btn mui-btn--raised" />
            </form>
        </div>
        <script type="module">
            // Pattern to avoid race condition between Procaptcha script loading and Procaptcha render function call
            import { render } from './assets/procaptcha.bundle.js'

            // Define a callback function to be called when the CAPTCHA is verified
            function onCaptchaVerified(output) {
                console.log('Captcha verified, output: ' + JSON.stringify(output))
            }

            // Get the Element using elementId
            const captchaContainer = document.getElementById('procaptcha-container')
            // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
            render(captchaContainer, {
                siteKey: '<YOUR SITE KEY HERE>',
                theme: 'dark',
                callback: onCaptchaVerified,
            })
        </script>
    </body>
</html>