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.

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">
<link href="//" rel="stylesheet" type="text/css" />
<title>Procaptcha demo: Simple page</title>
<script id="procaptchaScript" type="module" src="" async defer></script>
<div class="mui-container">
<form action="?" class="mui-form">
<div class="mui-textfield mui-textfield--float-label">
<label>Email Address</label>
<input type="email" required />
<div class="mui-textfield mui-textfield--float-label">
<input type="password" required />
<div class="mui-textfield mui-textfield--float-label">
<div id="procaptcha-container"></div>
<div class="mui-textfield mui-textfield--float-label">
<!-- Dev sitekey -->
data-sitekey="<YOUR SITE KEY HERE>"
<input type="submit" class="mui-btn mui-btn--raised" />
<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,